Skip to content

Instantly share code, notes, and snippets.

@ggrossetie
Last active June 20, 2020 20:16
Show Gist options
  • Save ggrossetie/af2fef406458745aa79e3394fd15b2c8 to your computer and use it in GitHub Desktop.
Save ggrossetie/af2fef406458745aa79e3394fd15b2c8 to your computer and use it in GitHub Desktop.

Page-based counters

Page counter instances

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

counter-reset and auto increment

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.
@julientaq
Copy link

julientaq commented Jun 20, 2020

it’s so clear, I'm gonna reuse the most of it :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment