Skip to content

When defining own counters, counter(pages) does not work anymore

Use following html:

<html>

<head>
    <style>
        @page {
            size: A4;

            @top-center {
                content: counter(page) "/" counter(pages);
            }
        }

        p {
            counter-increment: foo;
        }

        p::before {
            content: counter(foo)
        }
    </style>
    <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
</head>

<body>
    <p>a</p>
    <p>b</p>
</body>

</html>

observed: text in top center block is 1/0

expected: text in top center block is 1/1

Suggested fix: in class Counters, method scopeCounters(counters) when inserting the rule for counter-reset, insert the rule:

.pagedjs_pages { counter-reset: ${countersArray.join(" ")} pages var(--pagedjs-page-count)}

instead of rule

.pagedjs_pages { counter-reset: ${countersArray.join(" ")}}

so that the previously defined rule counter-reset: pages var(--pagedjs-page-count)is extended instead of overwritten