2030203 - CSS Inline 3 behavior for vertical-align: middle differs from existing implementation

Status: UNCONFIRMED

(Core :: Layout: Block and Inline, task)

Description

[Sajid Anwar [:sajidanwar]]

CSS Inline Layout Module Level 3 makes vertical-align / alignment-baseline for inline elements align the specified baseline of the box to the same baseline of the parent box. This means that alignment-baseline: middle means the x-middle baselines should match between the inline box and its parent. This is different than the CSS2 definition of vertical-align: middle, which aligns the midpoint of the inline box with the x-middle baseline of the parent box.

For elements that need synthesized baselines, this is effectively the same since the synthesized x-middle baseline is the middle of the box. Most places I've seen on the web that use vertical-align: middle fall into this case, like images, SVG icons, etc. But for text elements, this can introduce a rendering change. Besides some WPTs and reftests that test vertical-align: middle, I tried to scour the web for pages that might be impacted and I found a couple examples:

• https://getbootstrap.com/docs/5.3/utilities/vertical-align/ - This example for vertical-align utility classes shows that "middle" is rendered slightly beneath the "baseline" text despite having the same font and sizes, since it's using the midpoint. Under the CSS Inline 3 definition, it should have the same position.
• https://strategywiki.org/wiki/Donkey_Kong - Next to the "Story" heading are [edit | edit source] links that are in a smaller font size. These are slightly lower than where they would be following the CSS Inline 3 definition.

These may be very minor and acceptable changes, similar to how CSS Inline 3 has decided on specific ratios of sub/super that differ from some implementations. But wanted to raise this as a potential discrepancy. This bug can also be used to align the implementation to the specification.

Comment 1

[Oriol Brufau [:Oriol]]

Was the change deliberate by the CSSWG? Does any browser implement the new behavior?

Comment 2

[Sajid Anwar [:sajidanwar]]

Hey Oriol, previously I couldn't find any evidence that this change was deliberate or discussed by the CSSWG. Well, it was deliberate in that alignment-baseline/dominant-baseline intentionally align the selected baseline to the same baseline of the parent. But I couldn't find any discussion of the fact that this changes the existing behavior of middle. No browsers implement this CSS Inline 3 definition of middle.

I meant to file a CSSWG issue about this but never got around to it. I'll go ahead and file one now.

Comment 3

[Sajid Anwar [:sajidanwar]]

Filed this with the CSSWG: https://github.com/w3c/csswg-drafts/issues/13951