[css-lists-3] Setting the start value of a reversed list

[fantasai]

Note: We currently have #4181 open on reversing the increment in reversed lists.

Currently, the suggestion for mapping HTML reversed list starts to CSS is that HTML injects a counter-reset declaration on the OL element as part of the attribute-to-CSS mapping of the HTML presentational hint cascade level. There is, however, some amount of magic: the UA has to calculate the start number and pass it to CSS as an <integer>, e.g. counter-reset: list-item 4 for a 3-item reversed list.

Doing some calculations to figure out the value to pass to CSS isn't particularly unusual: for example, HTML does some special parsing of colors before passing to color and background-color, and it does some bidi calculations before passing to direction.

What is super magical is that these calculations are currently defined to be dependent on CSS styles, not just on the contents of the markup. See HTML spec. In particular, this case is very strange, as not only is the display: none element skipped, the descendant SPAN is counted (which I personally find very surprising):

<ol reversed>
  <li>one
  <li style="display: none">none
  <li>two <span style="display: list-item">three</span>
  <li>four
</ol>

Some options going forward include:

• A) We define the preshint mapping as counter-reset: list-item calc(N+1) where N is magically calculated as defined currently⁠—counting all display: list-item descendants, but skipping the contents of any ol/ul/dir/menu elements.
• B) We define the preshint mapping as counter-reset: list-item calc(N+1) with some reduced amount of HTML+CSS co-dependence for the counting (assuming there's a definition of that that makes sense and is Web-compatible)?
• C) We define a reverse-counting counter feature, which HTML uses.
• D) We define CSS syntax to enable magic counting of display: list-item descendants while skipping the contents of any ol/ul/dir/menu elements. HTML maps to that syntax.
• E) We define CSS syntax to enable counting, but use a simplified definition of what's counted (Option B). HTML maps to that syntax.
• F) Something else?

[fantasai]

Some archaeology on this topic:

• HTML spec commit that introduced counting based on display: list-item.
• HTML spec issues that were fixed by that commit: Two issues with the steps determine "starting value" of <ol reversed> whatwg/html#1911 + <li> ordinal value definition is wrong when not directly inside an <ol> whatwg/html#1617
• Pull request / discussion on the above commit

[MatsPalmgren]

@fantasai Is there a reason you used counter-increment rather than counter-reset: list-item calc(N+1) in A and B?

I don't really see a use case for having this magic N value other than for the start value of a reversed list, so I'm reluctant to generalize it beyond that use case. I still think the best solution is to resolve this issue together with issue #4181 as a preshint mapping to counter-reset: reversed(list-item) or some such. That declaration would have two effects: 1) the default start value is resolved in layout (to N+1 per above), and 2) the default list-item counter-increment for list items is -1 rather than 1. I think this makes it possible to support reversed content-based lists also for author-defined counters for free (if we want to allow that), by allowing the author to specify counter-reset: reversed(foo) with counter-increment: foo -1 on the items.

[fantasai]

@MatsPalmgren I think that was a typo. :) It would either have to be counter-reset: list-item calc(N+1) as you say. I'll edit the comment to reduce confusion...

[zcorpan]

I came here because I tried to work on whatwg/html#4816 but figured it'd be ideal if CSS could be used for reverse lists as well, which means this issue and #4181 need to be fixed.

@MatsPalmgren

I still think the best solution is to resolve this issue together with issue #4181 as a preshint mapping to counter-reset: reversed(list-item) or some such. That declaration would have two effects: 1) the default start value is resolved in layout (to N+1 per above), and 2) the default list-item counter-increment for list items is -1 rather than 1. I think this makes it possible to support reversed content-based lists also for author-defined counters for free (if we want to allow that), by allowing the author to specify counter-reset: reversed(foo) with counter-increment: foo -1 on the items.

I like this suggestion the most, I think. It adds a useful capability to CSS and makes it possible for HTML to use only preshints to CSS properties for rendering list items.

cc @chrishtr @vmpstr @emilio - thoughts?

[chrishtr]

cc @chrishtr @vmpstr @emilio - thoughts?

Sounds reasonable to me.

[emilio]

@zcorpan to be clear this preshint would be on the <ol> right?

[zcorpan]

Yes.

[zcorpan]

FYI, I've updated whatwg/html#4816 to so that:

• <ol reversed> maps to a preshint of counter-reset: reversed(list-item)
• <ol start=5 reversed> maps to a preshint of counter-reset: reversed(list-item) 6
• <ol start=5> maps to a preshint of counter-reset: list-item 4
• <ol> has no preshint (but UA style sheet sets counter-reset: list-item)
• <li value=5> maps to a preshint of counter-set: list-item 5

[zcorpan]

counter-reset: reversed(list-item) -- That declaration would have two effects: 1) the default start value is resolved in layout (to N+1 per above), and 2) the default list-item counter-increment for list items is -1 rather than 1.

I've made an attempt to define reversed() per the above here: #6096