CSS - Как посчитать общее количество страниц?

Question

Я пытаюсь показать количество страниц в файле PDF.

Поэтому в шапке я поставил этот CSS:

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

Html:

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

Но это возвращает меня Page 1 of 1... Page 2 of 2, Первый счетчик работает нормально, но итог неверен. Как я могу решить это?

Answer 1

Нет никакого способа получить итоговую сумму с помощью счетчиков CSS, поэтому я могу думать только о том, как получить требуемый результат, - это дублировать HTML (что может быть не большой проблемой, если контент генерируется динамически). Выведите HTML один раз, чтобы получить общее количество страниц, затем снова, чтобы получить текущую страницу.

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

Answer 2

Это возможно для браузера EdgeChromium. Я использую ul и li только для этого.

Я сделал:

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

с 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*/
}

Answer 3

Мне удалось сделать это с помощью JavaScript

      <script type="text/javascript">
    window.addEventListener('load', function()
    {
        let
            doc = document,
            total = doc.querySelectorAll('.YOURPAGESELECTOR').length,
            style = doc.createElement('STYLE');

        style.innerText = `.YOURPAGESELECTOR::after {content: counter(page) "/${total}";}`;

        doc.body.appendChild(style);
    });
</script>

Answer 4

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