[css-align][css-grid][css-flexbox] wrong assumptions about baselines only occurring in the inline axis #197
Description
A few CSS specs seems to assume boxes only have baselines in their inline axis.
That seems wrong since Grid and Tables have baselines in both axis:
https://drafts.csswg.org/css-grid/#grid-baselines
https://drafts.csswg.org/css-align/#baseline-export
For example, if an inline-grid is placed on a block line and its writing-mode is orthogonal
to the block, then I think it should be baseline-aligned using its block-axis baseline.
So if there is a baseline-aligned group of items in its first column, it is aligned on the line.
Here are a few spec snippets that needs to be corrected (there may be more):
https://drafts.csswg.org/css-align/#baseline-terms
"share an alignment context whose axis is parallel to their inline axis"
This should instead say something like:
"share an alignment context whose axis is parallel to an axis for which the box has a baseline"
https://drafts.csswg.org/css-align/#baseline-align-content
"whichever matches its inline axis" (three times)
https://drafts.csswg.org/css-align/#baseline-align-self
"inline axis" (twice)
https://drafts.csswg.org/css-grid/#grid-baselines
"A grid item participates in baseline alignment in a particular dimension if its value for align-self or
justify-self, as appropriate, is baseline and its inline axis is parallel to that dimension."
s/and its inline axis is parallel/ and it has a baseline parallel/
(BTW, that whole statement above is redundant and can be removed since CSS Align
defines when a grid item participates in baseline alignment. It also seems misplaced
since this chapter is about grid container baselines.)
https://drafts.csswg.org/css-flexbox/#align-items-property
"baseline
If the flex item’s inline axis is the same as the cross axis, this value is identical to flex-start.
Otherwise, it participates in baseline alignment:..."
That seems wrong if the flex item is a grid container for example.
Thanks,
Mats
Activity
fantasai commentedon Jul 19, 2016
Sorry for taking so long to fix this, it took us awhile to actually think things through. Here are the edits:
3877c16
We think we've fixed everything as you suggested. The one thing to note is that we added a distinction between “natural” baselines and “synthesized” baselines. This is because synthesizing block-axis baselines makes no sense in most cases--you'd actually want to use the fallback alignment in such cases. (This is what Flexbox was doing, where it was selecting only items with inline axis == main axis.) However, some situations (mainly inline-level layout) requires baselines to always be present, and synthesizes them if they're missing.
Let us know if there's anything amiss with the edits, or if this seems problematic.
fantasai commentedon Aug 16, 2016
OK, so I sat down with some people at Microsoft to go over this, and it seems we have a problem: block-axis baselines aren't really a thing that should exist for a box. The problem is illustrated by this example:
Imagine a grid with three items in a column:
If we try to baseline-align the first column, which baseline do we use for the horizontal-tb item? The vertical-lr and vertical-rl items are in independent baseline-sharing groups: their first baselines are on the left and right sides of the column, respectively. But the horizontal-tb item has no reasonable way to choose left or right as corresponding to "first".
So my conclusion is that we should remove the concept of block-axis baselines. A grid column might have baseline alignment along its block axis among items with orthogonal flows, but it does not propagate that up to the grid container.
fantasai commentedon Sep 2, 2016
Ok, checked in c30a655 and a9bc8dd
See also #373
MatsPalmgren commentedon Sep 3, 2016
We could spec that the first baseline is synthesized from the border-box
start edge [for block containers]. Then it should participate in
first-baseline alignment with the vertical-lr item.
I don't understand why you see this as a problem.
fantasai commentedon Sep 5, 2016
On 09/03/2016 07:07 PM, Mats Palmgren wrote:
Why would it participate with the vertical-lr item and not the vertical-rl item?
~fantasai
fantasai commentedon Sep 20, 2016
CSSWG discussed block-axis baselines today and decided it's not worth the complexity. If at some point in the future, use cases are compelling we could reconsider, but for now boxes can only have inline-axis baselines. (Baseline alignment of an orthogonal flow will require synthesizing a baseline for that box, as for boxes that don't have a baseline.)
Please let me know if you can accept this resolution.
javifernandez commentedon Oct 13, 2016
I found out a baseline test case for flexbox that made me think on this issue about grid's block-axis baseline. Let's consider the following flexbox case:
I've been working under the assumption that it makes sense that 1-row/column grid should behave pretty similar to flexbox. I think flexbox's column-flow can be easily emulated with 1 column grid.
When computing flexbox container's baseline it doesn't have a limitation of row/column
structures, so any flexitem will be considered for the operation. In the case described above, it will use the item with 'baseline' text, since it has to respect document-order. However, when using a grid like example, the only way to emulate column-revers is to put that element in the second row, which
would discard it for determining the container's baseline.
So, my first doubt is whether or not my original assumption of similar behavior makes sense or not. If it does make sense, how we could produce the same baseline with grid ? Isn't what flexbox is doing some kind of block-axis baseline ?
fantasai commentedon Nov 25, 2016
The example you're talking about doesn't involve any block-axis alignment. (The cross axis is the inline axis in this case.) It does raise the issue of whether a flex container should be using the first document-order item in such a case. :)
javifernandez commentedon Nov 25, 2016
Yes, you are right. The issue has nothing to do with block-axis alignment, but with the difference between flex and grid on the later giving more priority to the grid-order than the document-order.
Clarify that invalid easings throw when processing a keyframes argument