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

[csswg-drafts] [css-inline-3] leading-trim, text-edge, and vertical-align (#5371)

From: Dave Cramer via GitHub <sysbot+gh@w3.org>
Date: Tue, 28 Jul 2020 22:26:50 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-667421788-1595975209-sysbot+gh@w3.org>
dauwhe has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-inline-3] leading-trim, text-edge, and vertical-align ==
I've been wandering through [section 5.4](https://drafts.csswg.org/css-inline/#leading-trim) of CSS Inline 3. Example 4 shows vertically centering text next to some sort of icon/image. But there isn't much detail on how exactly the `leading-trim` and `text-edge` properties would be used to achieve the desired rendering.

Say you have some really simple HTML:

<h1><img src="foo.png">Market Fit</h1>

Naively, my first thought would be to just set `vertical-align: middle` on the image. This is the result:

<img width="1224" alt="inline-vertical-align-middle" src="https://user-images.githubusercontent.com/5687700/88727085-ea550d80-d0fc-11ea-8ef7-3c896e37d679.png">

As mentioned in the spec, this is not vertically centered. `vertical-align: middle` aligns to halfway between the alphabetic baseline and the x-height, which (interestingly) is not exactly halfway between the ascent and descent. 

So how would I get a better result? I could set `text-edge: cap`. But I would presume that `vertical-align: middle` is not going to change its behavior just because I did that. Would I have to use flex layout or something to take advantage of `text-edge` here?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5371 using your GitHub account
Received on Tuesday, 28 July 2020 22:26:53 UTC

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