[css-inline] vertically align to middle of cap height

[tylersticka]

vertical-align: middle will align an element with the baseline of text minus half its x-height. This makes it a poor fit for glyph-sized elements like icons, which will always look a tad too low. Ideally we’d have a keyword (vertical-align: text-middle?) that would align with the middle of the cap height of the typeface instead…

In lieu of this property, I see two dominant techniques for accomplishing this:

• The icon position is adjusted manually, using top: -1px or similar. This requires the icon to be inline-block, since other positioning techniques will conflict with the top value.
• The icon and text must be wrapped in a container with display: flex; align-items: center or similar. But this prevents the icon from being used inline.

(I was encouraged to submit this issue after writing about the idea.)

[fantasai]

Yeah, middle should have been called x-middle! We could call the new variant cap-middle.

I'll note that we also have central now, which is geared towards ideographic content, and mathematical which runs through the middle of the equals sign; it might be interesting to see how closely those track the cap-middle.

[fantasai]

(My current thoughts on this, fwiw, is to defer on adding cap-middle until we sort out #5244 and see if central mostly solves the problem in the meantime.)

[css-meeting-bot]

The CSS Working Group just discussed [css-inline] vertically align to middle of cap height.

The full IRC log of that discussion

<dael> Topic: [css-inline] vertically align to middle of cap height
<dael> github: https://github.com//issues/4707
<dael> fantasai: Prop is defer to next level
<dael> fantasai: Lovely diagram for the problem. They don't have quite right font metrics b/c x-middle is not middle of cap height.
<dael> fantasai: 2 things going on here that make me want to shift. Adding cap-middle is easy. Couple of concerns. Cap metrics not particularly reliable
<dael> fantasai: We have a central baseline that tends to coincide with cap middle. Possible central baseline will solve when impl for many purposes
<dael> fantasai: Last reason to defer is we have same problem, not jsut western but other writing systems. We have an issue that most writing systems besides western and cjk don't have the metrics to do the sizing in inline layout and we don't have a solution to that
<dael> fantasai: My inclination is try and defer until we can solve worldwide problem to get top bottom and middle fo revery writting system. I don't know what it will look like
<dael> fantasai: Given that current impl center will get you close and we want to solve for all writing I propose we defer cap middle until more context on 5244
<fantasai> s/center/central/
<dael> florian: That's with understanding it's possibility central baseline will solve it?
<dael> fantasai: Yeah
<fantasai> s/writing/writing systems/
<dael> Rossen_: Agree with use case and problem. Will revisit once central baseline is solidified and see what else is needed
<dael> fantasai: Yeah. Central baseline is solid but needs implementations
<dael> Rossen_: Okay. Anything else on this?
<dael> fantasai: That's all

[chearon]

There is a robust way to do this now, with CSS2's vertical-align: <length>, if you know (1) the height of the box and (2) the font's cap-height in EM units [1]:

--font-cap-height: 0.71em; /* roboto */
--box-size: 16px;
vertical-align: calc((var(--font-cap-height)/2 - var(--box-size)/2));

By using vertical-align instead of bottom/translate, there won't be any line overlap in case the font is smaller than the box

[1] Drag the font to the opentype.js inspector divide OS/2->sxHeight by head->unitsPerEm and that's your --font-cap-height in em units

[Eli-Black-Work]

Yes, please! 🙂 I run into this all the time.

Also, is there a proposal to add vertical-align: cap? If one has an icon with vertical-align: start, the icon appears to be slightly above its accompanying text, since it's aligned to start at the cap height + ascender height. It seems like ideally there'd be a way to align icons so that they start at the top of the cap (the bottom of the ascender).

[kizu]

I just published a post in my blog about how we can work around the absence of this feature using the newly available cap unit: https://blog.kizu.dev/cap-height-align/

However, both methods I outlined in my post are not ideal: having a readily available value for vertical-align to align stuff to the middle of the font's cap-height will be better than hacky calculations in every regard.

It would be nice to see either some progress on this, or on #5244 (or any browser interest in central value, which was not implemented by anyone, as it seems).

[vrubleg]

Maybe it's time to reconsider this again? Every now and then I need this, come here to check if it was standardized and implemented, and sad to see that the answer is "no".