2

I'm working on a project that is involving converting PDF handbooks to html. I am trying to retain the value of a PDF when printed, while giving them a better ui on devices which aren't bound by the concept of pages. The issue that I am running into is that these handbooks have a Table of Contents with the page number of where each chapter/section begins. When viewing on a device, that list will just be in-page anchor links, but when printing I would like to get the page number of an element (such as which page the heading for Chapter 3 is on) and add it to the table of contents, especially after applying print styles like page-break-after:avoid;.

As an example, I would like to know what it would take to accurately add page numbers to the following wikipedia article's table of contents when printed. http://en.wikipedia.org/wiki/Character_mask

Edit: My thought is to use a print stylesheet to add page numbers when printing:

@page {
    @bottom {
        content: "Page " counter(page) " of " counter(pages)
    }
}

and then use javascript to detect the print using matchMedia/onbeforeprint (http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/) and then grab the page number from the content, but I'm not sure how to find that dynamically added content. Is that possible? Is there some other solution?

mlrawlings
  • 711
  • 4
  • 9
  • HTML printing will vary from browser to browser, therefore so will the page numbering. If you want realistic page numbers. you're better of sticking with the PDF. – Diodeus - James MacFarlane Mar 21 '13 at 20:41
  • This another question could help you: http://stackoverflow.com/questions/6109893/page-numbers-with-css-html – Douglas Lise Mar 21 '13 at 21:04
  • @DouglasLise, That's the easy part. I need to know how/if I can grab those page numbers before the document is printed and insert them into a table of contents. – mlrawlings Mar 21 '13 at 21:07
  • 1
    Sorry @mlrawlings, I got confused. But had you tried using "target-counter" CSS property? This link could help you http://alistapart.com/article/boom Inside it, find by target-count... – Douglas Lise Mar 21 '13 at 21:13
  • @DouglasLise I need to read a bit more, but at first glance that looks like what I was looking for. Thanks! – mlrawlings Mar 21 '13 at 21:15

0 Answers0