Footnote counters not properly incremented

[zopyx]

See

https://www.print-css.rocks/lesson-footnotes.html

The footnote counter stays the same. All other converters work as expected.

[kwkbtr]

This seems to be a bug. We will investigate it.

[sergiofm]

I'm having the same issue. They only are incremented if they're inside the same element. I can send my code if you want.

[kwkbtr]

Sorry for not looking into this for long.

Short answer

You can workaround the problem by resetting the counter on the root element:

:root {
    counter-reset: footnote 0;
}

instead of doing it inside an @page rule.

Long answer

In the original sample the footnote counter is reset inside an @page rule:

@page {
    counter-reset: footnote 0;
}

and the same counter is incremented on elements in the document:

span.footnote {
    counter-increment: footnote;
}

With these settings, print formatters other than Vivliostyle seem to generate a scope for the counter outside the entire document and the counter is incremented within that scope.

On the other hand, Vivliostyle does a different thing: it generates two independent scopes for the counter, one is for a page-based counter (defined in the @page rule) and another is for a usual counter on elements (defined on span.footnote). Therefore, the counter-increment on span.footnote generates a new scope for each span.footnote element, resulting the counter value to be always 1. This can be avoided by generating a single scope at the document root, specifically resetting the counter on the root element.

It would certainly be useful if a page-based counter and a usual counter on elements with the same name can share one scope, since you can then reset the counter in the document on page breaks. However, since the document and pages are not related as simple parent and children, it is not trivial how nesting of these two kinds of scopes should interact. In fact, the current CSS draft says nothing about what should happen when a usual counter defined on elements is manipulated (i.e. reset or incremented) inside @page rules. Details on how these scopes should interact need to be studied and proposed for the CSS spec in the future.

[MurakamiShinyu]

This issue was moved to vivliostyle/vivliostyle.js#421