Edit online

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 a leader.
  • The page number of the target chapter/section.

It may look like this:

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

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><a href="#installing_win">On Windows</a></li>
          <li><a href="#installing_mac">On Mac</a></li>

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

@page toc {
  @top-center {
    content: "Table of Contents";
  @bottom-center {
    content: 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 following example associates the defined page to the <ul> element that gives the structure:

ul.toc {
  page: toc;

To style the TOC entries, this next snippet removes the bullet decoration from the <li> elements, then marks the <a> element as being a link (the name for each TOC entry is defined inside an <a> element).

ul.toc li {
ul.toc a {
    display: block; /* Only necessary when using a leader */
    link: attr(href);
Note: When using a leader, the alignment for each TOC entry is normally justified. The display: block property is used to treat the contents of the <a> element as a separate block with a different alignment (i.e. Align Left).
After the name for each TOC entry (the content defined inside the <a> elements), 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, it uses the page number of the target element (after the leader):

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