- From: Caleb Hearon via GitHub <sysbot+gh@w3.org>
- Date: Fri, 22 Jan 2021 15:19:36 +0000
- To: public-css-archive@w3.org
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
Received on Friday, 22 January 2021 15:19:38 UTC