Log in / Register

Forum › How do I...?

Problem with TOC

ichichich
I am using the following example HTML for testing a document with a TOC per chapter:


<html>
<head>
<link rel="stylesheet" href="single_toc.css" />
<style type="text/css">

body {
display: block;
page: main;
counter-reset: page 1
}

@page main {
@bottom-left {
content: counter(page);
}
}

.chapter {
counter-increment: chapter-num;
page-break-after: always;
}

h1:before {
content: counter(chapter-num) " ";
}

</style>
</head>
<body>
<div class="toc" id="toc1">
<span class="title">Table of contents</span>
<ul>
<li> <a href="#kapitel-1">Kapitel 1</a> </li>
</ul>
</div>
<div class="chapter">
<a name="kapitel-1"/><h1>Kapitel 1</h1>
</div>


<div class="toc" id="toc2">
<span class="title">Table of contents</span>
<ul>
<li> <a href="#kapitel-2">Kapitel 2</a></li>
</ul>
</div>
<div class="chapter">
<a name="kapitel-2"/><h1>Kapitel 2</h1>
</div>
</body>
</html>


single_toc.css looks like this:

.toc ul, .toc li {
list-style: none;
margin: 0;
padding: 0;
}

.toc a {
color: black;
text-decoration: none;
}

.toc a::after {
content: leader('.') target-counter(attr(href), page);
font-style: normal;
}

.toc {
page-break-after: always;
}

The second TOC references to page number '1' instead of '3'.
What am I doing wrong?
mikeday
This is an issue with Prince where empty inline elements that are not in a text paragraph may not work as the target of links. If you place an id="kapitel-1" on the chapter div instead it will work, alternatively you can move <a name="kapitel-1"/> inside the <h1> element. However, I would recommend using the ID attribute, the name attribute is rather obsolete.