[css-values] cap-height unit?

[tbredin]

I've just found out about the ch and ex units described here:
https://www.w3.org/TR/css3-values/#relative-lengths

Cap height: This is something that could become extremely useful in vertical rhythm projects such as Sassline and MegaType, which go to great length to attempt to find this height through other means (plus a lot of manual config adjustment). When combined with ex (and a speculative baseline position), we also start to build up a very useful picture of a font's vertical metrics.

The best measure of this is usually the height of a capital H in any font, but could likely also fall back to I or X.

Is this something that might be considered in future?

Further reading on some existing issues with typographic metrics on the web

[simevidas]

Google has proposed (and is implementing) the CSS Step Sizing module, which enables “vertical rhythm using CSS”. What do you think? 😊

[SelenIT]

There is also the CSS Line Grid module that also provides a CSS mechanism for vertical rhythm (including baseline snapping to regular grid lines).

But I believe that having better access to the font metrics from CSS would have more use cases other than that. For example, it can be aligning the icon with text (both top and bottom) or removing extra vertical spacing before text (e.g. in the approach described in this article) without having to use magic numbers for each particular font.

[fantasai]

RESOLVED: add cap unit to Values and Units Level 4 per WG resolution

[tabatkins]

Added.

[karlhorky]

Thanks for this proposal for a cap unit for allowing font-sizing via the capital heights, really cool!

Does anyone know of any browsers that have considered or started implementation of this? I've been looking for tracking bugs, but haven't been successful...

[Crissov]

Apparently none yet. https://caniuse.com/mdn-css_types_length_cap

[SebastianZ]

I've now created a feature request to implement it in Gecko (Firefox).

Sebastian

[karlhorky]

Great, thanks @SebastianZ! Tweeted about it: https://twitter.com/karlhorky/status/1378683467098165248

[kizu]

Just wanted to note that this is currently implemented in Firefox!

There was also a ticket in Chromium for some time — https://bugs.chromium.org/p/chromium/issues/detail?id=1201220
And I did not find an existing ticket for Webkit, so I did open it — https://bugs.webkit.org/show_bug.cgi?id=245033