[css-text-decor-4] Rethinking text-underline-offset · Issue #3118 · w3c/csswg-drafts (original) (raw)

Skip to content

Navigation Menu

• • GitHub Copilot Write better code with AI
  • GitHub Advanced Security Find and fix vulnerabilities
  • Actions Automate any workflow
  • Codespaces Instant dev environments
  • Issues Plan and track work
  • Code Review Manage code changes
  • Discussions Collaborate outside of code
  • Code Search Find more, search less
• Explore
  • Learning Pathways
  • Events & Webinars
  • Ebooks & Whitepapers
  • Customer Stories
  • Partners
  • Executive Insights
• • GitHub Sponsors Fund open source developers
  • The ReadME Project GitHub community articles
• • Enterprise platform AI-powered developer platform
• Pricing

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sign up

Description

There are a couple problems with the current formulation of text-underline-offset.

• text-underline-offset is meant to be a delta added to wherever the underline happened to be placed, but the location where the underline is placed varies between different browsers and operating systems. The use case this is supposed to solve is "my underline is just a little too high, let's nudge it down a little bit" but because different browsers choose the locations differently, the current formulation doesn't satisfy this use case
• What does it mean if both text-underline-offset: from-font and text-underline-position: under are applied to the same element? Such a formulation seems fairly meaningless.

In order to fix these problems, I propose the following changes:

1. Add another value to text-underline-position named something like standard. Come up with some standard formula for the placement of the underline that all browsers can agree on, and state it in the spec. Importantly, don't make this the initial value - it's just an option that authors can specify if they want consistent underlines. I'm not particular on what specific formula is used, but I'll propose font-size / 16 to get the conversation started. (This formula scales linearly with font size, and default-sized text gets a 1px underline gap, which is compatible with most (all?) browsers today)
2. Move the from-font value from text-underline-offset to text-underline-position.
3. Update the grammar of text-underline-position such that you can't specify more than one of [auto, standard, under, from-font].
4. Now, text-underline-offset really can be just a delta, so there's no need for an auto value. Remove the auto value and have it just take a <length>.
5. While we're at it, text-underline-offset should be able to take a percentage, which gets multiplied by the font size. This would be a good way to make the underline scale as the font size grows.