How to print page number while printing html in new Chrome? - html

Question

I need print page number when printing html in Chrome Version 52.0.2743.116 m (64-bit). However I haven't found the answer yet.
I have already tried this:
#page {
#bottom-right {
content: counter(page) " of " counter(pages);
}
}
This didn't work at all.
Then I have found this Q&A:
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>
Unfortunately, this works only in FireFox 20+ versions and Chrome Version 35.0.1916.153
Downgrade isn't an answer.
Can you help me, please?

Answer 1

This set up works for me, you just need an element at the end of each page to append a page counter onto.
Code:
HTML:
body {
counter-reset: section;
}
#media print {
.page {
page-break-after: always;
}
.page .pageEnd::after {
counter-increment: section;
/* Increment the section counter*/
content: "Page " counter(section) " ";
/* Display the counter */
}
}
<div class="page">
<h2>Here is page 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p>
<div class="pageEnd"></div>
</div>
<div class="page">
<h2>Here is page 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p>
<div class="pageEnd"></div>
</div>
<div class="page">
<h2>Here is page 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p>
<div class="pageEnd"></div>
</div>
<div class="page">
<h2>Here is page 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p>
<div class="pageEnd"></div>
</div>
<div class="page">
<h2>Here is page 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p>
<div class="pageEnd"></div>
</div>
<div class="page">
<h2>Here is page 6</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p>
<div class="pageEnd"></div>
</div>
<div class="page">
<h2>Here is page 7</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p>
<div class="pageEnd"></div>
</div>