CSS page counter in printed (or PDF) output

Asked 21/8, 2012 at 19:37 Answered 19/4, 2016 at 22:30

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

This is the only way i found to display the page numbers as 'Page 5 of 10' for example. However it does not seem to be working. I tried it in a simple HTML page but it didn't work.

I want to display the page number any where in the page using plain html/css.

Did anyone succeed to make it work? If so, I appreciate your support.

Earl answered 21/8, 2012 at 19:37 Comment(13)

What is @page and @top-right? Did you mean #page and #top-right instead? – Cockayne 21/8, 2012 at 19:39

@JonathanSampson, @page is legal CSS: w3.org/TR/CSS21/page.html#page-box – Inexplicable 21/8, 2012 at 19:42

No, actually i'm referring to princexml.com/doc/8.1/page-numbers – Earl 21/8, 2012 at 19:43

@bfrohs I'm familiar with @media and @page, but it was the @top-right that caused the confusion. – Cockayne 21/8, 2012 at 19:46

@user1615143, you may want to note this in the question, as it changes the answer dramatically. – Inexplicable 21/8, 2012 at 19:46

@user1615143, also, take a look at this: #2761120 – Inexplicable 21/8, 2012 at 19:48

@bfrohs, i didn't get why are you pointing to this: #2761120 ?? – Earl 21/8, 2012 at 20:11

@nada.adly, it's basically the same question, but for vanilla CSS. The answer provided for that question could possibly be used as a workaround. – Inexplicable 21/8, 2012 at 21:11

@bfrohs, i still can't find it related. I want to display the page number. – Earl 21/8, 2012 at 22:7

@nada.adly, instead of using @top-right, use position:fixed;right:0;top:0; on a ::before or ::after pseudo element? That'll at least allow you to get the correct positioning for browsers that don't yet support CSS3 Paged Media. As for the page numbers, I'm not sure of a workaround for that. – Inexplicable 22/8, 2012 at 13:30

@JonathanSampson, @top-right is defined in CSS3 Paged Media. – Inexplicable 22/8, 2012 at 13:31

@nada.adly: yesterday, you mentioned in the comments that you needed it for printed or PDF output and that you used PrinceXML to create the PDFs. Today this comment is deleted though... -- I'm sorry if I misunderstood and if I misrepresented your question. – Wembley 23/8, 2012 at 23:57

@nada.adly: Just to confirm -- so you don't use Prince? (In this case I'd delete or modify my answer.) Be aware, that your CSS code will only work for paged media (such as print output or PDFs made by Prince). There is no way to put the page numbers into the HTML website itself. And there's also no way to put the page numbers on a PDF page at arbitrary positions. Your only choices are the top- and bottom -left/-right/-center margin boxes, nowhere on the main page... – Wembley 24/8, 2012 at 0:3

You quote a (by and large correct) CSS snippet to create PDF- and print output ("paged media") from HTML input, but you say: "it does not seem to be working".
Then, two sentences further down, you say: "I want to display the page number any where in the page".

First, point two.

There is no way to put the page numbers into the HTML website itself. This feature is only for paged media, such as PDF or print output created from the HTML.

So, it's only for PDF or print output. But even there: there's also no way to put the page numbers on the PDF or print page at arbitrary positions. Your only choices are the top- and bottom -left/-right/-center margin boxes, nowhere on the main page.

Second, point one.

Now for putting the page number info into these spots where they are possible...

Since you do not elaborate what exactly does not work with your setup, let me give you a rundown:

Create a file my.css and put the following content into it (it's not the minimum required by your question, but adds a few more goodies for you to experiment with).

Also, at first I'll explain how to use it with PrinceXML.

@page { size: A4 landscape;
    background: gray;
    border: solid 1pt blue;
    padding: 9pt;
    margin: 18pt 18pt 18pt 18pt;
    font-family: "Helvetica Narrow";
    @top-left {
       content: 'PrivateCopy';
       color: red;
       font-style: bolditalic;
              }
    @top {
       content: string(doctitle);
         }
    @bottom-left {
       content: 'My Super-Duper Manual';
       font-style: bold;
                  }
    @top-right {
       content: "Page " counter(page) " of " counter(pages);
       font-style: bold;
                  }
    @bottom {
       content: string(paratitle);
            }
  }

Save the file somewhere on your disk.

Now call the PrinceXML commandline and use -s my.css to apply the style sheet:

prince                                                           \
  --verbose                                                      \
  --javascript                                                   \
  --style=/path/to/my.css                                        \
    https://mcmap.net/q/1712129/-css-page-counter-in-printed-or-pdf-output \
  --output=my-css-page-counter-question.pdf

(Obviously, you need to adapt your path to the my.css stylesheet file. But then...) Voila!, your Stackoverflow question in a PDF...

Of course you can extend my.css with many more features. And of course, you can use it for any conversion of HTML files, even local ones mixed with remote ones:

prince                                                 \
  --verbose                                            \
  --javascript                                         \
  -s /path/to/my.css                                   \
   /home/nada.adly/Documents/title.html                \
   /home/nada.adly/Documents/chapter_1.html            \
   /home/nada.adly/Documents/chapter_2.html            \
   http://en.wikipedia.org/wiki/Cascading_Style_Sheets \
   http://stackoverflow.com/questions/tagged/css       \
  -o random.pdf

Now for using CSS aside from and without PrinceXML, and for direct print output. (Of course you can always print the PDF generated by PrinceXML -- but maybe you don't want to use Prince at all?)

Again, you are not clear about the scope of your question:

Do you as a browser user want to get these page numbers into any website printout you may do?
Or do you as a webmaster responsible for a website want to make sure that these page numbers get in into the printouts your website visitors do from your content?

I'll not elaborate any of these two points here (since I may be completely missing your point), but...

...you should google for 'User Style Sheets' and for 'print.css' to find out where exactly to store this CSS code (because user style sheet locations are different from browser to browser);
...the CSS code is the same for any one of the two purposes (webmaster's style sheet or user style sheet).

Wembley answered 22/8, 2012 at 21:19 Comment(1)

Seems you can help me. Look at this : #43951103 – Kirima 16/5, 2017 at 1:51

This works only when HTML page is printed. Try to print or save your HTML page as .xps . You will see the page numbers.

Wiersma answered 21/8, 2012 at 19:43 Comment(1)

Actually i tried t print it .. it showed 1/1 at the bottom right which is done by default with the browser it self .. even without the css. Did you try it ? – Earl 21/8, 2012 at 19:47

If you are using Prince, all will work fine and you can safely rely on the newest CSS3 standards which will allow you to produce print-quality PDFs.

If you are not using prince, you are out of luck. There are multiple options for working around, but none of the really do the job.

 @page { anything }

is close to useless in the browser world when it comes to pagination. It seems fine for some margins in some browsers. Another problem is the missing implementation of margin-box like "@top-right". None of the browser I tested even heard of them :-) Again, Prince knows them all.

Chrome doesn't use the whole @page approach and has a checkbox in the chrome-print dialog, which allows you to embed very crude pagination ("1/2"). It is not configurable in any way and completely ignores any page number related css.

Firefox is a much better candidate, at least there is a vaild workaround, but the problem here is, that the counters(pages) is always zero. So if you want to show the amount of total pages, this approach leads nowhere.

For browsers, it will utlimately boil down to the used HTML/CSS rendering engine. All libraries, stand-alone solutions and embedded browser rely on the underlying renderer and if the feature is not or badly support, the framework can'T do anything about it (like awesomoium, cefsharp etc.).

Alphabetic answered 19/4, 2016 at 22:30 Comment(1)

For my own part, I keep using webkit via cefsharp with the hard-coded chrome pagination. If that's not enough for the customer, I will go with Prince and pay the pri(n)ce :-) – Alphabetic 19/4, 2016 at 22:34

If you are printing using a browser, not many browsers (as of December 2013) support all of the CSS Paged Media specification. On the whole, you are usually pretty sure of getting page-breaks supported, but headers and footers don't work in any browser I have tested.

However, if I print using PrinceXML, it works fine:

"C:\...\prince.exe" http://localhost/Test/ -o C:\Pdf\prince.pdf

I get all my headers and footers, page numbers, dynamic content.

You'll find that more and more browsers / rendering engines will add full support as the specification matures.

Amman answered 6/12, 2013 at 14:44 Comment(0)

Recommended topics

Hot tags