creating page counter for dynamic html pdf

K is Coding 0
Viewed 36

I'm trying to create a page counter for a dynamic HTML pdf and my code is

.page-number:before {
    counter-increment: pages;
    content: " ";
}

.page-number:after {
    counter-increment: page;
}

.page-number:after {
    content: "Page " counter(page) " of " counter(pages);
}
<div>//some content</div>
<div class="page-number"></div>

but it will always print as "Page 1 of 1" for every page. Can someone point out the correct way of doing this?

react-native javascript html
1 Answers

CSS Counter is not meant to get a total of elements.

You can still get it if you duplicate the HTML, like so :

/** use this div as a total counter **/
#pageCounter {
  counter-reset: pageTotal;
}
#pageCounter span {
  counter-increment: pageTotal; 
}


/** and this one for the current page **/
#pageNumbers {
  counter-reset: pageCurrent;
}
#pageNumbers div:before { 
  counter-increment: pageCurrent; 
  content: "Page " counter(pageCurrent) " 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>

I'd recommend not to, and use javascript to count and display.

Reynadan0
Related