[csswg-drafts] Adding new relative units RCH and REX (#6034)

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

== Adding new relative units RCH and REX ==
## Background

Currently today, there is support for relative root level 'em' width, aka. 'rem' (https://www.w3.org/TR/css3-values/#rem), but not root 'ch' nor root 'ex' (https://www.w3.org/TR/css3-values/#font-relative-lengths). I'd like to see that change.



## Proposal

When considering WCAG 2.1 1.4.8 (https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html), its pretty clear that a value like 80rem won't guarantee a layout will meet this requirement. I believe that something like 80rch would be far more effective (or at least a lot closer to achieving this without JS).

As for 'rex' (which honestly would be really fun to use), some typography and visual designers suggest that vertical rhythm in a design should be driven by x-height (or 'ex'). (#22 - https://uxdesign.cc/the-ui-ux-tips-collection-volume-one-f69f0969ed17#ebf5). Using the baseline font (user preference or design choice), the design should vertically scale accordingly.

Using 'rem' / 'rch' for horizontal spacing & 'rex' for vertical seems to be more inline with the intent of spacing metrics, that are fluid based on the user's preference or style-set font family.



## Advantages and Drawbacks

- Advantage: Would round out the existing REM value for relative values
- Advantage: UI is more flexible and consistent to user preference (if fonts aren't overwritten by a fixed style)
- Advantage: RCH allows us to set a universally readable width at the root level, like some use REM for
- Disadvantage: Cost of implementation for a potentially un-used unit
- Disadvantage: Mixed support across various browsers for a bit



## Current Workarounds

- CSS variables (logical properties) could technically do this today.
- Some fonts render 1ch or 1ex as .5em. This may work, but it would be sporadic, and miss the intent.
- Could be faked by using .5rem, but still misses intent.
- And for 'rch', JS could read & parse each line and see which characters overflow and adjust width dynamically.



*P.S. This is my first time proposing. Thanks to Adam Argyle for pointing me in the right direction (especially to proposal with a nice template to follow!)*

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


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

Received on Monday, 22 February 2021 23:16:38 UTC