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

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