[articles/styling/underline] text-underline-offset caveats

[fantasai]

[source] (https://w3c.github.io/i18n-drafts/articles/styling/underline.en.html) [en]

text-underline-offset provides a more reliable positioning of the underline relative to the text than the other approaches. For example, if you want to be sure that an underline always clears the glyphs, this generally provides much more predictable results than the previous approaches.

This is only true to the extent that the font remains stable. If the relationship of the font's glyph shapes to the alphabetic baseline changes, then your offset might not look correct anymore, because they are absolute to the baseline and not relative to any font metric.

The value can be expressed as a fixed distance, for example using px, but generally speaking this is suboptimal because if the font size is changed that distance remains the same. It would be necessary to change the underline offset each time a change is made to the font size. A better approach is to specify the distance in ems or as a percentage of 1em.

This needs clarification that you want to specify a percentage (i.e. <percentage>) and not a fraction of an em (e.g. 0.3em). The former will scale with font-size. The latter won't, and will give bad results when inherited through elements with different font sizes. This is probably something worth clarifying.

Other than that, fantastic article as always. <3