Repository navigation
[css-align-3][css-tables-3] Define last baseline for tables. #7655
Description
"The maximum distance between the top of the cell box and the baseline over all cells that have 'vertical-align: baseline' is used to set the baseline of the row. If a row doesn’t have any cell that has 'vertical-align: baseline', the baseline of that row is the bottom content edge of the lowest cell in the row.
The baseline of a table-root is the baseline of its first row, if any. Otherwise, it is the bottom content edge of the table-root."
This definition for first baseline is good! - We also need to define the last baseline behaviour.
Something like:
"The last baseline is defined as:
- The maxiumum distance between the top of the cell box and the last baseline over all the non-rowspanned cells that have 'vertical-align: baseline' is used to set the baseline of the row.
- If the row doesn't have any non-rowspanned cell that has 'vertical-align: basleine', the baseline of that row is the bottom content edge of the lowest cell in the row.
The last baseline of a table-root is the baseline of its last row, if any."
Ian
Activity
bfgeek commentedon Aug 29, 2022
(note importantly this definition does/will ignore captions at the top/bottom of the table).
tabatkins commentedon Aug 29, 2022
This should use the same logic as we decide in #7641, wrt using cells with last-baseline alignment, and maybe falling back to first-baseline (if we decide to do that for flexbox) before falling back to a synthesized baseline.
Also it should be checking for
align-content: last baseline, notvertical-align: baseline; see https://www.w3.org/TR/css-align-3/#distribution-block which defines thatalign-content: normaldefers tovertical-alignbut other values override that behavior.bfgeek commentedon Sep 15, 2022
testcase showing lowest content edge baseline: https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=10716
css-meeting-bot commentedon Sep 15, 2022
The CSS Working Group just discussed
last baseline of tables, and agreed to the following:RESOLVED: Table baselines match grid, per details above.RESOLVED: Rowspanning cells particpate only in first baseline alignment of their first row, and last baseline alignment in the last rowThe full IRC log of that discussion
<TabAtkins> Topic: last baseline of tables<fantasai> github: https://github.com//issues/7655
<TabAtkins> iank_: Tables work by taking the first baseline from the first row in the larger table
<TabAtkins> iank_: Importantly, we skip captions, this is intentional
<TabAtkins> iank_: So how do we determine last baseline?
<TabAtkins> iank_: First relatively obvious bit is we probably want the last row
<TabAtkins> iank_: Given the reoslution we just had for flex and grid, we can probably do something similar
<TabAtkins> iank_: So if you've got a lot of baseline-aligned items, we'll take the first-baseline of those items and use it as the table's last baseline; toherwise we'll synthesize
<TabAtkins> fantasai: Alignment expands baseline alignment for tables, says align-content works on cells; "normal" looks at vertical-align, but you can use first/last baseline normally
<heycam> q+
<TabAtkins> fantasai: So probably just want to take literally the grid behavior and apply it here
<TabAtkins> iank_: Yeah, fine with that
<TabAtkins> iank_: Not implementing it yet, but seems fine
<TabAtkins> iank_: Important is to not consider captions
<TabAtkins> fantasai: agreed
<fremy> q+
<TabAtkins> iank_: (I'll show Firefox folks some cases for why caption should be ignored later)
<Rossen_> ack heycam
<TabAtkins> heycam: How do spanning cells impact this?
<TabAtkins> iank_: it gets a little complex
<TabAtkins> iank_: this wouldn't apply until impls support align-content; if something is spanning multiple rows, its first baseline currently only contributes to its first spanned row
<TabAtkins> iank_: And last-baseline, you can only get spanned cells affecting the last baseline if you support align-content:last-baseline
<TabAtkins> fantasai: So a spanned cell only affects first baseline alignment in its first row, and last baseline in its last row, and that's it
<Rossen_> ack fremy
<TabAtkins> fantasai: so it doesn't affect first-baseline alignmetn in its last row, etc
<TabAtkins> fremy: When you synthesize, do you include the table border?
<TabAtkins> iank_: TAbles always have a valid baseline - it's complicated - if there's a tbody, you ahve a baseline bc you synthesize it using the content edge of the first row
<TabAtkins> iank_: I think if you have captions but no body there's no exported baseline, so you'd synthesize from the table border
<TabAtkins> iank_: Need to do some investigation on our behavior
<TabAtkins> fantasai: proposed resolution: finding first/last baseline of a table cell works same as in grid
<TabAtkins> iank_: And last baseline of a table is taken from teh corret baseline-sharing group in the alst table row
<TabAtkins> Rossen_: objections?
<TabAtkins> RESOLVED: Table baselines match grid, per details above.
<fantasai> RESOLVED: Rowspanning cells particpate only in first baseline alignment of their first row, and last baseline alignment in the last row
<TabAtkins> fremy: Should I modify Tables?
<TabAtkins> fantasai: We might be able to do it generically in Align.
<TabAtkins> fantasai: If we can't we'll ping you.
[last-baseline] Propagate last-baseline from tables.
[last-baseline] Propagate last-baseline from tables.
[last-baseline] Propagate last-baseline from tables.
Bug 1791612 [wpt PR 35976] - [last-baseline] Propagate last-baseline …
Bug 1791612 [wpt PR 35976] - [last-baseline] Propagate last-baseline …
[css-align-3][css-flexbox-1][css-grid-1] Improve container baseline f…
fantasai commentedon Jan 20, 2023
@tabatkins and I have drawn up a PR for this at #8341
[css-align-3][css-flexbox-1][css-grid-1] Improve container baseline f…
[css-align-3][css-flexbox-1][css-grid-1] Improve container baseline f…
[css-align-3][css-flexbox-1][css-grid-1] Improve container baseline f…
[css-align-3] Clarify that spanning cells only participate in the fir…
Bug 1791612 [wpt PR 35976] - [last-baseline] Propagate last-baseline …
[css-align-3][css-flexbox-1][css-grid-1] Improve container baseline f…
[css-align-3][css-flexbox-1][css-grid-1] Improve container baseline f…