Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Print page numbers on pages when printing html

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.

like image 880
Donvino Avatar asked Nov 18 '13 15:11

Donvino


People also ask

How do I print page numbers in HTML?

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.

How do I add page numbers to a PDF in HTML?

You can use the setFooterHtml() API function to insert a page number into a PDF footer. A php example: $client->setFooterHtml("Page %p of %n"); The %p variable expands to the current page number and %n expands to the total number of pages.

Does HTML have page numbers?

You can add in header and footer any PDF element that you can add in a PDF page : HTML, text, image. Even more you can add page numbering in HTML elements from header and footer. The Full Description and a Code Sample can be accessed from the top tabs.


1 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.

like image 186
Donvino Avatar answered Sep 20 '22 22:09

Donvino