Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support for CSS leader()

See original GitHub issue

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

Issue Analytics

State:
Created 9 years ago
Reactions:2
Comments:5 (1 by maintainers)

Top GitHub Comments

1reaction

chrisladcommented, Apr 21, 2020

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>

0reactions

dannyniucommented, Apr 1, 2020

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);
  }
}

Top Results From Across the Web

CSS: dot leaders - W3C

Typographers call “dot leaders” the rows of dots that connect columns in a table, such as this: ... Dots are the most common,...

Responsive TOC leader lines with CSS - markentier.tech

For the leaders we can use the ::after pseudo element. This has the advantage to not only add them without extra HTML markup,...

"css variables" | Can I use... Support tables for HTML5, CSS3 ...

"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile ... CSS Environment Variables env()....

CSS Dot Leaders - CodePen

CSS only dot leaders styled intelligently with SASS + fancy HR rules using CSS. RE: http://www.w3.org/Style/Examples/007/leaders.en.html...

Create leading dots in CSS - Stack Overflow

This is based on nootrope's excellent solution on this page. Their "leaders" class can be re-added if required. ul{ padding: 0; overflow- ...