If a counter is reset or incremented within the page context, it is in scope for all page-margin boxes and obscures all counters of the same name within the document.
This sentence in the specification is unclear. What "obscures" means in this context? Does it mean that if a counter named "page" is reset or incremented within the document it has no effect on the page counter within the page context? If we extend that idea it would mean that we can have two independent counters named "page". One within the page context and one within the document?
@page section {
counter-reset: page 10; /* does not reset the page counter defined within the document */
}
.section {
counter-increment: page 1; /* does not increment the page counter defined in the page counter */
}
And since the counter defined within the page context "obscures" all counters of the same name within the document then the counter defined within the document (and by extension its value) will ignored? In other words, if I use the value of the counter named "page" it will always be the value of the counter defined within the page context.
Let’s take an example, the following will be ignored:
.chapter-5 {
counter-reset: page 5;
}
If I want to do that, I will need to declare a named page:
.chapter-five {
page: chapter-five;
}
@page chapter-five {
counter-reset: page 5;
}
A counter named page is automatically created and incremented by 1 on every page of the document, unless the counter-increment property in the page context explicitly specifies a different increment for the page counter.
It’s not explicitly defined in the specification so I guess the default value of the counter named page is 0 according to: https://www.w3.org/TR/css-lists-3/#increment-set
If there is not currently a counter of the given name on the element, the element instantiates a new counter of the given name with a starting value of 0 before setting or incrementing its value.
We can also found this rule about counter in:
If an element increments/resets a counter and also uses it (in the 'content' property of its :before or :after pseudo-element), the counter is used after being incremented/reset.
Does the above rule apply to the page context?
Meaning that if I’m using the value of the counter in the page context (or most likely in the margin box for instance @bottom-center
) then we must increment the value on the first page.
So in practice, the value on the first page will be 0 (initial value of the counter) plus 1 (auto increment 1) equals 1 right?
What about counter-reset
, what if I’m using counter-reset
with a specific value of 10 on a page named chapter-ten
.
Then the value on this page will be 10 (value of the counter reset) plus 1 (auto increment 1) equals 11?
I strongly believe that it’s counter-intuitive.
In my opinion, the counter named page should not be incremented by 1 when the counter-reset
property is present in the page context.
-A counter named page is automatically created and incremented by 1 on every page of the document, unless the counter-increment property in the page context explicitly specifies a different increment for the page counter.
+A counter named page is automatically created and incremented by 1 on every page of the document, unless the counter-increment or counter-reset property in the page context explicitly specifies a different increment or value for the page counter.
it’s so clear, I'm gonna reuse the most of it :)