CSS counter for total pages? #1636

jerrebm · 2018-01-15T16:25:06Z

Hey,

Read some suggestions on using:

<footer><div class="pagenum-container">Page <span class="pagenum"></span></div></footer>

footer .pagenum:before {
        content: counter(page);
}

To get the current page number. Is it possible to get the total number of pages through css as well, to show something like Page 4 of 5?

The text was updated successfully, but these errors were encountered:

bhupinderkumarbl · 2018-06-22T09:31:25Z

You can try this

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

#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); 
}

bhupinderkumarbl · 2018-06-22T09:37:20Z

https://codepen.io/Bhupinderkumar/pen/gKzKGw here is pen you can see the total page number at the bottom of the page

PowerKiKi · 2019-05-08T06:59:36Z

Here is way to do it, while still being able to use CSS on the paging information.

The current page number can be generated via CSS features, as documented in samples, but the total page count must be injected after the rendering happened. To do that we use an arbitrary placeholder, DOMPDF_PAGE_COUNT_PLACEHOLDER, in our HTML template and replace that string in the entire rendered PDF, juste before it get outputted.

The HTML would be:

<!doctype html>
<html>
    <head>
        <title>foo</title>
        <style>

            footer {
                /* Place the footer at the bottom of each page */
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;

                /* Any other appropriate styling */
                color: #4f82d6;
                font-weight: bold;
            }

            /* Show current page number via CSS counter feature */
            .page-number:before {
                content: counter(page);
            }
        </style>
    </head>
    <body>
        <footer>
            Page <span class="page-number"></span> of DOMPDF_PAGE_COUNT_PLACEHOLDER
        </footer>

        Very long content spanning multiple pages here ...

    </body>
</html>

And PHP would be:

function htmlToPdf(string $html): string
{
    $dompdf = new Dompdf();
    $dompdf->loadHtml($html);
    $dompdf->setPaper('A4');
    $dompdf->render();

    injectPageCount($dompdf);

    return $dompdf->output();
}

/**
 * Replace a predefined placeholder with the total page count in the whole PDF document
 *
 * @param Dompdf $dompdf
 */
function injectPageCount(Dompdf $dompdf): void
{
    /** @var CPDF $canvas */
    $canvas = $dompdf->getCanvas();
    $pdf = $canvas->get_cpdf();

    foreach ($pdf->objects as &$o) {
        if ($o['t'] === 'contents') {
            $o['c'] = str_replace('DOMPDF_PAGE_COUNT_PLACEHOLDER', $canvas->get_page_count(), $o['c']);
        }
    }
}

enumag · 2019-08-27T07:35:47Z

@PowerKiKi It doesn't work for me... when I checked it seems the placeholder string didn't make it to the $o['c'] variable without modifications. It is sort of there but there is something added before every letter:

Did anyone else encounter this issue?

EDIT: I managed to make it work. Here is my implementation: https://gist.github.com/enumag/f670865b70d11e0b8156b1e92acc3c92

@bsweeney I tried using just CSS with content: "Page " counter(page) " of " counter(pages); but even though counter(page) works fine counter(pages) always returns 0. Any idea why? Can that be fixed? It would be much cleaner solution.

PowerKiKi · 2019-08-27T15:05:39Z

@enumag I ended up with a shorter placeholder '^^' because a long string would reserve space around it when the layout happen. That would force whitespaces around the final total page number. Maybe something shorter too ? do you have any special settings, such as encoding or something ?

enumag · 2019-08-27T15:26:43Z

@PowerKiKi Nope my settings are very basic. I'm not even using the Options class yet, everything is default.

bsweeney · 2019-09-10T01:06:55Z

We're not currently tracking total number of pages via CSS counters because of the way that Dompdf renders the document. Currently Dompdf renders as it parses the document. That means the PDF is already being generated before we know how many pages there will be. To support capturing the page count we would need to alter the rendering process to break the rendering step into two, pagination followed by render. Not impossible, but a fairly significant change to how Dompdf works.

The best we can do otherwise would be to use a placeholder, pretty much like what's been suggested here.

marcbln · 2020-12-07T16:10:02Z

I ended up with a workaround rendering the pdf twice .. first time to get total page count, 2nd time to render with the correct total page count set.. something like:

        // ...

        $viewVars = [
            'invoice' => $invoice,
            'numPagesTotal' => 999
        ];

        // ...

        // ---- 1st render to get page count
        $domPdf = new Dompdf($pdfOptions);
        $domPdf->loadHtml($this->_renderTwig('InvoicePdf/invoiceBody.html.twig', $viewVars));
        $domPdf->render();
        $viewVars['numPagesTotal'] = $domPdf->getCanvas()->get_page_count();

        // ---- 2nd (final) render with known page count
        $domPdf = new Dompdf($pdfOptions);
        $domPdf->loadHtml($this->_renderTwig('InvoicePdf/invoiceBody.html.twig', $viewVars));
        $domPdf->render();

        // ...

PowerKiKi · 2020-12-08T03:05:58Z

@marcbln good idea ! much more robust than my workaround, and simple to understand. Though it might be a performance hit that might not be acceptable for all projects I guess.

But I would still recommend your workaround over mine, thank you for sharing !

…pdf#1636 Signed-off-by: Christoph Massmann <[email protected]>

steffenweber · 2024-01-15T16:19:07Z

@marcbln Good idea! It can be optimized a little if you usually generate single-page PDFs (i.e. multi-page PDFs are the exception) by speculatively setting the page number to 1 on first render and only rendering again if it turns out that the PDF actually has multiple pages.

PowerKiKi mentioned this issue May 8, 2019

page total #1595

Closed

bsweeney added enhancement css On Deck labels May 29, 2019

bsweeney mentioned this issue Jun 22, 2019

Font Metrics calculates wrong width when using placeholders #1224

Closed

bsweeney mentioned this issue Aug 20, 2020

Header and Footer on every page #1190

Closed

ma4nn added a commit to vianetz/pdf-generator that referenced this issue Dec 19, 2020

page count is now injected via placeholder as described in dompdf/dom…

26cce38

…pdf#1636 Signed-off-by: Christoph Massmann <[email protected]>

pounard mentioned this issue Dec 2, 2021

In src/Renderer/Text.php there is variable replacement code commented, why ? #2669

Closed

agenthero mentioned this issue Aug 2, 2022

get_page_count() , {PAGE_NUM} / {PAGE_COUNT} last working in version 1.2.2 #2971

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CSS counter for total pages? #1636

CSS counter for total pages? #1636

jerrebm commented Jan 15, 2018

bhupinderkumarbl commented Jun 22, 2018 •

edited by bsweeney

Loading

bhupinderkumarbl commented Jun 22, 2018

PowerKiKi commented May 8, 2019

enumag commented Aug 27, 2019 •

edited

Loading

PowerKiKi commented Aug 27, 2019

enumag commented Aug 27, 2019

bsweeney commented Sep 10, 2019

marcbln commented Dec 7, 2020 •

edited

Loading

PowerKiKi commented Dec 8, 2020

steffenweber commented Jan 15, 2024 •

edited

Loading

CSS counter for total pages? #1636

CSS counter for total pages? #1636

Comments

jerrebm commented Jan 15, 2018

bhupinderkumarbl commented Jun 22, 2018 • edited by bsweeney Loading

bhupinderkumarbl commented Jun 22, 2018

PowerKiKi commented May 8, 2019

enumag commented Aug 27, 2019 • edited Loading

PowerKiKi commented Aug 27, 2019

enumag commented Aug 27, 2019

bsweeney commented Sep 10, 2019

marcbln commented Dec 7, 2020 • edited Loading

PowerKiKi commented Dec 8, 2020

steffenweber commented Jan 15, 2024 • edited Loading

bhupinderkumarbl commented Jun 22, 2018 •

edited by bsweeney

Loading

enumag commented Aug 27, 2019 •

edited

Loading

marcbln commented Dec 7, 2020 •

edited

Loading

steffenweber commented Jan 15, 2024 •

edited

Loading