[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