W3C home > Mailing lists > Public > public-css-archive@w3.org > March 2019

Re: [csswg-drafts] [css-align][css-flex] Doubt about baseline alignment (#3416)

From: Manuel Rego Casasnovas via GitHub <sysbot+gh@w3.org>
Date: Thu, 21 Mar 2019 12:15:08 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-475206362-1553170507-sysbot+gh@w3.org>
After talking to @dholbert during the last CSWG F2F meeting in San Francisco, I agree with him that Firefox behavior is right in all the cases.

The relevant spec text is:
* [Old version from CSS2](https://www.w3.org/TR/CSS22/visudet.html#leading):
  > The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
* [New text from css-align](https://drafts.csswg.org/css-align/#baseline-export):
  > However, for legacy reasons, if an inline-block is a scroll container or contains no in-flow line boxes, its first and last baseline sets are synthesized from its margin box.

Case 1) All browsers do the same. When we have an `inline-block` wrapping an empty `block`, it's considered it doesn't have *in-flow* line boxes, and that's the reason why the margin box of the `inline-block`is used to determine the baseline.

Case 2) The same kind of reasoning applies in this case. The wrapping `inline-block` considers that it has no *in-flow* line boxes, because its content is just an empty flexbox container. So it should use the margin box to determine the baseline (like Firefox does).

Case 3) Here all browsers agree again. The inner `block` has no baseline due to the following text from the spec:
> If there is no such line box or child, then the block container has no baseline set.
As it has no baseline, all browsers follow the same bahavior than Case 1).

Case 4) Here Flexbox spec enters:
> Otherwise, if the flex container has at least one flex item, the flex container’s first/last main-axis baseline set is generated from the alignment baseline of the startmost/endmost flex item.
As the flexbox container has one children, it's baseline is generated from that children. For that reason the margin box of the `inline-block` is not used to determine the baseline.

Please @dholbert comment or clarify antyhing here, as articulating all this with words is kind of complicated.

I have a patch to make Chromium match Firefox in all these cases, so I hope the explanation above is right and this is the expected behavior.

So, I'm closing this unless someone doesn't agree and wants to reopen it and provide some extra feedback/arguments on this topic.

-- 
GitHub Notification of comment by mrego
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3416#issuecomment-475206362 using your GitHub account
Received on Thursday, 21 March 2019 12:15:09 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 19 October 2021 01:31:05 UTC