i have a simple `id` & `href` combo to make anchors clickable like html:
my css:
for some reason, toc isn't clickable inside the pdf.
the outline in the editor works fine but not inside the pdf where toc is printed.
also, no numbers in toc. every item is 0.
<div class="container">
<div class="frontcover"></div>
<nav id="toc" role="doc-toc" class="pagebreak">
<h1>table of contents</h1>
<ol>
<li class="chapter">
<a href="#chapter-1">chapter 1</a>
</li>
<li class="ml-3">
<a href="#writing-a-table-of-contents">writing a table of contents</a>
</li>
<li class="chapter">
<a href="#chapter-2">chapter 2</a>
</li>
</ol>
</nav>
<h1 class="chapter" id="#chapter-1">
chapter 1
</h1>
<h2 class="subtitle" id="#writing-a-table-of-contents">
writing a table of contents
</h2>
<h1 class="chapter" id="#chapter-2">
chapter 2
</h1>
</div>
my css:
/* table of contents start */
#toc {
break-before: page;
}
#toc ol {
list-style-type: none;
}
#toc a:after {
content: leader('. ') target-counter(attr(href), page);
}
#toc a {
text-decoration: none;
}
/* table of contents end */
for some reason, toc isn't clickable inside the pdf.
the outline in the editor works fine but not inside the pdf where toc is printed.
also, no numbers in toc. every item is 0.