CSS page numbers not working

Question

I've tried to play around with @page and counter(page) features of CSS3, but I can't see any page numbers added to the print output. No matter what I do, looks like this is simply not working.

My scaffold looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <style type="text/css">
        @page {
           counter-increment: page;
           counter-reset: page 1;
           @top-right {
              content: "Page " counter(page) " of " counter(pages);
           }
        }
        </style>
<head>

<body>
        <div>

        Lorem ipsum dolor...
        /* this gets long, 2 pages of text */
        </div>
</body>
</html>

The way I'm testing this out is that I'm opening the page in the browser, printing it to a PDF file and finally I'm verifying the contents. In different browsers the output is a bit different, but nowhere I can see proper page numbers.

OS: Linux Mint

Browsers: Chromium 25.0.1364.160, Firefox 20.0.1, Opera (latest from package manager)

Any ideas?

Wouldn't you need to get `counter-reset: page 1` out of the `@page` declaration? Otherwise it's resetting the page number for every page. — Juanjo, Apr 13 '13 at 18:57
I moved this style to the `` but that didn't help. Nothing is shown in `top-right` section — ŁukaszBachman, Apr 14 '13 at 14:08
The page counter is automatically created and incremented if your browser supports css3-pages, which as far as I can tell is none of them. — dsas, Jul 11 '13 at 14:36

score 1 · Answer 1 · answered Apr 16 '13 at 02:25

1

Browser support for this is not up to par.

@page {margin: 2in} is supported in new versions of Firefox, but not other parameters of @page. I believe this is true of other browsers as well.

answered Apr 16 '13 at 02:25

John Biddle

2,664
2
15
25

That is also my guess, but people are writing about experimenting with such markup, so I'm lost. I wouldn't mind using specific browser, but I have nooooo clue which one would work! – ŁukaszBachman Apr 16 '13 at 05:29
I answered a similar question here [link](http://stackoverflow.com/questions/15797161/browser-support-for-css-page-numbers/15856287#15856287) and in the comments linked to several interesting sources you might find useful. – John Biddle Apr 16 '13 at 19:05
John Biddle, I've seen your post already before posting my own :) So you WERE able to see generated page counters before, is that correct? Which browser you used? – ŁukaszBachman Apr 17 '13 at 05:12
Sorry, no. I was only able to get the margins to work. I only tried Firefox & Chrome, though. – John Biddle Apr 20 '13 at 02:33

score 0 · Answer 2 · answered Jul 11 '13 at 14:31

Your file should look like the below. Note that the page counter is special and doesn't need setting up and incrementing.

Firefox, webkit and I think opera too don't support css3-pages so it doesn't work. Neither do newer versions of IE, despite MSDN implying they do.

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <style type="text/css">
        @page {
          @top-right {
              content: "Page " counter(page) " of " counter(pages);
           }
        }
        </style>
<head>

<body>
        <div>

        Lorem ipsum dolor...
        /* this gets long, 2 pages of text */
        </div>
</body>
</html>

CSS page numbers not working

2 Answers2

Linked