48

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.

Community
  • 1
  • 1
David Fritsch
  • 3,711
  • 2
  • 16
  • 25
  • 1
    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 05 '13 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. – David Fritsch Apr 06 '13 at 00: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 06 '13 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. – starbeamrainbowlabs Apr 07 '13 at 13:48
  • To answer the last question: no. Paged media margin boxes are not yet supported in any major browsers: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29 – user2847643 Dec 06 '14 at 20:46

5 Answers5

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.

Jimbo
  • 499
  • 4
  • 5
  • That wikipedia link doesn't work. There is no article at the target url. – jake Jul 28 '23 at 16:25
  • The above article was last updated in 2017 and is now archived: https://web.archive.org/web/20220526233027/http://en.wikipedia.org/wiki/Comparison_of_browser_engines_(CSS_support) – Jimbo Aug 19 '23 at 15:33
12

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>
Oliver Kohll
  • 772
  • 2
  • 7
  • 19
  • 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 '13 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 – Oliver Kohll May 20 '13 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 '16 at 04: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 02 '16 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)? – Xan-Kun Clark-Davis Apr 19 '16 at 22:17
  • this looks nice, but does not seem to work with current chrome version. – phil294 Aug 04 '17 at 23:50
3

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);
    }
}

... in theory. In real world only PrinceXML supports this.

John Biddle
  • 2,664
  • 2
  • 15
  • 25
  • 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? – David Fritsch Apr 07 '13 at 01: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](http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/) I did get the `@page` margin to work in FF but nothing else. – John Biddle Apr 07 '13 at 18:41
  • Also, Mozilla's documentation sates that FF19.0 offers "Basic-Support" for `@page` [link](https://developer.mozilla.org/en-US/docs/CSS/@page) bottom of page which matches my inability to get any of the `@page` stuff to work except margin – John Biddle Apr 07 '13 at 18:48
  • One last reference. There's a very detailed article "Building Books with CSS3" at A List Apart [link](http://alistapart.com/article/building-books-with-css3) by Nellie McKesson, the eBook Operations Manager at O’Reilly Media, who in the comments said "AFAIK, there’s no browser support for paged media yet" though this was June 12,2012 – John Biddle Apr 07 '13 at 19:01
  • Thanks for the links John. I think that you have confirmed my findings as well. I guess it is time to get creative... – David Fritsch Apr 08 '13 at 23:57
  • @John Biddle: That's for CSS3 paged media though, not CSS2. – BoltClock May 20 '13 at 14:16
  • The "page" counter is automatically reset and incremented for you in the CSS3 page module http://www.w3.org/TR/css3-page/#page-based-counters – dsas Jul 11 '13 at 14:07
  • 1
    This is not working for me... it is compatibile with any browsers? – Elias Soares Sep 18 '14 at 21:40
  • 66
    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. – user2847643 Dec 06 '14 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 '15 at 15:25
  • does not work with Chrome Version 49.0.2614.0 canary (64-bit) & Version 47.0.2526.106 (64-bit) as of 1/6/16 – cenk Jan 06 '16 at 21:56
  • Agreed. This is theory, not a practical answer. – rainabba Feb 02 '16 at 18:57
  • A working example here https://stackoverflow.com/questions/20050939/print-page-numbers-on-pages-when-printing-html/58059786#58059786 – Kalyan Halder Sep 23 '19 at 10:00
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;
}
user6115916
  • 21
  • 1
  • 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 '16 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 '18 at 09: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
clemoun
  • 298
  • 3
  • 14