Print page numbers for table of contents using CSS in Chrome

Question

Is there a way to print landing page numbers with hyperlinks that are linked to different places in the same document?

<h1>Table of Contents</h1> <ul> <li><a href="#introduction">Introduction</a></li> </ul> ... <section id="introduction"> <!-- Appears, for example, on page 3 when printed --> <h1>Introduction</h1> ... </section> 

So, the result looks like this:

 Table of Contents (page 0) Introduction.........................3 ... Introduction (page 3) 

I only need this to work with the Google Chrome browser when printing in PDF format (on OS X).

Is there any CSS or JavaScript trickery that would allow me to achieve this?

Answer 1

This seems to be part of the new CSS specification working draft:

http://www.w3.org/TR/2014/WD-css-gcpm-3-20140513/#cross-references

I doubt there is still browser support ...

Answer 2

I have no idea whether this will work in PDF format or not, but to answer the question of how this can be done in CSS:

You can generate numbers with counter-increment on a pseudo-element in css:

note that I changed your <ul> to <ol> as it is an ordered list, whether you use list-style or not.

 ol { counter-reset: list-counter; } li:after { counter-increment: list-counter; content: counter(list-counter); float: right; } 

Creating a small dashed line between the text and the number takes a bit more work, but you can achieve this by adding some additional span elements and using css display: table; and display: table-cell; to lay them out correctly

 <ol> <li><span>Test</span><span class="line"></span></li> <li><span>Test2</span><span class="line"></span></li> <li><span>Test3</span><span class="line"></span></li> </ol> 

---

 li { display: table; } li span, li:after { display: table-cell; vertical-align: bottom; } li span.line { border-bottom: 1px dotted #000; width: 100%; } 

Setting the width to 100% in the span.line element, although not setting any width, forces it to fill all the remaining space (this is due to table-cell display elements that cannot be broken into new lines, and preventing overflow of content )

See full demo

This is not the cleanest approach to adding extra span elements, but it is a bit of a challenge. Perhaps someone else can take the time to think of a more effective way to achieve it? You can always simply highlight the underline under the entire <li> and skip the extra markup at the price of a little less cool.