search

w3c / csswg-drafts

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

[css-lists-3] Clarify sizing of marker images. #4207

Open fantasai opened 5 years ago

fantasai commented 5 years ago

@SimonSapin points out in http://www.w3.org/mid/51CD456E.1060409@exyr.org that we don't define the sizing of list-style-image (which should reference css-images-3 accordingly).

Also points out in http://www.w3.org/mid/51D1A324.7020807@exyr.org that we might need to be extra clear in how its sizing differs from images loaded via content. Which does raise the question of should these two styles be equivalent or not?

li { list-style-image: linear-gradient(red, blue); /* 1em x 1em gradient */ }
li::marker { content: linear-gradient(red,blue); /* ??? */ }
fantasai commented 5 years ago

Make sure there's a testcase for this in WPT: https://lists.w3.org/Archives/Public/www-style/2011Feb/0364.html

Loirooriol commented 4 years ago

Testcase In Chromium and WebKit, if some intrinsic size is missing, it's set to the font ascent divided by 2. In Firefox, it's set to 0.

MatsPalmgren commented 3 years ago

The zero default size in Firefox is a bug. I'm removing our legacy code path for list-style-image markers which will fix that.

I tested "ascent divided by 2" in the new code but I get a significantly larger result than in Chrome, so it appears we calculate "font ascent" differently in our layout engines. I also think the image markers look bad in Chrome for some fonts/sizes, see this testcase for example. The Noto Serif result look way too big in Chrome IMO. Here a screenshot for font-size:16px:

image

(Chrome on the left, Firefox with the new layout path on the right)

Basing it on the font ascent also seems less useful for authors since there is no CSS unit for it (which makes it impossible to specify a matching padding/margin or whatever). For these reasons I think the spec should continue to use the em size, however 1em seems too large. In the screenshot above, Firefox is using 0.4em which seems to give good results for a variety of fonts and sizes, and it gives a predictable size for authors. (If we standardize a size based on ascent or some other font metric we need to first standardize exactly how that metric is supposed to be calculated for all types of fonts / platforms).

The CSS Lists spec currently says it should be 1em:

The marker image is sized using the default sizing algorithm [css-images-3] with no specified size and a default object size of 1em square.

but I don't think that's what authors want as the default size because it's too large. Instead, the size should be close to what Chromium/WebKit is currently rendering for typical text font sizes. 0.4em seems close enough to avoid web-compat issues. I would like to see a spec change to move it closer to what UAs are implementing.

CC @jfkthame @emilio