Open hober opened 7 months ago
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?
CSS2 defines
vertical-align: baseline
like so (emphasis mine):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 w3c/csswg-drafts#7578 and w3c/csswg-drafts#9520.