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

Hi,

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 ?
   - 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 ?
       + is the item's end side took based on the container's alignment
axis ?
       + which would be the item's end side ?

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

Thanks.

Received on Monday, 12 January 2015 12:39:08 UTC