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.
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
[css-align][css-grid][css-flexbox] wrong assumptions about baselines only occurring in the inline axis #197
Comments
Sorry for taking so long to fix this, it took us awhile to actually think things through. Here are the edits: Let us know if there's anything amiss with the edits, or if this seems problematic. |
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:
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. |
We could spec that the first baseline is synthesized from the border-box |
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 |
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. |
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 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 ? |
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. :) |
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. |
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
The text was updated successfully, but these errors were encountered: