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-configReceived on Friday, 22 January 2021 15:19:38 UTC
This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:25 UTC