Skip to content

[css-lists][css-counter-styles] Define which symbols are not affected by font-family, and how exactly #6201

Closed
@Loirooriol

Description

@Loirooriol

If you have this code:

<!-- AdobeBlank defined in https://github.com/adobe-fonts/adobe-blank/blob/master/adobe-blank.css -->
<ol style="font-family: AdobeBlank">
  <li style="list-style-type: decimal">1.</li>
  <li style="list-style-type: circle"></li>
</ol>

Then the font displays both 1. of the ::marker and text node as blank.
But in the 2nd item, we still see the of the ::marker, only the text node is blank.

This was kinda explained in CSS2 https://www.w3.org/TR/CSS22/generate.html#list-style

Glyphs are specified with disc, circle, and square. Their exact rendering depends on the user agent

However, according to https://drafts.csswg.org/css-counter-styles-3/#simple-symbolic, circle is just supposed to produce a U+25E6 , and CSS Lists doesn't say that ::marker should change the font-family or something.

So reading the specs I would guess that the should disappear too, but that's probably bad for compat.

So I think the specs should define what exactly happens. Implementations haven't been much consistent in the details:

  • Is it just for list-style-type set to disc, circle, square, disclosure-open, disclosure-close? What if their definition is changed using @counter-style?
  • What if I use my own @counter-style like
    @counter-style my-circle-1 { system: cyclic; symbols: "◦"; suffix: " "; }
    @counter-style my-circle-2 { system: extends circle; }
  • What if I use list-style-type: "◦ " or ::marker { content: "◦ " }?
  • What if I use ::after { content: counter(c, circle) }?

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions