A common CSS command, especially useful in creating TOCs, is:

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

It works fine when all characters in the TOC are the same size. However, when there are small letters (e.g. a "small" element), the leaders don't align; the leaders for lines with small letters are shorter.

It seems as if the calculation of the leader length only counts the letters, and ignores their size.

Hi,

I can't quite reproduce the issue you are referring to, perhaps you could post a small example?

Leaders are aligned to an integral number of dots from the left-hand edge of their containing block (like a tab stop), regardless of the text that precedes them on the line. This means that the size of the preceding text should not affect the alignment of the leader:

<div class="toc">
<a href="#chap1">Chapter 1: The beginning</a><br/>
<a href="#chap2"><small>Chapter 2: A small chapter</small></a></br>
...

However, if the font size of the leader itself is changed, then the size of the dots and the space between them will also change, so the leaders will no longer line up:

<div class="toc">
<a href="#chap1">Chapter 1: The beginning</a><br/>
<small><a href="#chap2"><small>Chapter 2: A small chapter</a></small></br>
...

To ensure that leaders line up exactly, use the same font size for all of the leaders in the table of contents.

I found the source of the problem, and it is really not related to font sizes. The problem was I had spaces after some of the anchors:

<ul>
<li><a href="#0">chapter 0&nbsp;</a></li>
<li><a href="#1">chapter 1</a>&nbsp;</li>
<li><a href="#2">chapter 2</a></li>
</ul>

So there is a space between the page number of "chapter 1" to the right margin, and so the leader for chatper 1 looks shorter than the other two.