Intent to Implement and Ship: list-style-type: <string>

[Oriol Brufau]

Contact emails
obr...@igalia.com

Explainer
https://lists.w3.org/Archives/Public/www-style/2010Mar/0326.html
https://groups.google.com/forum/#!topic/comp.infosystems.www.authoring.stylesheets/A_9t4NknUV4

Design docs/spec
Specification: https://drafts.csswg.org/css-lists/#valdef-list-style-type-string

https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type#<string>

TAG review
A TAG review doesn't seem necessary.
It's a small feature that only expands the syntax of an existing property,
and Firefox already shipped it long ago.

Summary
In CSS2, list-style-type only accepted keyword values like disc or decimal,
this defines the appearance of the list item marker when there is no marker image.
Later CSS Lists expanded the syntax of list-style-type to allow arbitrary strings.

Motivation
Being able to use arbitrary characters as a marker, like "-", "+", "★" or "▸".

Without this, developers are usually forced to hide the real marker
and insert the text into a ::before pseudo-element via the content property.
However, the fake marker won't be nicely positioned by list-style-position.

Another approach would be rasterizing the text into an image,
or writing a SVG data URI with the text, and setting it to list-style-image.
But this is not convenient, and the result may not look good because
marker images have a small size (half the ascent of normal text).

Risks

Interoperability and Compatibility
Low interoperability risk
Firefox already shipped 4.5 years ago

Low compatibility risk
This feature only expands the syntax of list-style-type to allow strings, which is unlikely breaking any web content.

Firefox: Shipped (https://bugzilla.mozilla.org/show_bug.cgi?id=1144607)
Edge: No public signals
Safari: No public signals (https://bugs.webkit.org/show_bug.cgi?id=167729)
Web developers: Positive (https://stackoverflow.com/questions/7698764/custom-bullet-symbol-for-li-elements-in-ul-that-is-a-regular-character-and)

Ergonomics
This feature will be frequently used in tandem with other list features, like <ul>, <ol>, <li>, list-style-position and display:list-item

The feature only allows to customize the text in markers, but markers would have to be rendered anyways, so it shouldn't have a negative impact to performance.

Activation
It won't be challenging for developers to take advantage of this, they only need a CSS rule setting list-style-type to the desired string.

Security
No security risks.

Debuggability
The feature will be exposed in the Styles tab of the Elements panel of the DevTools.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux,
Chrome OS, Android, and Android WebView)?
Yes
This feature is not platform dependent.

Is this feature fully tested by web-platform-tests?
Yes
There are parsing tests in css-lists and reftests in vendor-imports:
https://wpt.fyi/results/css/css-lists/parsing?q=list-style-type
https://wpt.fyi/results/css/vendor-imports/mozilla/mozilla-central-reftests/lists-3?q=list-style-type-string

The latter can be moved into css-lists.

Tracking bug
https://bugs.chromium.org/p/chromium/issues/detail?id=687946

Link to entry on the Chrome Platform Status
https://www.chromestatus.com/feature/5893875400966144

[Yoav Weiss]

LGTM1

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/b5e9b88e-b8dd-5e3f-70b3-5bf6b63b55fb%40igalia.com.

[Chris Harrelson]

LGTM2

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACj%3DBEgVX7q40okbAfNeZ2h0dYJRnDPVq3jYBk9kSbfwS%3D5y2g%40mail.gmail.com.

[Daniel Bratell]

LGTM3

/Daniel

LGTM2

LGTM1

To unsubscribe from this group and stop receiving emails from it, send an email to blin...@chromium.org.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/b5e9b88e-b8dd-5e3f-70b3-5bf6b63b55fb%40igalia.com.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blin...@chromium.org.