[css-lists-3] list-item counter nesting is confusing

[fantasai]

See @ZoeBijl’s thread at https://w3c.social/@moiety@front-end.social/110729923581670564

The testcase uses the following code:

<ol>
    <li>Some</li>
    <li>List</li>
    <li>Items
        <ol>
        <li>Nested</li>
        </ol>
    </li>
</ol>

<section>
    <ol>
        <li>Some</li>
        <li>List</li>
        <li>Items
            <ol>
                <li>Nested</li>
            </ol>
        </li>
    </ol>
</section>

<ol>
    <li>Some</li>
    <li>List
        <ol>
            <li>Nested</li>
        </ol>
    </li>
    <li>Items
    </li>
</ol>

which, if rendered with counters(list-item, "."), results in what looks like nonsense:

1. Some
2. List
3. Items
    3.1. Nested

3.1 Some
3.2 List
3.3 Items
    3.3.1. Nested

1. Some
2. List
    2.1. Nested
3. Items

This is apparently per spec. I'm not sure how to fix it, but we should probably fix it... it might require some new feature that adjusts counter scoping.

[dbaron]

Maybe we should introduce the concept of "narrow" versus "wide" scope to counters, where narrow means element + descendants, and wide means element + later siblings + descendants of all. Counters currently use wide scope, but lists would be better served by narrow scope. (This concept is explicit in the CSS Toggles proposal and probably in other things.)

Counters were designed to try to handle both lists and headers (h1...h6)... and the original spec had some errors. When I initially implemented in in Gecko, I proposed fixes for the errors in a way that would make the key use cases work, but in hindsight it would have been better to propose bigger structural changes rather than the minimal thing to turn the then-current spec draft into something that actually rendered its examples as promised.

[Loirooriol]

I think narrow scoped counters would also allow fixing #5477 in a proper way, and I support that.

[Loirooriol]

Just want to note that there are old sites relying on the "nonsense" (expecting that counter-reset will propagate to following siblings). That's because we didn't have counter-set in the past, so people made do with counter-reset. So changing the current behavior doesn't seem possible due to compat, would need to be something new like counter-reset: scoped(counter-name) 5

[tabatkins]

Yeah this is definitely not changeable by default, counters must have wide scope. But making it narrow scope optionally is a good idea!

[mirisuzanne]

Might it be possible to change the default only for the special list-item counter, which is a much more recent addition? I don't believe this is how list item counters have worked historically.

[tabatkins]

I think historically it wasn't possible to tell what the behavior was, since you couldn't refer to the list-item counter for counters(). (The behavior is unobservable if you're just looking at the value of the innermost counter for a given name.)

But yeah it is likely possible to change the HTML default.

[Loirooriol]

Yeah, the UA stylesheet has something like ol, ul { counter-reset: list-item }. It's hopefully fine to upgrade this to ol, ul { counter-reset: sane-scope(list-item) }, what can't change is the behavior of counter-reset: list-item.

[Loirooriol]

Just noting that this isn't only for counters(), basic HTML lists also have oddities as currently defined (since #5477 was not a comprehensive solution):

<ol>
    <li>Some</li>
    <li>List</li>
    <li>Items
        <ol>
            <li>Nested</li>
        </ol>
    </li>
</ol>
<section style="list-style-type: decimal">
    <li>Some</li>
    <li>List</li>
    <li>Items
        <ol>
            <li>Nested</li>
        </ol>
    </li>
</section>
<ol>
    <li>Some</li>
    <li>List
        <ol>
            <li>Nested</li>
        </ol>
    </li>
    <li>Items</li>
</ol>

Blink and WebKit don't use actual counters, so they show the more reasonable

1. Some
2. List
3. Items
    1. Nested

1 Some
2 List
3 Items
    1. Nested

1. Some
2. List
    1. Nested
3. Items

But in Firefox, or when manually switching to an actual counter,

1. Some
2. List
3. Items
    1. Nested

4 Some
5 List
6 Items
    1. Nested

1. Some
2. List
    1. Nested
3. Items

[Loirooriol]

I guess we will need 2 variants of narrow-scoped counters: normal and reversed. scoped() and scoped-reversed()?

[tabatkins]

Something like that, yes.

[Loirooriol]

I guess the basic idea would be that counters would have a bool to track if they are narrow-scoped. Then, counter inheritance would skip counters from the preceding sibling which are narrow-scoped and whose creator is the preceding sibling.

What I'm less sure about is whether we want to preserve this behavior of HTML ordinals in Blink:

<div style="list-style: decimal; padding-left: 40px">
  <li></li>
  <li></li>
  <ol>
    <li></li>
    <li></li>
    <li></li>
  </ol>
  <li></li>
  <li></li>
</div>

1.
2.
    1.
    2.
    3.
3.
4.

If so, when skipping a counter as described above, would need to iterate the previous siblings until finding one which either doesn't have a counter with that name, or doesn't have the narrow-scoped flag, or the creator is an ancestor.

But it may be fine to produce

1.
2.
    1.
    2.
    3.
1.
2.

and just require instantiating the counter on the parent for the earlier behavior (like using <ol> instead of <div>).

[astearns]

See discussion in #5477 (comment)