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

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]:

```css
--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](https://opentype.js.org/font-inspector.html) divide `OS/2->sxHeight` by `head->unitsPerEm` and that's your `--font-cap-height` in `em` units

-- 
GitHub Notification of comment by chearon
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4707#issuecomment-765478228 using your GitHub account


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