Print page numbers on pages when printing html

Html Problem Overview

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.

Html Solutions

Solution 1 - Html

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.

Solution 2 - Html

Try 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!

Solution 3 - Html

This 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>

Solution 4 - Html

Can 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/

Solution 5 - 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.

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 :

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

Solution 6 - Html

I 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

Solution 7 - Html

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

Solution 8 - Html

This is what you want:

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

Solution 9 - Html

   **@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 >**

Content Type	Original Author	Original Content on Stackoverflow
Question	Donvino	View Question on Stackoverflow
Solution 1 - Html	Donvino	View Answer on Stackoverflow
Solution 2 - Html	ˈvɔlə	View Answer on Stackoverflow
Solution 3 - Html	littlejoe	View Answer on Stackoverflow
Solution 4 - Html	Krish R	View Answer on Stackoverflow
Solution 5 - Html	clemoun	View Answer on Stackoverflow
Solution 6 - Html	Tongi	View Answer on Stackoverflow
Solution 7 - Html	Doodled	View Answer on Stackoverflow
Solution 8 - Html	SaturnsEye	View Answer on Stackoverflow
Solution 9 - Html	user9663245	View Answer on Stackoverflow