Skip to content

[css-align-3][css-flexbox-1][css-grid-1] Improve container baseline finding algo #7655 #7641 #8341

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

[css-align-3][css-flexbox-1][css-grid-1] Improve container baseline finding algo #7655 #7641 #8341

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1da2167
[css-align-3][css-flexbox-1][css-grid-1] Improve container baseline f…
fantasai Jan 20, 2023
911f2d1
[css-align-3][css-flexbox-1][css-grid-1] Improve container baseline f…
fantasai Oct 30, 2023
f45bf01
[css-align-3] Align table baseline alignment with compat requirements
fantasai Oct 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 39 additions & 11 deletions css-align-3/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2218,24 +2218,52 @@ Determining the Baselines of a Box</h2>
<dt>tables
<dd>
The first/last [=baseline set=] of a table box
is the first/last [=baseline set=] of its first/last row.
is the first/last [=baseline set=] of its first/last row
(after any reordering of [=table row groups=]).

When finding the first/last baseline set of an inline-block,
any baselines contributed by table boxes must be skipped.
(This quirk is a legacy behavior from [[CSS2]].)

<dt>table rows
<dd>
If any cells in the row participate in
''first baseline''/''last baseline'' alignment
along the [=inline axis=],
the first/last [=baseline set=] of the row
is <a>generated</a> from their shared <a>alignment baseline</a>
and the row's <a>first available font</a>,
after alignment has been performed.
Otherwise, the first/last [=baseline set=] of the row
is <a>synthesized</a> from the lowest and highest content edges of the cells in the row.
[[!CSS2]]
The first [=baseline set=] of a [=table row box=]
is taken from the first available of:

1. If any cells in the row participate in
first [=baseline alignment=] along the table’s [=inline axis=],
[=generate=] a [=baseline set=] from their shared [=alignment baseline=]
and the row’s [=first available font=],
after alignment has been performed.

2. Otherwise, if any cells in the row participate in
last [=baseline alignment=] along the table’s [=inline axis=],
[=generate=] from <em>that</em> [=alignment baseline=].

<!-- Other layout models have this step, but for compat reasons tables can't.
3. Otherwise, if any cells in the row have an [=inline-axis=] [=baseline set=] at all,
take the [=baseline set=] from the cell
with the <em>highest</em> ([=block-start=]&ndash;most) baseline
corresponding to the table's [=alignment baseline=].
-->

4. Otherwise, if the row is not empty,
[=synthesize=] from the lowest and highest [=content edges=]
of all the cells in the row.
See [[css2#height-layout]].

5. Otherwise,
use the [=block-start=] [=content edge=] of the [=table row box=] itself
as the [=alignment baseline=].

For this purpose,
any [=table cell=] that spans multiple rows
is ignored if it’s span does not start in this row;
except that for step 2,
it's ignored if its span does not <em>end</em> in this row.

<em>Last baselines are analogous
(with “first”/“last” and “start”/“end” inverted).</em>

<dt>flex containers
<dd>
Expand Down
44 changes: 26 additions & 18 deletions css-flexbox-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2280,24 +2280,32 @@ Flex Container Baselines</h3>
matches its <a>main axis</a>,
its baselines are determined as follows:

1. If any of the <a>flex items</a> on the flex container's [=startmost=]/[=endmost=] <a>flex line</a>
<a href="#baseline-participation">participate in baseline alignment</a>,
the flex container's first/last <a>main-axis baseline set</a>
is <a lt="generate baselines">generated</a> from
the shared <a>alignment baseline</a> of those <a>flex items</a>.

2. Otherwise, if the flex container has at least one <a>flex item</a>,
the flex container's first/last <a>main-axis baseline set</a>
is <a lt="generate baselines">generated</a> from
the <a>alignment baseline</a> of the [=startmost=]/[=endmost=] <a>flex item</a>.
(If that item has no <a>alignment baseline</a>
parallel to the flex container's <a>main axis</a>,
then one is first <a lt="synthesized baseline">synthesized</a>
from its border edges.)

3. Otherwise, the flex container has no first/last main-axis <a>baseline set</a>,
and one is <a lt="synthesize baselines">synthesized</a> if needed
according to the rules of its <a>alignment context</a>.
1. If any of the [=flex items=] on the flex container's [=startmost=] [=flex line=]
participate in first [=baseline alignment=] along the [=main axis=],
<a lt="generate baselines">generate</a> a [=baseline set=] from their shared [=alignment baseline=]
and the [=flex container's=] [=first available font=].

2. Otherwise, if any of the [=flex items=] on the flex container's [=startmost=] [=flex line=]
participate in last [=baseline alignment=] along the [=main axis=],
<a lt="generate baselines">generate</a> a [=baseline set=] from their shared [=alignment baseline=]
and the [=flex container's=] [=first available font=].

3. Otherwise, if any [=flex items=] in the [=startmost=] [=flex line=]
have a [=baseline set=] along the [=main axis=],
take the [=baseline set=] from the first such [=flex item=]
in [=order-modified document order=].

4. Otherwise, if there are any [=flex items=] at all,
<a lt="synthesize baselines">synthesize</a> a [=baseline set=]
from the [=startmost=] [=flex item=] on the [=startmost=] line.

5. Otherwise, the [=flex container=] has no first [=main-axis=] <a>baseline set</a>.
(One is <a lt="synthesize baselines">synthesized</a>
from the [=flex container=] itself if needed,
according to the rules of its <a>alignment context</a>.)

Last baselines are analogous
(with “first”/“last” and “start”/“end” inverted).

<dt>first/last <dfn export id="cross-axis-baseline"
lt="cross-axis baseline set|first cross-axis baseline set|last cross-axis baseline set">
Expand Down
57 changes: 31 additions & 26 deletions css-grid-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3714,36 +3714,41 @@ Aligning the Grid: the 'justify-content' and 'align-content' properties</h3>
<h3 id='grid-baselines'>
Grid Container Baselines</h3>

The first (last) baselines of a <a>grid container</a>
are determined as follows:
The first [=baseline set=] of a [=grid container=]
is taken from the first available of:

<ol>
<li>
Find the first (last) row of the [=grid container=]
containing at least one [=grid item=].
1. If any [=grid items=] intersecting the first ([=block-start=]&ndash;most) non-empty [=track=]
participate in first [=baseline alignment=] along the relevant axis,
<a lt="generate baselines">generate</a> a [=baseline set=] from their shared [=alignment baseline=]
and the [=grid container=]’s [=first available font=],
after alignment has been performed.

If any of the [=grid items=] intersecting this row
participate in [=baseline alignment=] in that row,
the grid container's <a>baseline set</a>
is <a lt="generate baselines">generated</a> from
the shared <a>alignment baseline</a> of those <a>grid items</a>.
2. Otherwise, if any [=grid items=] intersecting that track participate in
last [=baseline alignment=] along the relevant axis,
<a lt="generate baselines">generate</a> from <em>that</em> [=alignment baseline=].

Otherwise,
the grid container's first (last) baseline set
is <a lt="generate baselines">generated</a> from
the <a>alignment baseline</a> of the first (last) <a>grid item</a>
in row-major <a>grid order</a> (according to the <a>writing mode</a> of the <a>grid container</a>).
If the [=grid item=] has no <a>alignment baseline</a> in the grid's inline axis,
then one is first <a lt="synthesize baselines">synthesized</a>
from its border edges.
3. Otherwise, if any [=grid items=] intersecting that track
have a [=baseline set=] in the relevant axis at all,
take the [=baseline set=] from the first such [=grid item=]
in [=grid order=].

<li>
If the [=grid container=] does not contain any [=grid items=],
the grid container has no first (last) <a>baseline set</a>,
and one is <a lt="synthesize baselines">synthesized</a> if needed
according to the rules of its <a>alignment context</a>.
Exit from this algorithm.
</ol>
4. Otherwise, if there are any [=grid items=] at all,
<a lt="synthesize baselines">synthesize</a> a [=baseline set=]
from the first [=grid item=] in [=grid order=].

5. Otherwise, the [=grid container=] has no first <a>baseline set</a> in the relevant axis.
(One is <a lt="synthesize baselines">synthesized</a>
from the [=grid container=] itself if needed,
according to the rules of its <a>alignment context</a>.)

For this purpose,
any [=grid item=] that spans multiple tracks
is ignored if it’s span does not start in the indicated track;
except that for step 2,
it's ignored if its span does not <em>end</em> in the track.

Last baselines are analogous
(with “first”/“last” and “start”/“end” inverted).

<dfn export lt="grid order|grid-modified document order">Grid-modified document order (grid order)</dfn>
is the order in which <a>grid items</a> are encountered
Expand Down
64 changes: 34 additions & 30 deletions css-grid-2/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4266,36 +4266,40 @@ Aligning the Grid: the 'justify-content' and 'align-content' properties</h3>
<h3 id='grid-baselines'>
Grid Container Baselines</h3>

The first (last) baselines of a <a>grid container</a>
are determined as follows:

<ol>
<li>
Find the first (last) row of the [=grid container=]
containing at least one [=grid item=].

If any of the [=grid items=] intersecting this row
participate in [=baseline alignment=] in that row,
the grid container's <a>baseline set</a>
is <a lt="generate baselines">generated</a> from
the shared <a>alignment baseline</a> of those <a>grid items</a>.

Otherwise,
the grid container's first (last) baseline set
is <a lt="generate baselines">generated</a> from
the <a>alignment baseline</a> of the first (last) <a>grid item</a>
in row-major <a>grid order</a> (according to the <a>writing mode</a> of the <a>grid container</a>).
If the [=grid item=] has no <a>alignment baseline</a> in the grid's inline axis,
then one is first <a lt="synthesize baselines">synthesized</a>
from its border edges.

<li>
If the [=grid container=] does not contain any [=grid items=],
the grid container has no first (last) <a>baseline set</a>,
and one is <a lt="synthesize baselines">synthesized</a> if needed
according to the rules of its <a>alignment context</a>.
Exit from this algorithm.
</ol>
The first [=baseline set=] of a [=grid container=]
is taken from the first available of:

1. If any [=grid items=] intersecting the first ([=block-start=]&ndash;most) non-empty [=track=]
participate in first [=baseline alignment=] along the relevant axis,
<a lt="generate baselines">generate</a> a [=baseline set=] from their shared [=alignment baseline=]
and the [=grid container=]’s [=first available font=],
after alignment has been performed.

2. Otherwise, if any [=grid items=] intersecting that track participate in
last [=baseline alignment=] along the relevant axis,
<a lt="generate baselines">generate</a> from <em>that</em> [=alignment baseline=].

3. Otherwise, if any [=grid items=] intersecting that track
have a [=baseline set=] in the relevant axis at all,
take the [=baseline set=] from the first such [=grid item=] in [=grid order=].

4. Otherwise, if there are any [=grid items=] at all,
<a lt="synthesize baselines">synthesize</a> a [=baseline set=]
from the first [=grid item=] in [=grid order=].

5. Otherwise, the [=grid container=] has no first <a>baseline set</a> in the relevant axis.
(One is <a lt="synthesize baselines">synthesized</a>
from the [=grid container=] itself if needed,
according to the rules of its <a>alignment context</a>.)

For this purpose,
any [=grid item=] that spans multiple tracks
is ignored if it’s span does not start in the indicated track;
except that for step 2,
it's ignored if its span does not <em>end</em> in the track.

Last baselines are analogous
(with “first”/“last” and “start”/“end” inverted).

<dfn export lt="grid order|grid-modified document order">Grid-modified document order (grid order)</dfn>
is the order in which <a>grid items</a> are encountered
Expand Down