Skip to content

[css-values] Proposal: font-size-relative unit that gets preserved during inheritance (upm?) #9612

Open

Description

@benface

This was discussed previously in #2165 (and I'm sure in other places as well), but a different solution was agreed upon for that specific issue. However, I think there's still a need for a font-size-relative unit that inherits like percentages do, meaning that it gets preserved rather than resolved to an absolute value before being inherited. I am proposing upm (units per em) simply because it was mentioned by @fantasai here, but it could be anything. In some cases, percentages work exactly like that (e.g. in letter-spacing, as agreed upon in the aforementioned issue), but the issue with percentages is that they refer to different things depending on the property. There is a need for a unit that is always relative to the current, actual font-size being used on the element the value is applied to.

To give just one example, it is currently impossible to set line-height to a dynamic value based on the current font size, unless...

  • font-size is set on the same element as the line-height (in which case you can use em or %), but that defeats the purpose of making it dynamic;
  • you use unitless values, but those can't be used together with any other type in calc() and other math functions (min(), max(), clamp(), etc.).

Percentages would work, if it wasn't for the fact that line-height's use of percentages is "broken" (they exceptionally don't get preserved, just like em). To better explain why this is annoying, consider the following CSS / design intention:

.prose {
  font-size: 1.5rem;
  /**
   * Set the line height to 1.5em if the font size is <= 16px.
   * Make it tighter as the font size grows larger than that, but never less than 1em.
   */
  line-height: clamp(1em, calc(0.9em + 0.6rem), 1.5em);
}

.prose h2 {
  font-size: 3rem;
  /**
   * Uh oh. The h2's line height will be incorrect even though it is inherited, because the `em` values
   * in the calc() above are resolved using .prose's font-size of 1.5rem instead of the h2's 3rem.
   * It would be correct if we just copied the declaration here.
   */
}

I also made the following Codepen to show how none of the current font-size-relative units get preserved during inheritance: https://codepen.io/benface/pen/XWOVyJx

Thanks!

Activity

  1. Loirooriol commented on Nov 21, 2023

    @Loirooriol
    Contributor

    I think it's strange to only have this for em and not other font-relative units. Could even make sense for container-query units.

    And rather than adding a preserved variant of each unit, maybe we should consider a more general solution? #2749 is basically the same problem but with variables.

  2. tabatkins commented on Nov 21, 2023

    @tabatkins
    Member

    Yeah, this is a general issue where people want "late resolution" of something, so it inherits as-is and gets resolved immediately after.

    If we want it for things other than variables, that'll point to a slightly different syntax than a variable-focused one.

  3. benface commented on Nov 21, 2023

    @benface
    Author

    Awesome. I agree that a more general solution would be better. Should I close this issue and post about my line-height use case in #2749 instead?

  4. changed the title [-][css-values] Font-size-relative unit that gets preserved during inheritance (upm?)[/-] [+][css-values] Proposal: font-size-relative unit that gets preserved during inheritance (upm?)[/+] on May 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions