w3c / w3c/csswg-drafts

[css-lists] Should collapsible space after inside ::marker be preserved?

Open
#4,891 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

css-lists-3 css-pseudo-4
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

In https://github.com/w3c/csswg-drafts/issues/4448#issuecomment-567144044 we resolved that ::marker should have white-space: pre in UA origin. That is needed for outside markers, and we decided to keep it simple and also apply it to inside markers.

But consider this case:

<ol style="list-style-position: inside">
  <li>Text</li>
  <li>
    Text
  </li>
</ol>

For block container elements like <li>, leading and trailing space doesn't matter. So just looking at the HTML, some authors may think that both Text will be aligned equally.

However, the ::marker is inserted at the very beginning of the <li>, and since it's inside, it behaves as a normal inline. So the leading space is no longer at the beginning of the line, and is not trimmed in §4.1.2.1.

Since the ::marker has a trailing space, both list items could still look the same via §4.1.1:

Any collapsible space immediately following another collapsible space [...] is collapsed

But that doesn't apply if the ::marker has white-space: pre. So the 1st list item ends up with 1 space and the 2nd list item with 2 spaces.

What behavior do we want here? We don't have interoperability:

  • In Chromium (both legacy and LayoutNG), WebKit and old Edge, the texts are aligned:

    Chromium

  • In Firefox, they aren't:

    Firefox

So I guess we can choose among:

  1. Keep white-space: pre. Firefox is correct, changing Chromium will be trivial.
  2. Keep white-space: pre but add some magic that if a text ::marker has a trailing space and is followed by collapsible spaces, then these collapsible spaces are removed, even if the ::marker space is not collapsible. This will keep Chromium's behavior but implementing this magic would be annoying.
  3. Say that inside markers don't get assigned white-space: pre in UA origin. This is close to what Chromium does right now. But I guess doing this properly would need pseudo-classes like ::marker:inside and ::marker:outside, even if just for internal use, but that would create a circularity if in the future we allow setting list-style-position in the ::marker itself.

I lean towards 1.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Read the linked CSSWG comment and the CSS Text §4.1.1 and §4.1.2 references first. Compare the listed Chromium, WebKit, Edge, and Firefox behavior, then determine which marker whitespace rule the specification should record; done means the issue's open behavior question has a settled specification decision.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
documentation
Issue type
Documentation
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.