[csswg-drafts] [css-inline] vertically align to middle of cap height (#4707)

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

== [css-inline] vertically align to middle of cap height ==
`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…

![The text "Favorite" with an adjacent heart icon and guidelines for type anatomy. The top version is middle-aligned with the text's x-height, while the bottom version is middle-aligned with the text's cap-height](https://user-images.githubusercontent.com/69633/73290290-09f19480-41b3-11ea-8248-cd448de4eaea.png)

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](https://twitter.com/fantasai/status/1220851780357148674) after [writing about the idea](https://cloudfour.com/thinks/some-imaginary-css/#align-to-typeface-median).)

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

Received on Tuesday, 28 January 2020 17:56:11 UTC