W3C home > Mailing lists > Public > public-css-archive@w3.org > January 2021

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

From: Caleb Hearon via GitHub <sysbot+gh@w3.org>
Date: Fri, 22 Jan 2021 15:19:36 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-765478228-1611328775-sysbot+gh@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]:

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

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:25 UTC