Creating a Table of Contents (TOC)

A TOC (table of contents) is a special page that contains links to the chapters and sections of your book. Each line contains:
  • The title of the chapter or section.
  • A line of dots or other decoration, called leader.
  • The page number of the target chapter/section.

It may look like this:

Installing the Software ..........................10
   On Windows ....................................12
   On Mac.........................................17

Obviously there should be some structure in your document that reflects the tree of the TOC, with ID links.

 <ul class="toc">
    <li><a href="#introduction">Introduction</a></li>
    <li><a href="#installing">Installing the Software</a></li>
    <li><ul>
          <li><a href="#installing_win">On Windows</a></li>
    </ul></li>
    <li><ul>
          <li><a href="#installing_mac">On Mac</a></li>
    </ul></li>
 </ul>

You can use the same target-counter function as for Cross References, but first suppose that you want to create a special page for the TOC:

@page toc {
  @top-center {
    contents: "Table of Contents";
  }
  @bottom-center {
    contents: counter(page, lower-roman);
  }
}

This page places the "Table of Contents" text in the header of the page hosting the TOC and puts the number of the TOC page in the footer, with lower roman digits.

The next example associates the defined page to the ul element that gives the structure:

ul.toc {
  page: toc;
}

To create the TOC entries, the next example removes the bullet decoration from the li elements, then marks the a element as being a link.

ul.toc li {
    list-style-type:none;    
}
ul.toc a {
    link: attr(href, url);
    text-decoration:none;
}
In the next example, after the a element, a leader is used to expand to the available width. You can specify a character pattern for the leader:
  • dotted - Creates an area filled with dots.
  • solid - Creates an area filled with a dash.
  • space - Creates an area filled with spaces.

Also, after the leader, it uses the page number of the target element:

ul.toc a:after{
    color:blue;
    content: leader(".") target-counter(attr(href, url), page);
    link: attr(href, url);
}