Re: [csswg-drafts] [css-align][css-grid] Inconsistence on Baseline Alignment terminology for orthogonal flows

On 11/26/2016 02:28 AM, fantasai wrote:
> Okay, I checked in some changes to address this using my best
> recollection of what the WG resolved. :) Let me know if it makes 
> yet. 3279299

After analyzing the changes and trying to implement them I've got some
 additional doubts, 
let's see if we can clarify them with an example. 

> A baseline-sharing group is composed of boxes that participate in 
baseline alignment together. This is possible only if they
>     * Share an alignment context along an axis perpendicular to 
their baseline alignment axis.
>     * Have compatible baseline alignment preferences (i.e., the 
baselines that want to align are on the same side of the alignment 

1- What does "baseline alignment axis" exactly mean ? Is it perhaps 
the grid axis an alignment property with a <baseline-position> value 
applies to ?  (column-axis in case of align-self and row-axis in case 
of justify-self)

2- Given that my assumption on the issue 1 is correct, let's consider 
the following example:

<div style="display: grid; align-items: baseline; justify-items: 
baseline; grid-auto-flow: column;>
    <div style="writing-mode: vertical-lr">A</div>
    <div style="writing-mode: vertical-lr">A</div>
    <div style="writing-mode: vertical-lr">A</div>
    <div style="writing-mode: vertical-lr">A</div>    

The 4 grid items should be baseline-aligned in both row and column 
axis. In the case of the justify-self baseline, they don't share an 
alignment context along the column-axis (perpendicular to the one 
justify-self applies to) since they are all placed in different 
columns. In the case of the align-self baseline (which operates along 
the columns-axis), all the grid items share the same alignment context
 along the row-axis  (1st row), hence they can be baseline aligned 
together. Since they are orthogonal to the alignment context, we need 
to synthesize a baseline; per resolution on issue #373 we should use 
the item's margin-box. The result will be something similar to the 
picture shown as follows:


GitHub Notification of comment by javifernandez
Please view or discuss this issue at 
using your GitHub account

Received on Thursday, 1 December 2016 19:41:01 UTC