Geek asks and answers

CSS page numbers do not work

I tried to play with CSS3 features @pageand counter(page), but I do not see any page numbers added to print output. No matter what I do, it looks like this just doesn't work.

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 test this is opening a page in a browser, printing it in a PDF file, and finally checking the contents. In different browsers, the output is slightly different, but nowhere do I see the correct page numbers.

OS: Linux Mint

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

Any ideas?

+5
source share
2 answers

Browser support is not up to par for this.

@page {margin: 2in} Firefox, @page. , .

+1

. , .

Firefox, webkit, , css3-, . IE, , MSDN , .

<!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>
0

More articles:


All Articles