Csswg-drafts: [css-lists] position:marker as layout model for list-style-position:outside list item markers

Created on 28 Mar 2019 · 5Comments · Source: w3c/csswg-drafts

https://drafts.csswg.org/css-lists-3/#position-marker

An element with position:marker counts as absolutely positioned.

Given the above quote, I have some doubt regarding using position:marker as a description of how layout works for list-style-position:outside list item markers. Making it positioned changes the stacking level in which it is painted. Given how prevalent <li> is on the web, I strongly doubt this would be web-compatible. Non-positioned content that happens to overlap a ::marker must paint on top of it.

FYI, Gecko has implemented ::marker and we made the following tweaks for it to make it compatible with the legacy rendering:

when the list item has list-style-position:outside, the display value of the ::marker pseudo-element is blockified
the ::marker box inline-size shrink-wraps by default
the ::marker box inline-axis margins are not calculated per the CSS2 block-level algorithm (because that would typically make the inline-end margin very large and thus misposition the ::marker)

I think those tweaks are non-controversial since I think they would fall out from making it absolutely positioned anyway, as the spec suggests, so I think it's within the intent of the spec regarding the layout result. But, we do not treat it as absolutely positioned in our box tree.

css-display-4 css-lists-4

Source

MatsPalmgren

Most helpful comment

Random thought: maybe marker should be a display value rather than a position value.

It should be a new <display-outside> value, or an _additional_ keyword, in that case. I think it would ruin this feature if you can't specify the marker's internal layout to be grid etc. Compare table-caption/cell, which has severely limited layout because you can't specify a <display-inside> value.

::marker, table-caption, <legend> and <summary> have a lot in common in this respect. They are in-flow by default, but not quite, since they aren't flowed normally together with other children in the layout context. Semantically, they're like a third variation of "flow" (besides in-flow, out-of-flow). I wonder if we should model them in the same way for that reason. Either through <display-outside> or a new property. E.g.

This would add a lot more power to authors to control the layout without having to add wrapper elements. E.g. <caption> would have display: caption flow-root by default, but you could also specify <caption style="display: caption grid"> to display its children using Grid layout.
legend | summary allows an arbitrary child to be displayed as the rendered legend/summary in a fieldset/details element.

(FYI, It would be trivial to support table captions/cells with internal grid/flex/table layout in Gecko. The only thing missing is some way to specify it in CSS.)

MatsPalmgren on 7 Apr 2019

👍2

All 5 comments

Random thought: maybe marker should be a display value rather than a position value.

fantasai on 6 Apr 2019

👍1

I still think this might emerge as a go-to outside marker solution, regardless of all this spec scheming: https://github.com/w3c/csswg-drafts/issues/2361#issuecomment-372011543

jonjohnjohnson on 6 Apr 2019

Random thought: maybe marker should be a display value rather than a position value.

(FYI, It would be trivial to support table captions/cells with internal grid/flex/table layout in Gecko. The only thing missing is some way to specify it in CSS.)

MatsPalmgren on 7 Apr 2019

👍2

@MatsPalmgren So I totally agree with your comment above, but it's like a lot of issues in one. :) Gonna try to split them out and keep this tagged against css-lists-4 since the OP is about marker styling.