[csswg-drafts] [css-values] Font-size-relative unit that gets preserved during inheritance (upm?) (#9612)

benface has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-values] Font-size-relative unit that gets preserved during inheritance (upm?) ==
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](https://github.com/w3c/csswg-drafts/issues/2165#issuecomment-570013619), 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 was "broken"](https://github.com/w3c/csswg-drafts/issues/2165#issuecomment-355528653) (they exceptionally _don't_ get preserved, just like `em`). To better explain why this is annoying, consider the following CSS / design intention:

```css
.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!

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9612 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 18 November 2023 02:35:13 UTC