How to automatically add a page number to all internal links on the HTML page?

Question

In print mode, I would like to render such a links:

<a href="#targetPage">link</a>

like this:

<a href="#targetPage">link (page 11)</a>

(suppose the target page is on 11. page in print preview).

It is possible to add page number using counters to the page footer with plain CSS, but could I use this in more "the way I want it" way?

The solution doesn't need to be cross-browser (FF/Chrome is enough), any CSS/Javascript tricks are allowed.

Answer 1

As I wrote in my blog post "Printing web pages", printing web pages is in a sorry state.

Unless you print only (one column) text without images and tables, it's already hard enough to get a printout which resembles the screen content at least somewhat (yeah, I exaggerate here but not much).

The best browser for printing currently is still, since about a decade, Opera. All other browsers suck more or less.

CSS could help a lot but no browser implements the necessary parts. See Target counters in the Generated Content for Paged Media module - this would do exactly what you need.

Okay, after getting the rant out of the way, here are some obstacles which you will need to solve:

The page numbers will start to shift as soon as you start adding test to existing links. So if you write "blabla (page #12)" that will probably page #13 once you get there.

To be able to know what goes onto which page, you will have to split the web page into pages yourself. If you have mostly text, this isn't terribly hard: Just create one div per page, make sure the browser doesn't print it over a page break (good luck with that :-( ) and then move DOM elements into the divs until they fit a page ... if you can find out what the page size is.

To avoid the shifting problem, add " (page #0000)" to all links to make sure they occupy enough room. Later, they will be replaced with shorter texts, so pages with a lot of links might have some empty space at the bottom but that's better than the alternatives.

You should be able to write something like that (and debug it) in just six months or so ...

Which is why everyone uses a rendering engine on the server which can produce HTML and, say, PDF output. PDF allows you exact control over the page layout. You just need to find a rendering engine that supports text references. I suggest LaTeX; it's a bit unwieldy but it gets the job done.