W3C home > Mailing lists > Public > public-css-archive@w3.org > December 2016

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

From: Javier Fernandez Garcia-Boente via GitHub <sysbot+gh@w3.org>
Date: Thu, 01 Dec 2016 19:40:54 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-264272653-1480621252-sysbot+gh@w3.org>
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 
sense
> yet. 3279299
> 
<https://github.com/w3c/csswg-drafts/commit/32792998144d31de4470a783893f1f960b038e6c>
> 

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

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>    
</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:

![synthesized-orthogonal-baselines](https://cloud.githubusercontent.com/assets/2230241/20809446/62092a14-b806-11e6-9fe5-9facc095a44d.png)


-- 
GitHub Notification of comment by javifernandez
Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/721#issuecomment-264272653 
using your GitHub account
Received on Thursday, 1 December 2016 19:41:01 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 19 October 2021 01:30:26 UTC