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

javifernandez has just created a new issue for 
https://github.com/w3c/csswg-drafts:

== [css-align][css-grid] Inconsistence on  Baseline Alignment 
terminology for orthogonal flows ==
The CSS Box Alignment spec states the following when defining the 
Baseline-sharing group:

https://drafts.csswg.org/css-align/#baseline-terms
> A baseline-sharing group is composed of boxes that participate in 
baseline alignment together. This is possible only if they
> 
> * share an alignment context whose axis is parallel to their inline 
axis
> * either have the same block flow direction and baseline alignment 
preference, or have opposite block flow direction and opposite 
baseline alignment preference (in other words, the baselines that want
 to align are on the same side of the alignment context).

Then, in the Section 8.3 Aligning Boxes by Baseline it's stated the 
following:

https://drafts.csswg.org/css-align/#align-by-baseline
> Given a set of boxes and their baselines that all belong to a single
 baseline-sharing group, the boxes are baseline-aligned as follows:

Hence, when applying this to a Grid box, we can align the grid items 
by baseline only if they belong to the same baseline-sharing group. 
This implies that they share an alignment context whose axis is 
parallel to their inline axis.

Said this, I want to refer to the already closed issue #373 where it 
was resolved that orthogonal grid items should synthesize their 
baseline from their border-box. Let's assume an horizontal grid 
container with some vertical grid items. Does this resolution imply 
that we should use such synthesized baseline to align those orthogonal
 items along the grid's row-axis ? I assume that we can align those 
orthogonal items align the grid's column axis, but for that case there
 is no need to synthesize a baseline.

As an example of the issue I'm trying to describe, consider the 
following grid vs inline-block cases:

```
.row { grid-auto-flow: columns; }
<div class="grid row itemsBaseline"><span>A</span><span 
class="verticalLR">A</span><span>A</span><span 
class="verticalLR">A</span></div>

.item { display: inline-block; }
<div><div class="item">A</div><div class="item verticalLR">A</div><div
 class="item">A</div><div class="item verticalLR">A</div></div>
```

This is the output using both, Chrome (implementation in progress) and
 Firefox nightly:

![baseline-orthogonal](https://cloud.githubusercontent.com/assets/2230241/20369721/f58f9f78-ac5a-11e6-8d0f-360569139358.png)
 



Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/721 using your GitHub 
account

Received on Wednesday, 16 November 2016 23:17:56 UTC