Skip to content
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

Jump to bottom

[css-align][css-grid] Synthesizing baselines for elements orthogonal to the baseline-axis #1038

Closed
javifernandez opened this issue Feb 15, 2017 · 5 comments
Closed

[css-align][css-grid] Synthesizing baselines for elements orthogonal to the baseline-axis #1038

javifernandez opened this issue Feb 15, 2017 · 5 comments
Labels
Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. css-align-3 Current Work

Comments

@javifernandez
Copy link
Contributor

The CSS Box Alignment spec states the following:

https://drafts.csswg.org/css-align-3/#baseline-terms

For this purpose, boxes whose block flow direction is parallel to the alignment context’s axis are treated as having a block flow direction orthogonal to the alignment context’s axis and directed end-ward relative to the box that establishes the alignment context, and their baselines are synthesized accordingly, exactly as for replaced elements and other boxes that have no natural baseline.

When applied to actual orthogonal items (orthogonal flow respecting the grid container), the text above matches perfectly to what the CSS Writing Modes spec states about synthesizing baselines:

https://drafts.csswg.org/css-writing-modes-3/#replaced-baselines

The alphabetic baseline is assumed to be at the under margin edge.

Well, the CSS Box Alignment spec clarifies that the edges used to synthesize the baseline depend on the formatting context:

https://drafts.csswg.org/css-align-3/#synthesize-baselines

Note: The edges used to synthesize baselines from a box depend on their formatting context: inline-level boxes synthesize from their margin edges [CSS-INLINE-3], table cells synthesize from their content edges [CSS2], and grid and flex items synthesize from their border edges [CSS-GRID-1] [CSS-FLEXBOX-1].

Hence, for grid items it seems that under border edge must be used to synthesize elements orthogonal to the baseline-axis (or equivalent, parallel to the alignment context’s axis). As I said, when applied to actual orthogonal boxes this under is resolved as bottom or left depending on the grid item's writing-mode. This makes a lot of sense, so far.
https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical

But the spec states that we should treat in the same way parallel elements when they are orthogonal to the baseline-axis. Hence, that would imply that we will have to resolve the under logical direction assuming those elements are "orthogonal" to the grid container, instead of using strictly their writing mode. Is this assumption right ?

I'm attaching a picture of what I've implemented, so far.
baseline-parallel-items-orthogonal-baseline-axis
@javifernandez javifernandez changed the title [css-align] Synthesizing baselines for elements orthogonal to the baseline-axis [css-align][css-grid] Synthesizing baselines for elements orthogonal to the baseline-axis Feb 15, 2017
@javifernandez
Copy link
Contributor Author

Please, @tabatkins @fantasai could you take a look at this issue ? Not that it's specially urgent, but I m afraid it gets lost, since it's not even tagged yet. Thanks.

@fantasai fantasai added the css-align-3 Current Work label Mar 30, 2017
@fantasai
Copy link
Collaborator

fantasai commented Apr 7, 2017

Hi @javifernandez , you lost me in the last paragraph. Can you give an example in code, please? :)

@javifernandez
Copy link
Contributor Author 

<style>
    .grid { display: grid; grid-auto-flow: row; }
    .contentStart { align-content: start; justify-content: start; }
    .justifyItemsBaseline { justify-items: baseline; }
    .alignItemsStart { align-items: start; }
 </style>
 <div class="grid contentStart justifyItemsBaseline alignItemsStart">
   <div>A</div><div>A</div><div>A</div><div>A</div>
 </div>

Only the row-axis (justify-self) applies as baseline-axis, which determines we must select items which
share a column-like alignment context (the first and only column, in this case); the four items share such first column context.

All items have a block flow direction parallel to the alignment context's axis, hence we must treat them as:

having a block flow direction orthogonal to the alignment context’s axis and directed end-ward relative to the box that establishes the alignment context, ...

As the CSS Sizing spec states, we must synthesized the items' baseline using their under border edge. If we use the table defined in the CSS Writing Modes spec, we should map under to bottom because the items are horizontal. However, that doesn't make sense because the baseline-axis is the row axis, in this case, the horizontal axis.

So, I assumed that we must treat those items as orthogonal to the grid container, hence vertical, so that we map under to left

I wonder whether my assumption is correct, and in that case, whether it's properly described in the specs.

fantasai added a commit that referenced this issue May 2, 2017
@fantasai
[css-align] Fix ambiguous rules about faking an appropriately-oriente…
c4b3f7c 
…d writing mode. #1038
@fantasai
Copy link
Collaborator

fantasai commented May 2, 2017

You're right, it's not properly described in the specs. We've attempted to fix that. Let us know if it seems okay now? :)

@javifernandez
Copy link
Contributor Author

Good, thanks fr clarifying this in the specs.

@fantasai fantasai added Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. and removed Commenter Response Pending labels May 4, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. css-align-3 Current Work
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@FremyCompany @fantasai @javifernandez