[css-align-3][css-multicol-1] First baseline of a multicol #7856

bfgeek · 2022-10-07T18:06:47Z

In reviewing the last-baseline behaviour for multi-col we discovered that the first-baseline behaviour of multicol is inconsistent.

For example:
https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=10862

<!DOCTYPE html>
<div style="display: flex; align-items: baseline; border: solid 5px;">
  <div style="background: lime;">baseline</div>
  <div style="columns: 2; background: cyan;">
    <div style="height: 50px;"></div>
    line1<br>line2<br>line3<br>line4<br>line5
  </div>
</div>

And:
https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=10863

<!DOCTYPE html>
<div style="display: flex; align-items: baseline; border: solid 5px;">
  <div style="background: lime;">baseline</div>
  <div style="columns: 2; background: cyan;">
    <div style="height: 100px;"></div>
    line1<br>line2<br>line3<br>line4<br>line5
    <div style="height: 20px;"></div>
  </div>
</div>

Currently all engines take the first-baseline from the "first" column - if there isn't a baseline within that column we'll produce no baseline for the entire multicol.

Is this desired?

Two options which are better (IMO) than the status quo.

As @mstensho suggests take the highest baseline from the entire multicol (including spanners for example). This makes it symmetrical with last-baseline (taking the lowest).
Take the first-baseline from the first column/span with a baseline. With this approach for example number 2 the baseline will be the first-baseline of the 2nd column.

Ian

css-meeting-bot · 2022-11-02T23:12:52Z

The CSS Working Group just discussed [css-align-3][css-multicol-1] First baseline of a multicol, and agreed to the following:

RESOLVED: We define the first baseline as the highest baseline in all the columns and spanners of the multicol

The full IRC log of that discussion

<dael> Topic: [css-align-3][css-multicol-1] First baseline of a multicol
<dael> github: https://github.com//issues/7856
<dael> iank_: Basically currently the spec says to take the first baseline from the first column
<dael> iank_: This has a couple of poor side effects
<dael> iank_: Came up while Morton reviewed new last baseline behavior
<dael> iank_: What can happen now is that if there is no content that produces a baseline in the first column it has no first baseline but might have last from another column
<dael> iank_: Two potential solutions. First is mirror last baseline and take highest of all content
<dael> iank_: Second is take the first baseline of the first non-empty thing. First thing that produces a baseline
<dael> astearns: And we are taking the lowest baseline for last baseline because it's often the case the first column has a much lower baseline
<dael> iank_: Correct. Not always, quite common for it to come from later
<dael> astearns: For symmetry taking highest baseline seems like might be better. No strong opinion
<dael> dholbert: I was going to say roughly same. Like simplicity of first that exists but asymmetry unfortunate
<dael> iank_: Pros and cons. First baseline if you're trying ot align it will roughly give you always first line on first column. Highest if you switch to smaller font size in another column that would be first highest. So pros and cons. Happy with either
<dael> dholbert: Do we generally have symmetry between first and last determined in other layout modes?
<dael> iank_: We broadly have symmetry.
<dael> iank_: Ignoring some convoluted table case. But wouldn't be an issue to break here. We found this because writing last baseline logic, noticed the asymmetry and went that's weird
<dael> astearns: In terms of what effect you want to have, presumably you're trying to align some other element with first baseline. First column will often be taller in a heading. If we take first baseline of column with a baseline the thing outside will align with the title. If we take heighest it will align with first body text. I can see either being useful
<astearns> ack fantasai
<dael> fantasai: I think you described what is the most likely scenarios
<dael> fantasai: We have an issue open on selecting which element you want to take baseline on. If we went highest and you wanted first you would be able to request that. That might be a reason to take highest
<dael> iank_: Fine with that
<miriam> I like that approach
<dael> astearns: And that way we get symmetry.
<dael> fantasai: We haven't worked out how this interacts with splitting element but can definte to work
<dael> astearns: Prop: We define the first baseline as the highest baseline in all the columns and spanners of the multicol
<dael> astearns: Obj?
<dael> dholbert: This is symetrically defined with last baseline. Does that take relpos into account?
<dael> iank_: It does not. Out of flow it does not and baselines are pre-relpos
<dael> dholbert: No objection. Just wanted to check
<dael> astearns: Good to check we're defining as in-flow
<dael> iank_: Probably don't have language but all engines are same
<dael> RESOLVED: We define the first baseline as the highest baseline in all the columns and spanners of the multicol
<fantasai> ACTION: fantasai to make sure we define that relpos doesn't affect baseline alignment

fantasai · 2022-11-03T16:06:46Z

For the record, Murakami-san confirms that this is “the most reasonable”.

…7639

tabatkins · 2023-01-19T23:59:27Z

@bfgeek Would you mind reviewing the edits we just committed? We believe it matches what was discussed and resolved for multicol baselines.

fantasai · 2023-01-20T00:03:20Z

I guess the most interesting thing is how we determine which is “highest” in the era of multiples baselines. :)

fantasai · 2023-01-20T00:16:48Z

Latest text should soon be appearing here: https://drafts.csswg.org/css-align-3/#baseline-export

To be symmetrical with the last-baseline. See: w3c/csswg-drafts#7856 Change-Id: I821b466c28fe2c448ad46c79edfd2cfe031198f3

To be symmetrical with the last-baseline. See: w3c/csswg-drafts#7856 Change-Id: I821b466c28fe2c448ad46c79edfd2cfe031198f3 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4001141 Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/main@{#1095827}

… the highest of all fragments., a=testonly Automatic update from web-platform-tests [baselines] Make multicol first-baseline the highest of all fragments. To be symmetrical with the last-baseline. See: w3c/csswg-drafts#7856 Change-Id: I821b466c28fe2c448ad46c79edfd2cfe031198f3 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4001141 Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/main@{#1095827} -- wpt-commits: 5277a275db410eb9dbb85c80b352fe1de0e6374a wpt-pr: 38117

To be symmetrical with the last-baseline. See: w3c/csswg-drafts#7856 Change-Id: I821b466c28fe2c448ad46c79edfd2cfe031198f3 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4001141 Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/main@{#1095827}

… the highest of all fragments., a=testonly Automatic update from web-platform-tests [baselines] Make multicol first-baseline the highest of all fragments. To be symmetrical with the last-baseline. See: w3c/csswg-drafts#7856 Change-Id: I821b466c28fe2c448ad46c79edfd2cfe031198f3 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4001141 Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/main@{#1095827} -- wpt-commits: 5277a275db410eb9dbb85c80b352fe1de0e6374a wpt-pr: 38117

bfgeek added the Agenda+ label Oct 7, 2022

atanassov added this to Layout in October 26 meeting Oct 25, 2022

css-meeting-bot removed the Agenda+ label Nov 2, 2022

mozilla-apprentice mentioned this issue Nov 2, 2022

[css-align-3][css-multicol-1] First baseline of a multicol mozilla/wg-decisions#941

Closed

fantasai added Closed Accepted by CSSWG Resolution Needs Edits labels Nov 3, 2022

fantasai added css-align-3 Current Work css-multicol-1 Current Work labels Jan 19, 2023

fantasai added a commit that referenced this issue Jan 19, 2023

[css-align-3] Define multicol baselines as highest/lowest set. #7856 #…

c385021

…7639

fantasai removed the Needs Edits label Jan 19, 2023

fantasai added a commit that referenced this issue Jan 20, 2023

[css-align-3] Use alignment, not dominant, baseline. #7856 #7639

3325874

tabatkins added the Commenter Response Pending label Jan 20, 2023

chromium-wpt-export-bot mentioned this issue Jan 23, 2023

[baselines] Make multicol first-baseline the highest of all fragments. web-platform-tests/wpt#38117

Merged

rachelandrew added css-multicol-2 and removed css-multicol-1 Current Work labels Apr 5, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css-align-3][css-multicol-1] First baseline of a multicol #7856

[css-align-3][css-multicol-1] First baseline of a multicol #7856

bfgeek commented Oct 7, 2022

css-meeting-bot commented Nov 2, 2022

fantasai commented Nov 3, 2022

tabatkins commented Jan 19, 2023

fantasai commented Jan 20, 2023

fantasai commented Jan 20, 2023

[css-align-3][css-multicol-1] First baseline of a multicol #7856

[css-align-3][css-multicol-1] First baseline of a multicol #7856

Comments

bfgeek commented Oct 7, 2022

css-meeting-bot commented Nov 2, 2022

fantasai commented Nov 3, 2022

tabatkins commented Jan 19, 2023

fantasai commented Jan 20, 2023

fantasai commented Jan 20, 2023