- From: Dave Cramer via GitHub <sysbot+gh@w3.org>
- Date: Tue, 28 Jul 2020 22:26:50 +0000
- To: public-css-archive@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: ```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