Text Decoration Line Uniformity

[jfkthame]

Description
Text Decoration Line Uniformity and the 'decorating box'

Specification
css-text-decor-4

Tests
https://wpt.fyi/results/css/css-text-decor/text-decoration-subelements-001.html
https://wpt.fyi/results/css/css-text-decor/text-decoration-subelements-002.html
https://wpt.fyi/results/css/css-text-decor/text-decoration-subelements-003.html

Rationale
Lack of interoperability here is an ongoing source of webcompat issues, e.g. https://bugzilla.mozilla.org/show_bug.cgi?id=1584348.

Failure to correctly follow the spec makes it virtually impossible for an author to achieve good results with text that contains, for example, <sub> and <sup> elements, as in the example given in the spec.

Sample bugs:
https://bugs.webkit.org/show_bug.cgi?id=135353
https://bugs.webkit.org/show_bug.cgi?id=190772
https://bugs.chromium.org/p/chromium/issues/detail?id=855589
https://bugs.chromium.org/p/chromium/issues/detail?id=1008951

[foolip]

cc @mrego who I've seen working on text-decoration on Twitter:
https://twitter.com/regocas/status/1451501063933136902
https://twitter.com/regocas/status/1458407730243321858

@mrego if you have information about interop issues in this space, and in particular examples of web developer's asking for it or struggling with it, that would be fantastic!

[mrego]

We're working on wavy text-decorations (CC @delan), due to our work on adding support to :spelling|grammar-error pseudos. As we want to move from custom painting to use the CSS codepath, that's why we had to fix that issue on twitter.

Still there are more issues related to text-decoration that would benefit from the "decoration box" concept, and that only Firefox seems to implement properly.
For example when you have different elements, like foo<span>bar</span>baz; dotted, dashed and wavy underlines have issues in Chromium and WebKit, because each element paints them independently (see https://crbug.com/668042). Example:

data:text/html,<div style="font-size: 100px; text-decoration: dotted magenta underline;">foobarbaz<br>foo<span>bar</span>baz</div>

@BoCupp-Microsoft & @dandclark from Edge team showed interest on fixing those kind of problems in the discussion related to highlight pseudos. But I don't know if they have any developer feedback regarding that.

Anyway, I was aware of some of the issues described by @jfkthame (the ones related to subscripts and superscripts). But I'm not particularly aware of developers feedback around this topic, I guess the interop bug reports that Firefox is getting show that kind of problem.

[foolip]

While text decoration hasn't been a hotspot of complaints in any survey I've looked at, it has been brought up. Here's a quote from the State of CSS 2021 results:

A lot, honestly. Tables are still a free-for-all, Box-shadow still doesn't work the same across browsers, Firefox still has font-size issues. I wish Safari would utilize the newer text-decoration-style options the same as the other browsers.

Another, going back to the MDN compat survey responses:

The little things, that most clients want nowadays and that eat lozs of time for every new project. E.g. colored link underlines, that require different commands for Firefox and Chrome, whereas Safari does not allow me to control the offset at all.

Those are the only mentions that I can clearly tie to text-decoration.

Aside

While searching for that, I noticed that were also mentions of text-stroke. I realize that's not part of the proposal here, but I'll share anyway since it's adjacent and interesting:

-webkit-text-stroke in combination with paint-order, damn you chrome!

If I do not think about IE or other old browsers, there is little compatibility issues for me. What makes me happy is that modern web frameworks and tools do not support these old browsers any more. In this condition, only I need to care about is there are a few differences between Gecko-based and Chromium-based browsers. For example, some css properties like 'text-stroke' may display different appearance in Firefox and Chrome.

[foolip]

@jgraham this might be a candidate for #9, if it is ultimately a handful of tests and the importance comes from site compat issues.

(I'm not saying I don't think this worthy as a standalone proposal, just noting the options.)

[mrego]

A lot, honestly. Tables are still a free-for-all, Box-shadow still doesn't work the same across browsers, Firefox still has font-size issues. I wish Safari would utilize the newer text-decoration-style options the same as the other browsers.

This might be related to this bug https://bugs.webkit.org/show_bug.cgi?id=230083. text-decoration in WebKit is still the old thing that is now text-decoration-line; and the -webkit-text-decoration shorthand needs to move to text-decoration.

[delan]

Yeah, one of the biggest problems with Blink’s text-decoration impl is that we “propagate” decorations with an inheritance hack, rather than with decorating boxes as required by the spec. Here are some more bugs for the list:

• https://crbug.com/553174
• https://bugzilla.mozilla.org/show_bug.cgi?id=1222703

[foolip]

Here are the pixel results of text-decoration-subelements-002.html and -003.html (cropped) which illustrate what this is about:

---

[jgraham]

I'm going to make this a compat bug under #9

[mrego]

These are not exactly the same problem, but one interop issue related to text decorations that I came across today: https://bugs.chromium.org/p/chromium/issues/detail?id=1172623 (this one has caused interop issues on the wild: https://bugzilla.mozilla.org/show_bug.cgi?id=1728453).

And there are a few others related too: https://bugs.chromium.org/p/chromium/issues/detail?id=1225248 & https://bugs.chromium.org/p/chromium/issues/detail?id=1273042