javascript - How to automatically add a page number to all internal links on the HTML page? - Stack Overflow

admin管理员组

文章数量:1330564

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.

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.

• javascript
• html
• css

Share Follow edited Apr 16, 2017 at 3:53 Cœur 38.8k2626 gold badges205205 silver badges277277 bronze badges asked Aug 28, 2012 at 15:18 TomaszTomasz 1,04022 gold badges1111 silver badges2626 bronze badges 3

• 2 I presume you mean to say that it need not be cross-browser patible, rather than must not be? That is to say, an answer that happens to work in other browsers should be acceptable, so long as it does in at least FF and Chrome, correct? – KRyan Commented Aug 28, 2012 at 15:19
• 2 Target counters in the Generated Content for Paged Media module will do exactly what you want, but I'm not aware of any browser implementations. I believe PrinceXML supports it. See my answer to this question. – BoltClock Commented Aug 28, 2012 at 15:24
• Actually, if you need to reference the page that #targetPage is on, I'm not sure how that will work. But hey, at least it's a hint :) – BoltClock Commented Aug 28, 2012 at 15:33

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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.

Could this work?

@page {
  @bottom-right {
    content: counter(page) " of " counter(pages);
  }
}

(from Page numbers with CSS/HTML)

本文标签： javascriptHow to automatically add a page number to all internal links on the HTML pageStack Overflow