Print page numbers on pages when printing html

css, html, printing-web-page

Solution

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.

Problem

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.

Original source

Related problems