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

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:
>> I don't understand what's confusing.  The self-start/end keywords
>> don't specify an axis; that's inferred from the property in which
>> they're used.  You just take the relevant side from either the
>> container's directionality/writing-mode or the element's, depending on
>> whether it's self-* or not, along the axis specified by the property.
>
> I'm talking about the 'self-start/end" value keywords, so I need to
> determine the edge of the alignment
> container corresponding to the alignment subject’s start/end side.
> Hence, I think bot, container and element direction/writing-mode
> (depending on the alignment property) should be considered, overall in
> the case of orthogonal flows in grid container and items.
>
>> 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.

>    - 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.

>        + 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.

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).

>        + 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.

> * 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.
>        + 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.

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

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.

Similarly, the second item aligns to the bottom left.

> I also have questions/doubts on how to proceed when the grid container
> has vertical-rl writing mode and its contained items use horizontal-tb,
> for instance, but let's clarify first this scenario.

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).

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.

~TJ

Received on Monday, 12 January 2015 18:28:30 UTC