[css-lists-3] Need a way to return the max value of a counter within a scope.

[TUSF]

At the moment, one can define, increment and reset a counter, and then get the current value of that counter. However, it would be extremely useful to be able to get the maximum value of a counter within a certain scope.

For example, to mark lists or figures with "Item 2 of 6", or in the case of Paged Media, having sets of pages each with different page counters (such as for front matter, or multiple "articles" within a single document).

For this, I propose adding a max-counter() function, which follows the semantics of counter(), with the function that it outputs the maximum value that a counter reaches, before a counter-reset. So for example:

h1 { counter-reset: section; }
h2 { counter-increment: section; }
h2::after { content: counter(section) " of " max-counter(section); }

<h1>Title</h1>
  <h2>Section</h2>
  <h2>Section</h2>
  <h2>Section</h2>
<h1>Title</h1>
  <h2>Section</h2>
  <h2>Section</h2>

This should output something like:

Title
Section 1 of 3
Section 2 of 3
Section 3 of 3
Title
Section 1 of 2
Section 2 of 2

In effect, when a counter increments, they should also increment the value of every max-counter() that precedes them, except for those before a counter-reset. This function should also eliminate the need for the immutable pages counter.

[jonjohnjohnson]

I think counter-length() would be a bit cleaner? At least something with counter- as the prefix.

[TUSF]

Good point. Would be more uniform with other counter-related properties and functions to have something with a counter- prefix. I'm all for counter-length() or counter-max().

[fantasai]

I'd prefer counter-max() rather than counter-length() since if we're counting by twos, or start at 5, what's the length when we get to 10? :)

[Crissov]

counter-final() may be another option, while counter-last() or last-counter() feels wrong.

Such terms immediately raise the question, of course, whether there are also valid use cases for the opposite end, but I canʼt think of any useful applications for counter-min(), counter-initial() or counter-first(). This is probably a point in favor of counter-length(), perhaps rather called counter-size() or counter-range().

CSS counters are a special beast, otherwise max(counter(foo)) would be an intuitive option.

It is worth noting that there is no way to solve this with Variables, because the value is needed before it is updated:

h1 ~ h2:last-of-type {--sections: counter(section);} 
h2::after {content: counter(section) " of " var(--sections);} 

[css-meeting-bot]

The CSS Working Group just discussed Need a way to return the max value of a counter within a scope..

The full IRC log of that discussion

<dael> Topic: Need a way to return the max value of a counter within a scope.
<dael> github: https://github.com//issues/3667
<dael> fantasai: THis was a feature request to add ability to retrieve highest value a counter picked in a document for something like numbering page 2 or 5. Functional notation like counter. Asking WG if interested now, future, or never?
<dael> [silence]
<dbaron> I don't think I'm particularly interested...
<dael> Rossen_: Not sure how to read the silence. Can we say never?
<tantek> [silence] seems like enough reason to postpone discussing, maybe til f2f?
<dael> TabAtkins: Functionality exists in paged CSS via special pages counter. Bit of a special case. Use case is clear there.
<dael> TabAtkins: Added to triage list so can get answer from engineers soon, but no answer now. Personally in favor
<dael> dauwhe: Have use cases for this in paged media. See utility for long publications
<dael> Rossen_: Hearing some favorable comments and the need for it. It's not never, but doesn't sound like we can resolve now. Let's close, move one, and revisit when have more information from impl.

[MatsPalmgren]

Note that the min/max value of a counter might be somewhere in the middle of the list. So which functions we choose to implement really depends on what the use cases are. E.g.

<ol>
  <li>
  <li value=9>
  <li style="counter-increment: list-item -1">
</ol>

Here, I would say that counter-final() / counter-last() is 8, while counter-max() is 9, and counter-length() is 3.

We also need to define what these functions should return for reversed() counters, e.g.

<ol reversed>
  <li>
  <li value=9>
  <li style="counter-increment: list-item 3">
</ol>

which results in the numbering: 10, 9, 12. Here, counter-final() is 10, counter-last() / counter-max() is 12.

I don't think I see much use for counter-max() given that it can be any item.

counter-length() seems reasonable to implement, given that there's a use case ("step 1 of 3" etc), but then the question is which elements to count. Counting every element which has a counter-set or non-zero valued counter-increment for the counter seems reasonable. So counter-length() would be 3 for my examples above.

counter-final() also seems reasonable to me, although I can't really think of a use case right now. It should be the counter value at the end for a forward counter and the counter value at the start for a reversed counter.

Perhaps we should start with counter-length() for now which has a clear use case?