
I've read a lot of web-sites about printing page numbers, but still I couldn't make it display for my html page when I try to print it.
So the CSS code is next:
@page { margin: 10%; @top-center { font-family: sans-serif; font-weight: bold; font-size: 2em; content: counter(page); } }
I've tried to put this page rule inside
@media all { *CSS code* }
And outside of it, tried to put it in @media print
, but nothing helped me to display the page numbers on my page. I've tried to use FireFox and Chrome(based on WebKit as you know). I think the problem is in my html or css code.
Could somebody show me an example of implementing this @page
rule in the big html page with several pages? I just need the code of html page and the code of css file, that works.
P.S. I have the latest supported versions of browsers.
10 Answers
As @page with pagenumbers don't work in browsers for now I was looking for alternatives.
I've found an answer posted by Oliver Kohll.
I'll repost it here so everyone could find it more easily:
For this answer we are not using @page, which is a pure CSS answer, but work in FireFox 20+ versions. Here is the link of an example.
The CSS is:
#content { display: table; } #pageFooter { display: table-footer-group; } #pageFooter:after { counter-increment: page; content: counter(page); }
And the HTML code is:
<div id="content"> <div id="pageFooter">Page </div> multi-page content here... </div>
This way you can customize your page number by editing parametrs to #pageFooter. My example:
#pageFooter:after { counter-increment: page; content:"Page " counter(page); left: 0; top: 100%; white-space: nowrap; z-index: 20; -moz-border-radius: 5px; -moz-box-shadow: 0px 0px 4px #222; background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); }
This trick worked for me fine. Hope it will help you.
12Try to use https://www.pagedjs.org/. It polyfills page counter, header-/footer-functionality for all major browsers.
@page { @bottom-left { content: counter(page) ' of ' counter(pages); } }
It's so much more comfortable compared to alternatives like PrinceXML, Antennahouse, WeasyPrince, PDFReactor, etc ...
And it is totally free! No pricing or whatever. It really saved my life!
5This javascript will add absolute positioned div's with pagenumbers on the right bottom corner and works in all browsers.
A4 height = 297mm = 1123px(96dpi)
<html> <head> <style type="text/css"> @page { size: A4; margin: 0; } body { margin: 0; } </style> </head> <body> <script type="text/javascript"> window.onload = addPageNumbers; function addPageNumbers() { var totalPages = Math.ceil(document.body.scrollHeight / 1123); //842px A4 pageheight for 72dpi, 1123px A4 pageheight for 96dpi, for (var i = 1; i <= totalPages; i++) { var pageNumberDiv = document.createElement("div"); var pageNumber = document.createTextNode("Page " + i + " of " + totalPages); pageNumberDiv.style.position = "absolute"; pageNumberDiv.style.top = "calc((" + i + " * (297mm - 0.5px)) - 40px)"; //297mm A4 pageheight; 0,5px unknown needed necessary correction value; additional wanted 40px margin from bottom(own element height included) pageNumberDiv.style.height = "16px"; pageNumberDiv.appendChild(pageNumber); document.body.insertBefore(pageNumberDiv, document.getElementById("content")); pageNumberDiv.style.left = "calc(100% - (" + pageNumberDiv.offsetWidth + "px + 20px))"; } } </script> <div id="content"> Lorem ipsum.... </div> </body> </html>
9Can you try this, you can use content: counter(page);
@page { @bottom-left { content: counter(page) "/" counter(pages); } }
Ref: http://www.w3.org/TR/CSS21/generate.html#counters
http://www.princexml.com/doc/9.0/page-numbers/
5I don't know if someone still out there needs the answer, try this, it might work for you in your html file put a div element your html like this
<div class="page-number"></div>
and do your css like this
.page-number:before { content: "Page: " counter(page);}
hope it works for you
2I know this is not a coding answer but it is what the OP wanted and what I have spent half the day trying to achieve - print from a web page with page numbers.
- Print to pdf without the numbers
- Run it through ilovepdf here https://www.ilovepdf.com/add_pdf_page_number which adds the page numbers
Yes, it is two steps instead of one but I haven't been able to find any CSS option despite several hours of searching. Real shame all the browsers removed the functionality that used to allow it.
0If 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 :
window.print();
to launch the printing prompt of the navigatorI use page numbers styled in CSS to generated PDF documents, and it works:
@page { size: A4 portrait; margin-top: 1.2cm; margin-bottom: 1.2cm; margin-left: 1.2cm; margin-right: 1.2cm; background-image: url('../../images/logo_small.png'); background-repeat: no-repeat; background-position: 40px 10px; @bottom-center { content: counter(page); } }
This is what you want:
@page { @bottom-right { content: counter(page) " of " counter(pages); } }
3 **@page { margin-top:21% !important; @top-left{ content: element(header); } @bottom-left { content: element(footer } div.header { position: running(header); } div.footer { position: running(footer); border-bottom: 2px solid black; } .pagenumber:before { content: counter(page); } .pagecount:before { content: counter(pages); } <div class="footer" style="font-size:12pt; font-family: Arial; font-family: Arial;"> <span>Page <span class="pagenumber"/> of <span class="pagecount"/></span> </div >**
2ncG1vNJzZmirpJawrLvVnqmfpJ%2Bse6S7zGiorp2jqbawutJoaWloZWWGdIWOqamipqRivaKzxGalrqWSmr%2B0ec6nZKmZl5rAbsPHnqVmqKKeu7W1zaBkoaydoQ%3D%3D