1577360 - text decoration position differs between Firefox and Chrome

Status: NEW

(Core :: Layout: Text and Fonts, defect, P3)

Description

[Cameron McCormack (:heycam)]

Compare the screenshots I'm about to attach of Firefox and Chrome on https://www.abc.net.au/news/justin/. Aside from the decoration thickness being different, the position is pretty different too. The result is that Chrome's ink skipping looks better, as the underline is closer to the text. Is our positioning correct?

Comment 1

[Cameron McCormack (:heycam)]

Attachment: decoration-chrome.png

Comment 2

[Cameron McCormack (:heycam)]

Attachment: decoration-firefox.png

Comment 3

[Jonathan Kew [:jfkthame]]

Our behavior is correct, given the webfont they're using. Its post table calls for a rather thick, low underline:

<underlinePosition value="-255"/>
<underlineThickness value="100"/>

(this is with a unitsPerEm value of 1000, so the font designer's specified underline is 0.1em thick).

Chrome doesn't respect the underline position/thickness parameters from fonts, it uses an arbitrary underline of its own.

The new from-font value for text-underline-offset and text-decoration-thickness would tell Blink to use the font's values instead of its own, but hasn't been implemented yet AFAIK. Gecko has long implemented from-font-like behavior as its default.

I agree the result in Firefox doesn't look very tidy, but that's on the font designer who specified such a large value for underlinePosition. Personally, I think the site here looks a lot better if you add something like text-underline-offset: 0.1em to the content that uses their ABCSans font. (The thicker underline, in comparison to Chrome's thin one, looks quite fitting together with the stroke weight of the font.)

So in summary, this is working as expected. If anything, a possible followup would be to contact the site and suggest they add a text-underline-offset: 0.1em property to improve the rendering in browsers which actually support full decoration controls and respect the font parameters.