46

An interesting use case has popped up for us, we are requiring that when we print a website the printed copy will have a page header and footer, and inside the footer the page number.

Anyone got any idea how to achieve this?

Note: Browser version can be the latest of anything, clients are other web developers.

1

2 Answers 2

40

Depending on your required browser support.

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

Further reading:

8
  • 1
    Thanks mate, will give that a go :) Any idea about browser support?
    – balupton
    Commented May 24, 2011 at 11:54
  • @balupton Not sure, give Quirks Mode a look into :)
    – alex
    Commented May 24, 2011 at 12:14
  • 2
    I was looking more for the @page and @bottom-right pieces. I've used content and counter but haven't been able to get this to actually display anywhere, and can't find on caniuse or elsewhere where it should work for sure. Commented Apr 1, 2013 at 21:53
  • 2
    @alex whats the replacement for @page margin boxes then now? It would really help to be able to print page numbers in IE11
    – philk
    Commented Nov 1, 2015 at 0:55
  • 6
    These don't work in any major browsers as of now. :) Commented Aug 30, 2019 at 15:11
1

Now in 2024 this works with pagedjs that works as a polyfill

https://pagedjs.org/documentation/2-getting-started-with-paged.js/#using-paged.js-as-a-polyfill-in-web-browsers

Sample here

<!DOCTYPE html PUBLIC>
<html lang="en" lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <title>
    pagedjs sample - more complex at raisercostin.org/resume
  </title>
  <script src="https://unpkg.com/[email protected]/dist/paged.polyfill.js"></script>
  <style type="text/css">
    @page {
      size: A7 portrait;
      margin: 100px;
      border: solid 1px blue;

      @top-left {
        content: "top left text";
        border: solid 1px red;
      }

      @bottom-right {
        content: "bottom right text";
        border: solid 1px green;
      }
    }
  </style>
</head>

<body>
  content
</body>

</html>

This should be rendered in chrome as a7 page rendered

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.