Re: [css-grid][css-align] self-start and self-end alignment with orthogonal flows.

Hi Tab,

First of all, thanks a lot for taking care of this. Definitively, my
fault for the terrible combination of lack of understanding of some
concepts and bad explanation of my doubts. Even though I understand
better now how orthogonal flows should work, I'll try to clarify some
mistakes I made in my previous email which led to incorrect conclusions
in your reply.

On 01/12/2015 07:27 PM, Tab Atkins Jr. wrote:
> On Mon, Jan 12, 2015 at 4:38 AM, Javier Fernandez <jfernandez@igalia.com> wrote:
>> On 01/09/2015 10:16 PM, Tab Atkins Jr. wrote:
>>> Can you give a specific code example that you think isn't fully
>>> specified by the spec?
>>>
>>
>> Let's consider this example:
>>
>> .grid {
>>     font: 10px/1 Ahem;
>>     grid-template-columns: 50px
>>     grid-template-rows: 100px;
>> }
>> .selfStart {
>>     align-self: self-start;
>>     justify-self: self-start;
>> }
>> .selfEnd {
>>     align-self: self-end;
>>     justify-self: self-end;
>> }
>> .firstRowFirstColumn {
>>     grid-column: 1;
>>     grid-row: 1;
>> }
>> .secondRowFirstColumn {
>>     grid-column: 1;
>>     grid-row: 2;
>> }
>> .verticalRL {
>>     writing-mode: vertical-rl;
>> }
>>
>> <div class="grid"">
>>    <div class="firstRowFirstColumn  verticalRL selfEnd">XXXXXXX</div>
>>    <div class="secondRowFirstColumn verticalRL selfStart">XXXXXXX</div>
>> </div>
>>
>> So, the first item will be aligned as follow, if I understand it correctly:
>>
>> * align-self:
>>    - aligned along the container's block/column/cross axis.
>>        + isn't the container's axis affected by the fact that its
>> writing-mode is horizontal-tb ?
> 
> Yes.  The align-* properties apply in the grid container's column
> axis, which is vertical in this case.

ok.

> 
>>    - flush with the edge of the container corresponding to the item’s
>> end side.
>>        + isn't the "item's end" side affected by the fact that its
>> writing-mode is vertical-rl ?
> 
> Yes, a combination of writing-mode and direction define its end sides.

ok.

> 
>>        + is the item's end side took based on the container's alignment
>> axis ?
> 
> Maybe this is the point of confusion?  The item has *two* end sides,
> one in each axis.  When necessary, we disambiguate with an axis name,
> like "block-start" or "column-end", but when not ambiguous, we use
> just "start" or "end" to refer to the side in the appropriate axis for
> the context.

I think that my confusion comes precisely from this ambiguity of
start/end without the axis name prefix. Under parallel flows, start/end
sides would have both the same prefix (block, for align-xxx properties
and inline for justify-xxx properties). When using orthogonal flows,
even that align-xxx properties works on the column/block axis, for the
case of self-start/end values I need to determine the start/end in the
inline-axis, instead; hence, inline-start/end. I was looking for the
item's block-start/end since the align-xxx property works in such axis,
so that's why I got lost.

> 
> So the container determines the axis that is being aligned in.
> Because the element has self-start/end, it uses its own directionality
> to tell which direction along the axis is start and which is end
> (rather than using the container's directionality to determine that).

But if I understood it correctly, item's start/end sides are determined
not only based on the item's directionality, but also in the item's axis
parallel to the property's axis (which will be different in case of
orthogonal flows, as I see now).

> 
>>        + which would be the item's end side ?
> 
> The item is ltr, so when combined with vertical-rl text progresses
> from the top to the bottom.  So the end side is the bottom of the
> element.

ok, So the item's end side is the inline-end side, since align-self
works on the container's block axis, which is parallel to the item's
inline axis (because is using vertical-rl writing-mode). That's also why
direction is used to determine the proper item's side, instead of the
writing-mode.

> 
>> * justify-self:
>>    - aligned along the container's inline/row/main axis" axis.
>>    - flush with the edge of the container corresponding to the item’s
>> start side.

So sorry about my mistake of having written "to the item's start side.",
because in my example the value of justify-self in the first item is
also 'end', like the value of its align-self property.

>>        + which would be the item's end side in this case ?
> 
> I'm not what you're saying here.  No, the item's end side does not
> correspond to the item's start side.  The justify-* properties work in
> the row axis, which is horizontal in this case.  The item's start side
> in the horizontal axis (which, due to writing modes, is the item's
> block axis) is the right side.

Anyway, assuming such mistake, I understand it'd be 'right' for this
case. Again, it's using the block-start/end side of the item's block
axis, which is parallel to the container's inline axis.

> 
> So, the first item aligns to the top right of the cell, since that's
> its start/start corner, exactly as specified.

If I understood it correctly this time, using just the style declared in
the example, the first item aligns to the bottom left (align-self: end;
justify-self: end).

> 
> If you'd instead used start/start as the values, so that it drew from
> the container's directionality, it would be in the top left corner.

I think you meant here start/end, right ?
> 
> Similarly, the second item aligns to the bottom left.

Second item (align-self: start; justify-self: start). aligns to the top
right, doesn't it ?

> 
> Any other example works in the exact same way - find the axis the
> property applies in (always from the container's directionality), then
> find the correct side in that axis (based on either the container's or
> item's directionality, depending on the property value).

Perhaps "find the correct side in THAT axis ..." is what led to my
confusion. Somehow, I understand it now as THAT axis only in case of
parallel flows; in case of orthogonal flows, it should be used the
item's axis parallel to the property's axis to find the correct side
(only when using self-start/end values, because otherwise only
container's axis matters).

> 
> I'm super lost about what's confusing you here, so apologies if I'm
> going over stuff too basic - I literally have no idea where you're
> going astray, so I'm trying to cover everything in detail.

Again, totally my fault and thanks again for taking care of covering
everything in detail.

--
javi

Received on Monday, 12 January 2015 23:12:43 UTC