CSS - How to count total number of pages?

Question

I'm trying to show the number of pages on PDF file.

So in the header I put this css:

.page-number:after { 
  counter-increment: pages; 
  content: counter(page) " of " counter(pages); 
 }

Html:

<span class="page-number">Page </span>

But it returns me Page 1 of 1 ... Page 2 of 2. The first counter works fine but the total is wrong. How can I solve that?

Ok I don't know what is my total number of pages. Could be 4, 5,6... @Pete — user3242861, Mar 16 '18 at 09:42
https://stackoverflow.com/questions/46711147/css-page-x-of-y-for-media-print: _“The obsolete method is that there used to be an automatically instantiated CSS counter named `pages`”_ .. according to this, such a `pages` counter doesn’t exist any more in current version of CSS counters. I don’t think what you want is possible using CSS alone. — CBroe, Mar 16 '18 at 09:43
I am facing this same issue and i dont think so we can get the total number of pages . i am also getting 1 of 1 and 2 of 2 — Bhupinder kumar, Jun 22 '18 at 09:42

score 10 · Answer 1 · answered Mar 16 '18 at 09:57

There is no way to get a counter total with CSS counters so the only way I can think of getting the output you require is to duplicate the HTML (which may not be a big problem if the content is dynamically generated). Output the HTML once to get the total number of pages then again to get the current page.

#pageCounter {
  counter-reset: pageTotal;
}
#pageCounter span {
  counter-increment: pageTotal; 
}
#pageNumbers {
  counter-reset: currentPage;
}
#pageNumbers div:before { 
  counter-increment: currentPage; 
  content: "Page " counter(currentPage) " of "; 
}
#pageNumbers div:after { 
  content: counter(pageTotal); 
}

<div id="pageCounter">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
<div id="pageNumbers">
  <div class="page-number"></div>
  <div class="page-number"></div>
  <div class="page-number"></div>
  <div class="page-number"></div>
</div>

Its good solution but if you will page the pageNumber above the pageCounter it will not work — Bhupinder kumar, Jun 22 '18 at 09:53
@Bhupinderkumar Yes, for this to work it is integral that `#pageCounter` is before `#pageNumbers`. If it is after the `pageTotal` counter will not have been incremented by the time it is displayed on the screen. — Hidden Hobbes, Jun 22 '18 at 10:05

score 0 · Answer 2 · 2023-08-07T10:50:05.167

It is possible for EdgeChromium browser. I am using ul and li only for this.

I have done:

<ul>

<div class="footer_wrapper page_001">
    <footer><li class="page"></li></foooter>
</div>

<div class="footer_wrapper page_002">
    <footer><li class="page"></li></foooter>
</div>

<div class="footer_wrapper page_003">
    <footer><li class="page"></li></foooter>
</div>

<footerfix>
    <la class="page"></la>
<footerfix>

</ul>

with css

@page {
size: A4;
margin: 0;
padding: 0;
}

footerfix 
{
    width: 210mm;
    height: 40mm;
    bottom: 0;
    z-index: 100;
}

html, body {
    width: 210mm;
    height: 297mm;
    margin: 0;
    padding: 0;
}

.footer_wrapper {
    position: fixed;
    width: 210mm;
    height: 297mm;
    margin: 0;
    padding: 0;
    left: 0mm;
    background-color: transparent;
}

footer {
    width: 210mm;
    height: 297mm;
    margin: 0;
    padding: 0;
    position: relative;
    white-space: nowrap;
    text-align: center;
    z-index: 3000;
    page-break-after: always;
    background-color: transparent;

.page_001 {
    top: 0mm;
    z-index: 3001;
}

.page_002 {
    top: 297mm;
    z-index: 3002;
}

.page_003 {
    top: calc(2*297mm);
    z-index: 3003;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    counter-reset: seite seiten;
}

li::before {
    counter-increment: seite seiten;
    content: "page "counter(seite) " / ";
}

la::after {
    content: counter(seiten);
}

.page {
    background-color: white; /*otherwise page numbers on top of each other*/
}

score -2 · Answer 3 · answered Mar 16 '18 at 09:50

-2

.page{
counter-reset: page;
}
.page .page-number{
  display:block;
  }
.page .page-number:after{
counter-increment: page;
content:counter(page);
}
.page:after{
    display: block;
    content: "Number of pages: " counter(page);
}

<div class="page">
<span class="page-number">Page </span>
<span class="page-number">Page </span>
<span class="page-number">Page </span>
<span class="page-number">Page </span>
</div>

answered Mar 16 '18 at 09:50

Pushparaj

1,072
8
29

1

It's not possible to do Page 1 of 4 ? @Raj – user3242861 Mar 16 '18 at 09:54
can we do something like this 1/4 and 2/4 ? – Bhupinder kumar Jun 22 '18 at 09:55
6

This does not address the question – heyallan Dec 28 '18 at 17:36

CSS - How to count total number of pages?

3 Answers3

Linked