← Back to release summary

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

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

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