Re: [csswg-drafts] [css2][css-align] `vertical-align: baseline`'s specced behavior when the box doesn't have a baseline isn't great for CJK (#9931)

css-inline-3 has a different definition, which seems better:
> For an [atomic inline box](https://drafts.csswg.org/css-display-4/#atomic-inline) with no baseline set in the [inline formatting context](https://drafts.csswg.org/css-inline-3/#inline-formatting-context)’s [inline axis](https://drafts.csswg.org/css-writing-modes-4/#inline-axis) its [alignment baselines](https://drafts.csswg.org/css-inline-3/#alignment-baseline) are [synthesized](https://drafts.csswg.org/css-align-3/#synthesize-baseline) from its [margin box](https://drafts.csswg.org/css-box-4/#margin-box), see [A.3: Synthesizing Baselines for Atomic Inlines](https://drafts.csswg.org/css-inline-3/#baseline-synthesis-box).

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?

-- 
GitHub Notification of comment by frivoal
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9931#issuecomment-1938132877 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 12 February 2024 06:44:43 UTC