[css-lists] How to control the gap between the marker and the text?

[benface]

I might be missing something obvious, but I couldn't find a way to specify the gap between a list item's marker and its text after 15 minutes of Googling (or at least one that didn't involve a hack such as wrapping the text with a <span style="position: relative; left: -5px;">). I actually see that there used to be a marker-offset property but it's been removed. Is something else coming, or is there a reason why this is missing?

[Loirooriol]

I guess there's the possibility of

::marker {
  content: counter(list-item) "     ";
}

where you choose the number of spaces depending on the desired gap.

For more precision, maybe you can use a tabulator and control its size with tab-size. Currently it doesn't apply to ::marker, but you may have luck inheriting it:

.list-item { tab-size: 10px }
::marker { content: counter(list-item) "\9 " }

If margin is added to the list of properties supported in ::marker, I guess you will be able to use that.

[benface]

@Loirooriol What if I want to use the default disc marker?

If margin is added to the list of properties supported in ::marker, I guess you will be able to use that.

Is there an issue for that? I couldn't find any, but it sounds like what I'm looking for. I imagine the UA stylesheets would need to have something like ::marker { margin-right: 10px }, otherwise the markers would be stuck to the text by default which isn't the current behaviour.

[Loirooriol]

What if I want to use the default disc marker?

Theoretically the disc is just a U+2022 character, though in practice browsers just paint a circle without looking at the font. So you won't achieve the same result, but you can e.g. use list-style-type: "\2022 " and there will be no gap.

I imagine the UA stylesheets would need to have something like ::marker { margin-right: 10px }

Currently there is no margin, the gap is caused by a space character in the suffix. Once margin is supported, the margin will just add extra separation in addition to the space. If you don't want this space you can use ::marker { white-space: normal }, then it will be collapsible and will disappear in outside markers (not inline ones). You can also get rid of it with list-style-type or ::marker's content. Consider defining a new @counter-style with an empty string suffix.

Also note that it's not exactly margin-right, you will want something like margin-inline-end but where the inline-end is resolved with respect to the list item for marker-side: mach-self or the parent for marker-side: match-parent.

So there may be some value in reintroducing something like marker-offset (just for outside markers, I guess). It was part of CSS 2 but removed in CSS 2.1.

[Vanuan]

@Loirooriol
In fact, ordered lists don't have a gap between the counter and the text. It's unordered lists that don't support removing the gap other than rewriting marker content with custom symbol. It looks like as if there's another hidden pseudoelement between the marker and the text.

I think this is the document that lacks explanation on the gap:

https://www.w3.org/TR/css-pseudo-4/#marker-pseudo

It mentions marker::postfix as a possibility, but doesn't specify the issue.

Anyway, the issue disappears if you set marker to something different from the defaults. Then, you can use ::before to add spacing.

In addition, even ::marker implementation is lacking in browsers. So w3c still has time to address inconsistencies.

[Vanuan]

Ok, reading further, ::marker is specified in [CSS-DISPLAY-3] and [CSS-LISTS-3].

CSS Counter styles 3 tells the following about the predefined symbolic markers (6.3):

@counter-style disc {
  system: cyclic;
  symbols: \2022;
  /* • */
  suffix: " ";
}

@counter-style circle {
  system: cyclic;
  symbols: \25E6;
  /* ◦ */
  suffix: " ";
}

@counter-style square {
  system: cyclic;
  symbols: \25AA;
  /* ▪ */
  suffix: " ";
}

There's no way to override the suffix in any way. You can only create your own counter style fragment and set the list-style-type to it.

But, if you compare the predefined counter styles, e.g. disc, you'll notice that implementation is not exactly the same. The gap is not the same and the size is different. All tests pass, and there is only one test for symbolic counter styles, disclosure-open and disclosure-closed: https://test.csswg.org/harness/test/css-counter-styles-3_dev/single/disclosure-styles/format/html5/

And the tests themselves are invalid. they use disclosure-open2 and disclosure-closed2 instead of overriding disclosure-open and disclosure-closed. So there's no way to override predefined @counter-style, their implementation seems to be completely detached from the fragment.

I think the test should be modified and extended:

1. Add more predefined markers
2. Test the ability to override user-agent's @counter-style
3. Test the ability to create your own @counter-style

[Vanuan]

Ok, reading further, disc, square and circle (and other value names) are invalid for the counter-style rule. Which means you really can't do anything about the gap in the predefined markers. I believe it makes these markers and the default presentation useless, as you can't make them behave the same across browsers.

[Vanuan]

Further digging, this commit made predefined counter-styles not overridable:
web-platform-tests/wpt@835f1b1

So there were tests that checked the ability to override user-agent's @counter-style, and potentially remove the space due to suffix.

The corresponding decision is captured here:
#3584 (comment)

So, to summarise. The decision was to accept the reality of discrepancies between the browsers when rendering predefined markers. But you can define your own counter styles which could inherit from the conformant representation defined in the spec.

Still, there's no recommended way to control the gap between the marker and the text, other than adding spaces to the suffix. Further specs might add ::marker::postfix which may or may not be modifying the suffix. But for now ::before is the way.

[Loirooriol]

In fact, ordered lists don't have a gap between the counter and the text

Ordered vs unordered is just an HTML concept, CSS doesn't care about that.

It looks like as if there's another hidden pseudoelement between the marker and the text.

Not in Blink.

::marker implementation is lacking in browsers

I implemented it in Blink. AFAIK only these are missing: ::before::marker, ::after::marker, and maybe some property that was defined to apply to ::marker after I shipped it.

if you compare the predefined counter styles, e.g. disc, you'll notice that implementation is not exactly the same

Yes https://drafts.csswg.org/css-counter-styles-3/#simple-symbolic: "a UA may instead render these styles using a UA-generated image or a UA-chosen font instead of rendering the specified character in the element’s own font"

instead of overriding disclosure-open and disclosure-closed

That's because they are non-overridable counter-style names.

And the tests themselves are invalid

The above doesn't make the tests invalid.

I believe it makes these markers and the default presentation useless, as you can't make them behave the same across browsers

I don't see how you reach this conclusion. Leaving some details up to the UAs doesn't make the entire thing useless. And you can always use your own counter style.

there's no recommended way to control the gap between the marker and the text, other than adding spaces to the suffix

Well, yes, the suffix in a counter style, or the content property in ::marker. If the marker has an outside position, you can also add padding to the list item to increase the separation (and possibly a negative margin if you want to move the marker instead of the contents). The point of this issue is to discuss if we need something better, and what it would be.

[benface]

The point of this issue is to discuss if we need something better, and what it would be.

marker-gap would be nice :)

[glmvc]

The point of this issue is to discuss if we need something better, and what it would be.

marker-gap would be nice :)

I also thought of something like list-style-gap when I was asking myself the same question as this issue and looking for possible solutions.
Due to inconsistencies across browsers, and e.g., no real way to set the gap of built-in list markers like disc to 0, authors end up working around ::marker instead of using it (for example, by removing its content and using a pseudo-element like ::before).
IMHO, a "gap" property like this would help standardize control over marker spacing.

This article about the "Gap After the List Marker", including a live demo, summarizes some important aspects and related problems for authors quite well, in my eyes.