49

So I am aware of this option: Page numbers with CSS/HTML.

It seems by far to be the best way to add page numbers to a print version of a page, but I can't get any variation of this to work anywhere. I have tried on my Windows 7 machine in Chrome, Firefox, and IE9. Based on some of the links it looks like this may be supported in more proprietary software like Prince XML. Is this supported by web browsers for print versions?

I have tried making just a blank html file and in the head adding this between two style tags:

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

I have also simplified it even to just use content: "TEXT"; to see if I can get something to show up. Is this supported anywhere? By 'this' I'm specifically meaning the @page and @bottom-right tags, since I have gotten content to work many times.

5
  • 2
    It appears that no, paged media is not supported by chrome or firefox (and maybe not IE9 either). CSS3 was supposed to have some support for paged media, but I haven't been able to get it to work either.
    – David R.
    Apr 5, 2013 at 21:19
  • That is likely the answer then. I keep finding this around in answers and tutorials but can't find any implementation that works. Guess it is another thing to remember for the future. Apr 6, 2013 at 0:06
  • It is possible there are other parameters required for paged media style sheets to display. If multiple "pages" are on a web page, how are you declaring a page?
    – David R.
    Apr 6, 2013 at 14:50
  • Would a media query work? Then you could use @media print on an element snapped to the bottom right of the page as a workaround. Apr 7, 2013 at 13:48
  • To answer the last question: no. Paged media margin boxes are not yet supported in any major browsers: en.wikipedia.org/wiki/… Dec 6, 2014 at 20:46

5 Answers 5

17

I've been trying to implement paged media as well and have found, according to this Wikipedia page, that there's no browser support for margin boxes as yet. No wonder it wouldn't work!

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)

See the table, Grammar and Rules, margin boxes section. Margin boxes are what's needed for page numbering as well as running headers and footers. Getting this implemented would save me the overhead of having to convert the printed media to PDF.

2
11

Not using @page, but I have gotten pure CSS page numbers to work in Firefox 20:

http://jsfiddle.net/okohll/QnFKZ/

To print, right click in the results frame (bottom right) and select

This Frame -> Print Frame...

The CSS is

#content {
    display: table;
}

#pageFooter {
    display: table-footer-group;
}

#pageFooter:after {
    counter-increment: page;
    content: counter(page);
}

and the HTML is

<div id="content">
  <div id="pageFooter">Page </div>
  multi-page content here...
</div>
7
  • 7
    But it's not really a page footer. If the text ends up spanning more than one page, #pageFooter will end up beneath where the text ends on the last page.
    – BoltClock
    May 20, 2013 at 14:14
  • That's true. Not as nice as if @page worked fully. I suppose one hack could be to add spacing to the end of the last content element to push the footer down on the last page May 20, 2013 at 15:42
  • 1
    What’s the browser support for this solution? On my Mac with Chrome, Opera, and Safari, table headers and footers only print at the beginning and end of the table. Firefox prints them on every page, but counter(page) only works the first time it displays. Does this work for you and I’m just doing something wrong?
    – Teepeemm
    Jan 13, 2016 at 4:15
  • My instincts says that this implementation of counter is related to the internal behavior of OL and has nothing to do with print/pages.
    – rainabba
    Feb 2, 2016 at 18:58
  • It seems to be the best workaround so far, if you don't want to buy a prince :-) Did you ever get a non-zero value for "counter(pages)" (i.e.: the total number of pages)? Apr 19, 2016 at 22:17
3
+50

This does not seem to work anymore. Appears it only worked for a short time and browser support was removed!

Counters have to be reset before they can be used, according to https://developer.mozilla.org/en-US/docs/CSS/Counters.

You can set your starting number to whatever, the default is 0.

Example:

@page {
    counter-increment: page;
    counter-reset: page 1;
    @top-right {
        content: "Page " counter(page) " of " counter(pages);
    }
}

Page media is not well supported by any major web browser, but is supported by specialized HTML to PDF generators such as Prince XML and WeasyPrint.

13
  • 4
    That is good to know, but I'm still not actually getting this to output anything. Can you provide any insight into the @page tag? Does this actually display for you? Apr 7, 2013 at 1:38
  • Unfortunately, @page is not supported in Firefox, but supported in Chrome 2.0+, IE 8.0+, Opera 6.0+ and Safari 5.0+. @page :first is supported only in IE8+ and Opera 9.2+. This is per link I did get the @page margin to work in FF but nothing else. Apr 7, 2013 at 18:41
  • 1
    This is not working for me... it is compatibile with any browsers? Sep 18, 2014 at 21:40
  • 68
    There is NO support for paged media margin boxes in ANY major browsers yet. Stop providing answers based on unimplemented working drafts. Please. I'm also very curious how this got accepted because as of today this code has exactly no effect. Dec 6, 2014 at 20:42
  • 3
    Please remove this answer since this is a non working situation. I've wasted a lot of time because it wasn't prefaced as tested with live browsers.
    – Joel
    Oct 29, 2015 at 15:25
2

Via Mozilla, (Printing a document)

This puts a header and footer on each printed page. This works well in Mozilla, but not quite so well in IE and Chrome.

<!DOCTYPE html>
<html>
<head>
<title>Print sample</title>
<link rel="stylesheet" href="style4.css">
</head>
<body>
<h1>Section A</h1>
<p>This is the first section...</p>
<h1>Section B</h1>
<p>This is the second section...</p>
<div id="print-head">
  Heading for paged media
</div>
<div id="print-foot">
  Page: 
</div>
</body>
</html>

The CSS:

/*** Print sample ***/

/* defaults  for screen */
#print-head,
#print-foot {
    display: none;
}

/* print only */
@media print {

h1 {
   page-break-before: always;
   padding-top: 2em;
}

h1:first-child {
  page-break-before: avoid;
  counter-reset: page;
}

#print-head {
    display: block;
    position: fixed;
    top: 0pt;
    left:0pt;
    right: 0pt;

    font-size: 200%;
    text-align: center;
}

#print-foot {
   display: block;
   position: fixed;
   bottom: 0pt;
   right: 0pt;

  font-size: 200%;
}

#print-foot:after {
    content: counter(page);
    counter-increment: page;
}
2
  • This works in Firefox, which is good. But I haven't found a way how to make it work in Chrome (53) or IE (11)
    – tombam
    Sep 16, 2016 at 14:20
  • Header and footer are printed over the page's text :( Can't find out how to create blank margins on each page to print header/footer there. If I specify top: -0.5cm, header is moving up, but gets cut with page's margin and only partially visible. overflow: visible does not help.
    – cronfy
    Jun 28, 2018 at 9:35
1

If you are looking to add page numbers when printing under Chrome/Chromium, one easy solution is to use Paged.js.

This JS library takes your HTML/CSS and cuts it into pages, ready to print as a book, that you will preview in your browser. It makes the @page and most the CSS3 specifications work for Chrome.

Solution 1 (easy) if you are OK with cutting your view into pages, ready to print

Just add their CDN in the head tag of your page :

<link href="path/to/file/interface.css" rel="stylesheet" type="text/css">

You can then add page numbers by using the automated counter page. Example :

HTML to put anywhere you want to display the current page number:

<div class="page-number"></div>

CSS to make the number appear in the div :

.page-number{
  content: counter(page)
}

The library also allows to easily manage page margins, footers, headers, etc.

Solution 2 (trickier) if you want to show numbers (and page breaks) only when printing

In this case, you need to apply the Paged.js CDN only when printing the document. One way I can think of would be to add a print me button that fires Javascript to :

  1. add the CDN to the page
  2. and then execute window.print(); to launch the printing prompt of the navigator

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.