w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.46k stars 657 forks source link

[css-pseudo-4][css-lists-3] Allow 'writing-mode' on ::marker #5250

Open fantasai opened 4 years ago

fantasai commented 4 years ago

It's a common effect in vertical writing for the list marker to be rendered horizontally. In most cases the best way to do this is using text-combine-upright: all, but allowing writing-mode on the marker (which turns it into an atomic inline, effectively, and should cause it therefore to position similar to an image marker) might make sense also.

Relates to https://github.com/w3c/jlreq/issues/170

Loirooriol commented 4 years ago

Would text-combine-upright: all actually work well? In Firefox, if I disable layout.css.marker.restricted and use

li::marker {
  text-combine-upright: all;
  content: counter(list-item) '. '; /* Force modern marker */
}

then I get the following, note the marker dots:

In Chromium, if I enable ::marker and unrestrict it, text-combine-upright forces the marker to use legacy layout, but the list item is in LayoutNG, and this fails some asserts. [Edit: just realized that text-combine-upright already is in the list of allowed properties, I will have to fix the problem before shipping ::marker, then]

Using writing-mode: horizontal-tb seems better. But the trailing whitespace misaligns it a bit in Chromium due to white-space: pre.

Loirooriol commented 4 years ago

which turns it into an atomic inline

This can be a bit annoying for inside markers in Chromium, since now they are based on LayoutInline, but if they become block containers it should be LayoutBlockFlow.