Rego’s Everyday Life

A blog about my work at Igalia.

Maybe you got some weird underline offsets when setting big values for text-decoration-thickness in Chromium. Using “text-underline-position: from-font” will calculate the offset from the font metrics data and avoid that problem.

Screenshot of Chromium rendering text with different sizes with an underline solid green text decoration. On the left it shows the output when you have "text-underline-position: auto", where the underline offset is kind of bigger than expected. On the right it uses "text-underline-position: from-font" that makes it look better, with smaller offsets.

See: https://drafts.csswg.org/css-text-decor-4/#valdef-text-underline-position-from-font