2022.2

1. Addthefollowingvariable:var linknumber = 1;.Thisvariableisusedtogenerateunique
IDsforelementsthatdon'thaveanID.
2. Beforethefirstlinethatstartswith'toc',addthefollowing:
var anchorId = '';
if (this.attr("id")) {
anchorId = this.attr("id");
}
else {
anchorId = 'generatedID-' + linknumber;
linknumber++;
this.attr("id", anchorId);
}
Thiscodetakestheelement'sID.Ifanelementdoesn'thaveanID,thescriptgeneratesanew,
uniqueIDforit.
3. Replacetheline:
toc += '<span class="text">' + text + '</span>';
withthisline:
toc += '<a class="text" href="#' + anchorId + '">' + text + '</a>';
4. Thenewlineaddsahyperlink:<a...href>withtheelement'sIDtothetableofcontents.
Step 4: Styling the table of contents
EachcomponentofthetableofcontentsinsertedinStep3iswrappedina<span>elementthathasa
class,forexample:"dots"orevenmultipleclasses:"toc-entryh1".(Classnamesareseparatedbya
space.)
TheseclassescanbeusedtostylethetableofcontentswithCSS.TheprinciplesofstylingwithCSS
areexplainedinanothertopic:"StylingtemplateswithCSSfiles"onpage672.
AddthefollowingstylestothestylesheetforthePrintcontext(see"Step1:editCSS"onpage676)to
alignthepagenumbertotherightandfillthespacebetweenthetextandthepagenumberwithleader
dots.
p.toc-entry {
display: flex;
margin: 0 0 0.25em 0;
}
p.toc-entry .text {
flex-shrink: 0;
}
p.toc-entry .dots {
flex-shrink: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
p.toc-entry .dots::after {
Page 855