Is there a way to effectively style the TOC for long chapter names so the page number doesn't end up in the second line.

The problem is that I'm using long chapter names which run to the next line and it starts to look really ugly.

Is there a way that I can place a div where the page number is positioned without the leader ?

This is what I'm using right now

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

Attached screenshot

1. tocstyle.png‎ 34.9 kB

Perhaps formatting the table of contents as an actual table with three columns would work better? You could probably achieve the same result by applying "float: right" on the page number, if you don't want to use actual table markup. Or it may be easier to turn it into a table with CSS, eg. using "display: table-row" and "display: table-cell".

thanks that worked

How did you manage the get the roman and decimal page numbers into the TOC? While my actual page numbers on the @page are roman and decimal as desired, they are decimals only in the TOC.

Thanks!

EDIT: Nevermind the question A simple

content: leader(".") target-counter(attr(href), page, lower-roman);

works, and it switches all TOC entries to roman. Now for the same selective styling as I did for the pages:

#content > a:nth-of-type(-n+9):after {
  content: leader(".") target-counter(attr(href), page, lower-roman);
}
#content a:after {
  content: leader(".") target-counter(attr(href), page);
}

This assumes a TOC chapter with an id="content" and a number of children that link to the actual chapters. Using the selectors above, the first nine are printed using roman numbers in the TOC, and the rest using the default latin numbers.

Edited 16 Apr 2013 by _savage

In the TOC we have created we would also like to show lower roman numerals when the pages are number as such. In this document the first 50 or so pages are lower case roman numerals and the rest is decimal numbering. The solution provided by _savage looks like it is exactly what we need. I tried using it but I can't get it to work. Would it be possible to share the entire section of the TOC style sheet so I can see what I'm doing wrong.
I am very new to CSS so I may not use the correct terminology.

Hi jcwatson. That’s a long time ago

If I remember correctly then the TOC was a simple nested list like so

<ol class="toc">
  <li class="hidden" ><a href="#cover">Cover</a></li>
  <li><a href="#chapter-1">…</a></li>
  <li><a href="#chapter-2">…</a>
    <ol class="toc">
      <li><a href="#section-2-1">…</a></li>
      …
    </ol>
  </li>
  …
</ol>

and the CSS for that was something like

#toc {
  page: page-nofolio;
}
/* chapters up to 9 use roman, the rest following use decimal. */
#toc > a:nth-of-type(-n+9):after {
  content: leader(".") target-counter(attr(href), page, lower-roman);
}
#toc a:after {
  content: leader(".") target-counter(attr(href), page, decimal);
}
#toc > ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
#toc > ol > li {
  margin: 0;
  padding: 0;
}