CSS page counter in printed (or PDF) output

Question

@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.

Answer 1

1. 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".

2. 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                                        \
    http://stackoverflow.com/questions/12061835/css-page-counter \
  --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:

1. Do you as a browser user want to get these page numbers into any website printout you may do?

2. 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).