[css2][css-align] vertical-align: baseline's specced behavior when the box doesn't have a baseline isn't great for CJK

[hober]

CSS2 defines vertical-align: baseline like so (emphasis mine): Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent’s baseline.

This is great if the parent's baseline is the alphabetic baseline. But if we're using a central baseline because the parent's text is CJK, what you really want is to align the box's midline (halfway between the top and bottom margin edges?) with the parent's central baseline.

The workaround is to use vertical-align: middle, but that doesn't actually do what you want and you have to tweak by hand with margin and padding to get it right, which is very brittle.

See also #7578 and #9520.

[frivoal]

css-inline-3 has a different definition, which seems better:

For an atomic inline box with no baseline set in the inline formatting context’s inline axis its alignment baselines are synthesized from its margin box, see A.3: Synthesizing Baselines for Atomic Inlines.

A.3, in turn, says:

If an atomic inline (such as an inline-block, inline-table, or replaced element) does not have a content-derived baseline set in the inline axis of the inline formatting context in which it participates, then the UA must synthesize its baselines as follows in order to align it.

These baselines are assumed to be at its line-under margin edge:

• text-under baseline
• ideographic-under baseline
• ideographic-ink-under baseline
• alphabetic baseline

These baselines are assumed to be halfway between its line-under and line-over margin edges:

• central baseline
• math baseline
• x-middle baseline

These baselines are assumed to be at its line-over margin edge:

• text-over baseline
• ideographic-over baseline
• ideographic-ink-over baseline
• cap-height baseline
• hanging baseline
• x-height baseline

---

The workaround is to use vertical-align: middle, but that doesn't actually do what you want and you have to tweak by hand with margin and padding to get it right, which is very brittle.

Now that it exists, you probably vertical-align: center instead, which should do the proper kind of centering for CJK, and thus wouldn't need the brittle margin and padding adjustments.

---

All in all, it seems to me that CSS2 is indeed not quite good enough, but that css-inline-3 does address the problem you raised. If it doesn't, could you help me understand why?