3

I have been seeking this answer for a while now and wasn't able to find anything that could work properly. I had these two ideas that kind of look like weren't working at all for quite sometime:

  1. A method using @page with bottom-right. Link

  2. A method using fixed footer. (Said to work in Firefox) Link

Is there any other way?

Community
  • 1
  • 1
Leon Freire
  • 798
  • 2
  • 6
  • 16
  • Can you solve my problem https://stackoverflow.com/questions/46542080/not-able-to-set-page-number-in-latest-chrome-browser-using-print-css – Abhilash Narayan Oct 04 '17 at 16:44

1 Answers1

4

After a while doing some research I think I got something cooking here which still needs some testing in different browsers, and maybe some perfectioning. For now, I've tested and seems to be working fine in Chrome.

Basically, blending in a little of both techniques I was able to create this idea that replicates (on load) a h3 for each p in the work (just so it runs enough for each page). They have position: absolute and each one subtracts 100vh so they go to the bottom of the other page.

Here it is: JSFiddle - Without Page Total

EDIT

Here's a new version capable of showing the page total: JSFiddle - With Page Total

Hope this has some use!

Leon Freire
  • 798
  • 2
  • 6
  • 16
  • 10
    this does not adjust to the content dynamically, but only insert a counter every 10 paragraphs. please correct me if I'm wrong? – phil294 Aug 04 '17 at 23:47
  • @Blauhirn There is no current way to do this dynamically. This solution may be easily adjusted to any case. I used for this example an average of "p"s for a page with a lot of text. But it may be adjusted accordingly for any rule. For any number of elements. – Leon Freire Aug 07 '17 at 11:35