CODEWITHSUNDEEP
htmlcssprinting
Ricardo Mogg
Ricardo Mogg

Reputation: 589

CSS HTML page numbering

I know this question has been asked. However I can't figure out what I am doing wrong. I want page numbers to be printed on the top-right of the page when printing an html.

This is the code I have, what is wrong?

<html>
  <head>
    <style media="print">
    @page {
        counter-increment: page;
        counter-reset: page 1;
        @top-right {
            content: "Page " counter(page) " of " counter(pages);
        }
    }
    </style>
  </head>
  <body>
    <div style="height:800px">hello</div>
    <div style="height:800px">hello</div>
    <div style="height:800px">hello</div>
    <div style="height:800px">hello</div>
    <div style="height:800px">hello</div>
    <div style="height:800px">hello</div>
    <div style="height:800px">hello</div>

  </body>
</html>

Upvotes: 2

Views: 525

Answers (2)

Rob
Rob

Reputation: 15168

You can't use @page for any of that except, perhaps, as @alex pointed out. According to MDN

You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.

Upvotes: 2

alex
alex

Reputation: 7471

The answer to your question is specific to the browser you're attempting to use this CSS rule with. The @top-right CSS at-rule looks like it's supported by IE8, but no other browsers.

Check out @Page margin boxes for some more information about this.

Upvotes: 1

Related Questions