- From: Javier Fernandez Garcia-Boente via GitHub <sysbot+gh@w3.org>
- Date: Tue, 06 Mar 2018 23:19:48 +0000
- To: public-css-archive@w3.org
javifernandez has just created a new issue for https://github.com/w3c/csswg-drafts: == [css-align][css-grid] Incorrect grid's intrinsic size when applying baseline-alignment == Lets consider the following case: ``` <div style="display: inline-grid; grid: 100px 200px / auto auto justify-items: baseline"> <div style="grid-row: 1; grid-column: 1; width: 125px; background: blue"></div> <div style="grid-row: 2; grid-column: 1 font: 50px Ahem; writing-mode: vertical-rl; background: purple">É É ÉÉ</div> </div> ``` The first item has fixed size, it can participate in baseline alignment along the row/inline-axis. The second item, even though it's orthogonal, can participate in baseline alignment align the row/inline-axis, since it doesn't imply a sizing cyclic dependency in such axis (rows are fixed sized). So, both items can participate in baseline alignment along the row/inline-axis, due to the justify-items property and since they both share the _first column_ as Baseline Alignment Context. Another point to consider in this example is that the first item is an empty box, hence it should synthesize its baseline using its border-box _under_ edge. Since we are aligning along the row/inline-axis, this edge is the _left_ edge. The second item has vertical-rl writing mode, so we can use its natural baseline because it's parallel to the Baseline Alignment Context (orthogonal to the baseline axis). This natural baseline correspond to the 'left' edge of the first line of text. The problem comes from the fact that the second item is vertical-rl, so it's right aligned. Before performing the layout, such item's container is the grid box, which has indefinite height. Hence, the item's text is laid out in a single line.  After performing the layout, and the corresponding tracks sizing algorithm, the second item has to break the text in two lines. This changes completely the baseline alignment and differ from the baseline shims used during the intrinsic size computation. Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2409 using your GitHub account
Received on Tuesday, 6 March 2018 23:19:51 UTC