text-decoration-thickness, text-underline-offset and from-font keyword for text-underline-position

Category: CSS
Type: New or changed feature
Status: Enabled by default (Chrome 87)
Intent stage: Shipped

Breaking change: No
Enterprise impact: None
Spec maturity: Working draft
Web Platform Tests: Yes

WPT details: Already covered by *thickness* and *offset* tests in https://wpt.fyi/results/css/css-text-decor?label=experimental&label=master&aligned More tests for variable font MVAR overrides will be developed.

Summary

Implement CSS text decoration properties text-decoration-thickness and text-underline-offset. Add support for the new from-font keyword for text-underline-position. When from-font keywords are used, support variable font MVAR underline scaling, (tags `unds` and `undo` in the MVAR table overriding underlinePosition and underlineThickness in the OpenType `post` table.

Motivation

With the introduction of the text-decoration-skip-ink interest for additional underline styling increased to improve situations where the underline as placed by the UA is too close to the baseline and ink-skipping triggers too early. High interest on the chrome bug #785230 (25 ⭐️) and shipped in Firefox and Safari.

Standards & signals

Specification: https://drafts.csswg.org/css-text-decor-4/#text-underline-position-property
Firefox: Shipped/Shipping
Safari: Shipped/Shipping
Web developers: Positive — Feedback received after ink-skipping, 25 ⭐️ on Chrome bug - 123 likes on video explaining the underlining styling features in FireFox.
Tracking bug: https://bugs.chromium.org/p/chromium/issues/detail?id=785230

Ecosystem

Web Platform Tests: https://wpt.fyi/results/?q=css%2Fcss-text-decor
Chrome Platform Showcase: https://chrome-platform-showcase.paulkinlan-ea.deno.net/features
GenDN reference: https://gendn.paulkinlan-ea.deno.net/features
chrome.dev demos search: https://www.google.com/search?q=site%3Achrome.dev+text-decoration-thickness%2C%20text-underline-offset%20and%20from-font%20keyword%20for%20text-underline-position
MDN Web Docs: https://developer.mozilla.org/en-US/search?q=text-decoration-thickness%2C%20text-underline-offset%20and%20from-font%20keyword%20for%20text-underline-position
Baseline status: https://webstatus.dev/?q=text-decoration-thickness%2C%20text-underline-offset%20and%20from-font%20keyword%20for%20text-underline-position

Docs: https://drafts.csswg.org/css-text-decor-4/#text-underline-position-property

Explainers: https://drafts.csswg.org/css-text-decor-4/#text-underline-position-property

View on chromestatus.com