W3C home > Mailing lists > Public > public-css-archive@w3.org > August 2020

Re: [csswg-drafts] [css-text][css-fonts] Optical bounds of a line (#5466)

From: chrisarmstrong via GitHub <sysbot+gh@w3.org>
Date: Fri, 28 Aug 2020 11:40:34 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-682478804-1598614833-sysbot+gh@w3.org>
Hi there, I asked the question on the Medium article, thanks so much for considering this!

My hacky solution to this has been to manually calculate the distance (in Ex units) between the Em box’s left edge and a straight-edged character (such as H or B), and create a `font-offset` variable. I then manually apply `margin-left: $font-offset` to any left-aligned text blocks. Because the offset is consistent for each font at a particular size, and ex units are proportionate to the font dimensions, it works. But it's nasty. Example here: https://codepen.io/chrisarmstrong/pen/eYZWqrw

Where the problem manifests itself most is when you have multiple text sizes, e.g. a heading, subhead and paragraph. If they're all using the same font you'd expect them to create a straight edge when aligned left or right, but currently they don't. In that sense, this _feels_ like an alignment bug, though under the hood it may be a kerning-related calculation. 

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

Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 28 August 2020 11:40:35 UTC

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