w3c / w3c/csswg-drafts

[css-lists] Are outside markers out-of-flow?

Open
#4,574 9 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

The spec used to explain outside markers using position: marker, which counted as absolutely positioned, and thus out-of-flow.

Then position: marker was removed, and in #3771 @MatsPalmgren claims that abspos may not be web compatible. But maybe we can agree on whether they are out-of-flow or not?

This matters for example when propagating text decorations:

the decorations are propagated to all in-flow children

Consider this testcase:

<a href="">
  <div>item</div>
  <div>item</div>
  <div>item</div>
</a>
div { display: list-item; margin-left: 40px; white-space: pre }
div:nth-child(1) { list-style-type: decimal }
div:nth-child(2) { list-style-type: "1. " }
div:nth-child(3)::marker { content: "1. " }
Firefox Chromium LayoutNG Chromium legacy
firefox layoutng legacy

Should the markers be underlined or not? I think taking them out-of-flow (and thus not underlining them) looks better. I guess they could then be painted at step 5 with "non-positioned floating descendants" https://drafts.csswg.org/css2/zindex.html#painting-order

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 issue discussion, the linked CSS Text Decoration and CSS2 painting-order sections, and the referenced #3771 discussion. Use the provided testcase to compare marker behavior across the cited implementations; done means the working group resolves whether outside markers are in-flow and updates the relevant specification text.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend, web-dev
Issue type
Documentation
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.