[css-inline-3] leading-trim, text-edge, and vertical-align

[dauwhe]

I've been wandering through section 5.4 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:

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?

[fantasai]

It's not an inline image. Try h1 { display: flex; align-items: center; }

[fantasai]

Thinking about this more, what if we allowed alignment-baseline to take two values, and it would synthesize a baseline that is the average of the two? This is maybe just a crazy idea...