Skip to content

[css-lists] <reversed-counter-name> <integer> seems useless #6231

Open
@Loirooriol

Description

@Loirooriol

#6096 added the reversed() syntax to the counter-reset property.

However, unless I'm missing something, these are totally equivalent:

counter-reset: c 7;
counter-reset: reversed(c) 7;

The only difference is that the latter instantiates the counter with a reversed flag, but this flag only seems relevant in these cases:

  • When omitting the starting value (it's 7 in the example)
  • In the implicit list-item counter (it's c in the example)

So IMO we have two reasonable possibilities:

  • Drop the useless <reversed-counter-name> <integer> syntax, and just keep <reversed-counter-name>.

    The reversed flag of the counter would then be set by <reversed-counter-name> and also when counter-reset instantiates a list-item counter in an <ol reversed>. The preshint for reversed HTML lists would be:

    ol[reversed] {
      counter-reset: reversed(list-item);
    }
    ol[reversed][start] {
      counter-reset: list-item calc(attr(start integer) + 1); /* with reversed flag */
    }
  • Keep <reversed-counter-name> <integer>, but then negate increments not just to list-item but to all counters. That is, list-item counters would get counter-increment: list-item 1 by default, not -1 for reversed lists. And when incrementing a reversed counter, the specified amount would actually be decremented. So

    <style>
    #parent { counter-reset: reversed(c) 7; }
    #parent > .child { counter-increment: c 2 } /* Decrements since the counter is reversed */
    #parent > .child::before { content: counter(c) ". " }
    </style>
    <div id="parent">
      <div class="child">foo</div>
      <div class="child">bar</div>
    </div>

    would look like

    5. foo
    3. bar
    

The latter seems more useful for authors, and makes list-item less magic.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions