Support for CSS leader()

[E-M-P-I-R-E]

Stumbled across this style in the in CSS draft and was hoping some cases might be easy-pickings (I don't really know).

http://dev.w3.org/csswg/css-gcpm/#leaders

From that page

A leader [...] is a repeating pattern used to visually connect content across horizontal spaces.

Example

1. Loomings.....................1
2. The Carpet-Bag...............9
3. The Spouter-Inn.............13

[SimonSapin]

Unfortunately, this is another part of GCPM that is largely unspecified. It is more of a whishlist than a spec. For example, what happens if the content without leader is more than one line?

[zopieux]

The specs seem a bit more clear about multi-line stuff, see eg.:

In this renditon, the User Agen has chosen to move "Adams" to the next line to preserve a visual connection:

|Douglas         |
|Adams.........42|

[pmjdebruijn]

I'd love to see leader support as well, given the importance of proper table of contents in non-trivial documents.

As for line breaking style, any approach with leaders is better than having no leaders at all.

[dannyniu]

Right now I simulate the effect with something similar to this:

<ol class=toc-list><!-- Table of Contents -->
<li><a href="#chapter1">1. Introduction</a></li>
<li><a href="#chapter2">2. Notations and Symbols</a></li>
...
</ol>

@media print
{
  ol.toc-list a {
    display:              inline-block;
    width:                87%;
    position:             relative;
    border-bottom:        dotted; /* can be other styles. */
  }

  ol.toc-list a::after {
    /* There is currently no ``leader()'' support in WeasyPrint. */
    position:     absolute;
    right:        0;
    content:      target-counter(attr(href url), page);
  }
}

[chrislad]

That's a nice workaround @dannyniu , it looks especially nice with a border width of 0.4.

I've used the solution suggested here: https://www.w3.org/Style/Examples/007/leaders.en.html
It's visually closer to what tables of content usually look like.

/* 80 dots ~= 40em */
ul.leaders {
  max-width: 40em;
  margin-left: 15px;
  margin-top: 2px;  
  margin-bottom: 2px;
  overflow: hidden;
  padding-left: 0;
  padding-top: 0px;
  padding-bottom: 0px;
  list-style: none;
}

ul.leaders li:before {
float: left;
width: 0;
white-space: nowrap;
content:
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
}

ul.leaders a:first-child {
  padding-right: 0.33em;
  background: white;
  text-decoration: none;
  color: black;
}

ul.leaders a + a::before {
  float: right;
  padding-left: 0.33em;
  background: white;
  text-decoration: none;
  color: black;
  content: target-counter(attr(href url), page);
} 

<ul class="leaders">
  <li><a href="#chapter01">Chapter 1</a> <a href="#chapter01"></a></li>
  <li><a href="#chapter02">Chapter 2</a> <a href="#chapter02"></a></li>
  <li><a href="#chapter03">Chapter 3</a> <a href="#chapter03"></a></li>
  <li><a href="#chapter04">Chapter 4</a> <a href="#chapter04"></a></li>
</ul>