Menu
I believe I tested all the solutions available on StackOverflow but none of them is working in the Chrome (72). I followed specification on W3C but everything seems to work only in a FireFox.
I just want a simple thing - add the page number using counter-increment into the printed document. I tried HTML4 and HTML5 without any results.
Is there ANY solution?
Chrome version: 72.0.3626.81 (Official Build) (64-bit)
Solution working fine in FireFox:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
#content {
display: table;
}
#pageFooter {
display: table-footer-group;
}
#pageFooter:after {
counter-increment: page;
content: counter(page);
}
</style>
<body>
<div id="content">
<div id="pageFooter">Page </div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing..A LOT MORE STUFF TO FILL THE PAGES </p>
</div>
</body>
</html>
Another solution (@page is not supported in HTML5):
@page {
@bottom-right {
content: counter(page) " of " counter(pages);
}
}
As of 12/3/2015, the margin boxes like @bottom-center don't appear to be supported by the major browsers, as shown here. If you search for "@bottom-center" you'll see a whole lot of red "not supported" boxes. When you search the web it sounds like they should work but in reality they're not supported yet. Some elements of paged media work great, like page-break-after, but not the margin boxes. – James Toomey Dec 3 '15 at 20:40
Similar threads (old, no resolution for Chrome):
The issue with Chromium (counter not incremented on every page): https://bugs.chromium.org/p/chromium/issues/detail?id=774830
Some of the browsers are behaving the same:
Chrome, Edge: Page: 1 Page: 1
Firefox: Page: 1 Page: 2
Safari: Page: 1 (once, near the top of the second page)
910
The DevTools ( F12 or Cmd/Ctrl + Shift + I ) can emulate print styles, although page breaks won't be shown. In Chrome, open the Developer Tools and select More Tools, then Rendering from the three-dot icon menu at the top right. Change the Emulate CSS Media to print at the bottom of that panel.
This is done by using the page counter in CSS, a pre-defined counter which represents the current page number. The page counter starts at 1 and increments automatically at each new page.
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.
Refer to Adding Content to a Header or Footer for an example of how to create content for a header or footer. 2. Highlight numbered-header then the Edit button to open the Generated Text Editor. Place your cursor in the right hand cell of the header table, then choose Insert > Page Number.
i searched many days the whole internet for a solution, but i could not find one. One night, an idea passed my brain and these is the result (ugly, hacky, still much more to improve, but very easy and working): :-)
<html>
<head>
<style>
@page {margin: 0; size: A4}
footer {
position: absolute;
margin-left: 190mm;
}
</style>
</head>
<body>
<script>
for (var i = 1; i <= 3; ++i) {
document.body.innerHTML+= '<footer style="margin-top: ' + (297*i -10) + 'mm">' + i + '</footer>';
}
</script>
Content
</body>
</html>
Next Todo for a good solution:
My ideas (but i am not getting it working):
1) Get computed height of all pages > change for-loop to while-loop > while actual footer margin-top <= computed height
but i am not able to get the real height, here are my examples:
<script>
alert(window.getComputedStyle(document.body, null).getPropertyValue("height"));
</script>
source Chrome getComputedStyle without solution
2) Create 999 page-numbers and kill overflow after body-end. But i didn't found a solution to kill absolut elements after relative elements.
So lets solve that task together and we have a final solution.
PS: At the moment, i don't have enough points to comment. So i cannot discuss, but i will update my answer, if there are new solutions.
108
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
