Skip to content

Commit e5789d5

Browse files
fantasaitabatkins
fantasai
authored and
tabatkins
committed
[css-align-3][css-flexbox-1][css-grid-1] Improve container baseline finding algo w3c#7655 w3c#7641
* RESOLVED: When taking the baseline of a row of items, we check a shared first baseline, then a shared last baseline, then the first baseline of the first item. (And vice versa for last baselines.) * RESOLVED: Rowspanning cells participate only in first baseline alignment of their first row, and last baseline alignment in the last row. * RESOLVED: Table baselines match grid, per details above.
1 parent 7342685 commit e5789d5

4 files changed

Lines changed: 131 additions & 84 deletions

File tree

‎css-align-3/Overview.bs‎

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2153,16 +2153,36 @@ Determining the Baselines of a Box</h3>
21532153

21542154
<dt>table rows
21552155
<dd>
2156-
If any cells in the row participate in
2157-
''first baseline''/''last baseline'' alignment
2158-
along the [=inline axis=],
2159-
the first/last [=baseline set=] of the row
2160-
is <a>generated</a> from their shared <a>alignment baseline</a>
2161-
and the row's <a>first available font</a>,
2162-
after alignment has been performed.
2163-
Otherwise, the first/last [=baseline set=] of the row
2164-
is <a>synthesized</a> from the lowest and highest content edges of the cells in the row.
2165-
[[!CSS2]]
2156+
The first [=baseline set=] of a [=table row box=]
2157+
is taken from the first available of:
2158+
2159+
1. If any cells in the row participate in
2160+
first [=baseline alignment=] along the table’s [=inline axis=],
2161+
[=generate=] a [=baseline set=] from their shared [=alignment baseline=]
2162+
and the row’s [=first available font=],
2163+
after alignment has been performed.
2164+
2165+
2. Otherwise, if any cells in the row participate in
2166+
last [=baseline alignment=] along the table’s [=inline axis=],
2167+
[=generate=] from <em>that</em> [=alignment baseline=].
2168+
2169+
3. Otherwise, if any cells in the row have an [=inline-axis=] [=baseline set=] at all,
2170+
take the [=baseline set=] from the cell
2171+
with the <em>highest</em> ([=block-start=]&ndash;most) baseline
2172+
corresponding to the table's [=alignment baseline=].
2173+
2174+
4. Otherwise, [=synthesize=] from the lowest and highest [=content edges=]
2175+
of all the cells in the row.
2176+
(See [[!CSS2]].)
2177+
2178+
For this purpose,
2179+
any [=table cell=] that spans multiple rows
2180+
is ignored if it’s span does not start in this row;
2181+
except that for step 2,
2182+
it's ignored if its span does not <em>end</em> in this row.
2183+
2184+
Last baselines are analogous
2185+
(with “first”/“last” and “start”/“end” inverted).
21662186

21672187
Spanning cells participate only in the first/last row that they span
21682188
for the purpose of ''first baseline''/''last baseline''.

‎css-flexbox-1/Overview.bs‎

Lines changed: 29 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3460,24 +3460,35 @@ Flex Container Baselines</h3>
34603460
matches its <a>main axis</a>,
34613461
its baselines are determined as follows:
34623462

3463-
1. If any of the <a>flex items</a> on the flex container's [=startmost=]/[=endmost=] <a>flex line</a>
3464-
<a href="#baseline-participation">participate in baseline alignment</a>,
3465-
the flex container's first/last <a>main-axis baseline set</a>
3466-
is <a lt="generate baselines">generated</a> from
3467-
the shared <a>alignment baseline</a> of those <a>flex items</a>.
3468-
3469-
2. Otherwise, if the flex container has at least one <a>flex item</a>,
3470-
the flex container's first/last <a>main-axis baseline set</a>
3471-
is <a lt="generate baselines">generated</a> from
3472-
the <a>alignment baseline</a> of the [=startmost=]/[=endmost=] <a>flex item</a>.
3473-
(If that item has no <a>alignment baseline</a>
3474-
parallel to the flex container's <a>main axis</a>,
3475-
then one is first <a lt="synthesized baseline">synthesized</a>
3476-
from its border edges.)
3477-
3478-
3. Otherwise, the flex container has no first/last main-axis <a>baseline set</a>,
3479-
and one is <a lt="synthesize baselines">synthesized</a> if needed
3480-
according to the rules of its <a>alignment context</a>.
3463+
1. If any of the [=flex items=] on the flex container's [=startmost=] [=flex line=]
3464+
participate in first [=baseline alignment=] along the [=main axis=],
3465+
<a lt="generate baselines">generate</a> a [=baseline set=] from their shared [=alignment baseline=]
3466+
and the [=flex container's=] [=first available font=].
3467+
3468+
2. Otherwise, if any of the [=flex items=] on the flex container's [=startmost=] [=flex line=]
3469+
participate in last [=baseline alignment=] along the [=main axis=],
3470+
<a lt="generate baselines">generate</a> a [=baseline set=] from their shared [=alignment baseline=]
3471+
and the [=flex container's=] [=first available font=].
3472+
3473+
3. Otherwise, if any [=flex items=] in the [=startmost=] [=flex line=]
3474+
have a [=baseline set=] along the [=main axis=],
3475+
take the [=baseline set=] from the [=flex item=]
3476+
with the <em>highest</em> ([=block-start=]&ndash;most) baseline
3477+
corresponding to the [=flex container's=]'s [=alignment baseline=],
3478+
preferring the first in [=order-modified document order=]
3479+
if multiple items are tied.
3480+
3481+
4. Otherwise, if there are any [=flex items=] at all,
3482+
<a lt="synthesize baselines">synthesize</a> a [=baseline set=]
3483+
from the [=startmost=] [=flex item=] on the [=startmost=] line.
3484+
3485+
5. Otherwise, the [=flex container=] has no first [=main-axis=] <a>baseline set</a>.
3486+
(One is <a lt="synthesize baselines">synthesized</a>
3487+
from the [=flex container=] itself if needed,
3488+
according to the rules of its <a>alignment context</a>.)
3489+
3490+
Last baselines are analogous
3491+
(with “first”/“last” and “start”/“end” inverted).
34813492

34823493
<dt>first/last <dfn export id="cross-axis-baseline"
34833494
lt="cross-axis baseline set|first cross-axis baseline set|last cross-axis baseline set">

‎css-grid-1/Overview.bs‎

Lines changed: 36 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -3730,36 +3730,44 @@ Aligning the Grid: the 'justify-content' and 'align-content' properties</h3>
37303730
<h3 id='grid-baselines'>
37313731
Grid Container Baselines</h3>
37323732

3733-
The first (last) baselines of a <a>grid container</a>
3734-
are determined as follows:
3733+
The first [=baseline set=] of a [=grid container=]
3734+
is taken from the first available of:
3735+
3736+
1. If any [=grid items=] intersecting the first ([=block-start=]&ndash;most) non-empty [=track=]
3737+
participate in first [=baseline alignment=] along the relevant axis,
3738+
<a lt="generate baselines">generate</a> a [=baseline set=] from their shared [=alignment baseline=]
3739+
and the [=grid container=]’s [=first available font=],
3740+
after alignment has been performed.
3741+
3742+
2. Otherwise, if any [=grid items=] intersecting that track participate in
3743+
last [=baseline alignment=] along the relevant axis,
3744+
<a lt="generate baselines">generate</a> from <em>that</em> [=alignment baseline=].
3745+
3746+
3. Otherwise, if any [=grid items=] intersecting that track
3747+
have a [=baseline set=] in the relevant axis at all,
3748+
take the [=baseline set=] from the [=grid item=]
3749+
with the <em>highest</em> ([=block-start=]&ndash;most) baseline
3750+
corresponding to the [=grid container=]'s [=alignment baseline=],
3751+
preferring the first in [=grid order=]
3752+
if multiple items are tied.
3753+
3754+
4. Otherwise, if there are any [=grid items=] at all,
3755+
<a lt="synthesize baselines">synthesize</a> a [=baseline set=]
3756+
from the first [=grid item=] in [=grid order=].
3757+
3758+
5. Otherwise, the [=grid container=] has no first <a>baseline set</a> in the relevant axis.
3759+
(One is <a lt="synthesize baselines">synthesized</a>
3760+
from the [=grid container=] itself if needed,
3761+
according to the rules of its <a>alignment context</a>.)
37353762

3736-
<ol>
3737-
<li>
3738-
Find the first (last) row of the [=grid container=]
3739-
containing at least one [=grid item=].
3740-
3741-
If any of the [=grid items=] intersecting this row
3742-
participate in [=baseline alignment=] in that row,
3743-
the grid container's <a>baseline set</a>
3744-
is <a lt="generate baselines">generated</a> from
3745-
the shared <a>alignment baseline</a> of those <a>grid items</a>.
3746-
3747-
Otherwise,
3748-
the grid container's first (last) baseline set
3749-
is <a lt="generate baselines">generated</a> from
3750-
the <a>alignment baseline</a> of the first (last) <a>grid item</a>
3751-
in row-major <a>grid order</a> (according to the <a>writing mode</a> of the <a>grid container</a>).
3752-
If the [=grid item=] has no <a>alignment baseline</a> in the grid's inline axis,
3753-
then one is first <a lt="synthesize baselines">synthesized</a>
3754-
from its border edges.
3763+
For this purpose,
3764+
any [=grid item=] that spans multiple tracks
3765+
is ignored if it’s span does not start in the indicated track;
3766+
except that for step 2,
3767+
it's ignored if its span does not <em>end</em> in the track.
37553768

3756-
<li>
3757-
If the [=grid container=] does not contain any [=grid items=],
3758-
the grid container has no first (last) <a>baseline set</a>,
3759-
and one is <a lt="synthesize baselines">synthesized</a> if needed
3760-
according to the rules of its <a>alignment context</a>.
3761-
Exit from this algorithm.
3762-
</ol>
3769+
Last baselines are analogous
3770+
(with “first”/“last” and “start”/“end” inverted).
37633771

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

‎css-grid-2/Overview.bs‎

Lines changed: 36 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4289,36 +4289,44 @@ Aligning the Grid: the 'justify-content' and 'align-content' properties</h3>
42894289
<h3 id='grid-baselines'>
42904290
Grid Container Baselines</h3>
42914291

4292-
The first (last) baselines of a <a>grid container</a>
4293-
are determined as follows:
4292+
The first [=baseline set=] of a [=grid container=]
4293+
is taken from the first available of:
4294+
4295+
1. If any [=grid items=] intersecting the first ([=block-start=]&ndash;most) non-empty [=track=]
4296+
participate in first [=baseline alignment=] along the relevant axis,
4297+
<a lt="generate baselines">generate</a> a [=baseline set=] from their shared [=alignment baseline=]
4298+
and the [=grid container=]’s [=first available font=],
4299+
after alignment has been performed.
4300+
4301+
2. Otherwise, if any [=grid items=] intersecting that track participate in
4302+
last [=baseline alignment=] along the relevant axis,
4303+
<a lt="generate baselines">generate</a> from <em>that</em> [=alignment baseline=].
4304+
4305+
3. Otherwise, if any [=grid items=] intersecting that track
4306+
have a [=baseline set=] in the relevant axis at all,
4307+
take the [=baseline set=] from the [=grid item=]
4308+
with the <em>highest</em> ([=block-start=]&ndash;most) baseline
4309+
corresponding to the [=grid container=]'s [=alignment baseline=],
4310+
preferring the first in [=grid order=]
4311+
if multiple items are tied.
4312+
4313+
4. Otherwise, if there are any [=grid items=] at all,
4314+
<a lt="synthesize baselines">synthesize</a> a [=baseline set=]
4315+
from the first [=grid item=] in [=grid order=].
4316+
4317+
5. Otherwise, the [=grid container=] has no first <a>baseline set</a> in the relevant axis.
4318+
(One is <a lt="synthesize baselines">synthesized</a>
4319+
from the [=grid container=] itself if needed,
4320+
according to the rules of its <a>alignment context</a>.)
42944321

4295-
<ol>
4296-
<li>
4297-
Find the first (last) row of the [=grid container=]
4298-
containing at least one [=grid item=].
4299-
4300-
If any of the [=grid items=] intersecting this row
4301-
participate in [=baseline alignment=] in that row,
4302-
the grid container's <a>baseline set</a>
4303-
is <a lt="generate baselines">generated</a> from
4304-
the shared <a>alignment baseline</a> of those <a>grid items</a>.
4305-
4306-
Otherwise,
4307-
the grid container's first (last) baseline set
4308-
is <a lt="generate baselines">generated</a> from
4309-
the <a>alignment baseline</a> of the first (last) <a>grid item</a>
4310-
in row-major <a>grid order</a> (according to the <a>writing mode</a> of the <a>grid container</a>).
4311-
If the [=grid item=] has no <a>alignment baseline</a> in the grid's inline axis,
4312-
then one is first <a lt="synthesize baselines">synthesized</a>
4313-
from its border edges.
4322+
For this purpose,
4323+
any [=grid item=] that spans multiple tracks
4324+
is ignored if it’s span does not start in the indicated track;
4325+
except that for step 2,
4326+
it's ignored if its span does not <em>end</em> in the track.
43144327

4315-
<li>
4316-
If the [=grid container=] does not contain any [=grid items=],
4317-
the grid container has no first (last) <a>baseline set</a>,
4318-
and one is <a lt="synthesize baselines">synthesized</a> if needed
4319-
according to the rules of its <a>alignment context</a>.
4320-
Exit from this algorithm.
4321-
</ol>
4328+
Last baselines are analogous
4329+
(with “first”/“last” and “start”/“end” inverted).
43224330

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

0 commit comments

Comments
 (0)