Re: [csswg-drafts] [css-align] Rules for align/justify-self on static position of absolutely-positioned boxes need more detail

The Working Group just discussed `align/justify-self on static position of abspos boxes`, and agreed to the following:

* `RESOLVED: The static position rectangle is used as the alignment rectangle of the statically positioned abspos`
* `RESOLVED: For blocks the static position rectangle is the 0-height rectangle between the start and end static position offsets as defined in CSS21`

<details><summary>The full IRC log of that discussion</summary>
&lt;fantasai> Topic: align/justify-self on static position of abspos boxes<br>
&lt;fantasai> github: https://github.com/w3c/csswg-drafts/issues?q=is%3Aopen+is%3Aissue+label%3Acss-align-3<br>
&lt;fantasai> github: https://github.com/w3c/csswg-drafts/issues/1432<br>
&lt;emilio> fantasai: we're asked to define precisely how the alignment properties interact with static pos.<br>
&lt;emilio> fantasai: the remaining one is how align/justify-self interact with it<br>
&lt;emilio> fantasai: the basic model for abspos and alignment is that you have your containing block and your offsets<br>
&lt;emilio> fantasai: and that produces a rectangle in which you do your alignment<br>
&lt;emilio> fantasai: the default behavior depends on CSS21 on whether you're replaced or not<br>
&lt;emilio> fantasai: that's a mess but not defined<br>
&lt;emilio> s/not/well<br>
&lt;emilio> fantasai: for flexbox and grid the alignment container is well defined, we propose to make the alignment rectangle the static pos rectangle is the rectangle representing the position of the element if it were not abspos<br>
&lt;emilio> fantasai: so CSS2.1 you've got your CB, a bunch of content and your element which would be abspos and then you calculate these offsets, and depending on the direction you ignore one of them and then do your positioning calculations<br>
&lt;emilio> fantasai: our proposal is making it the 0-height rectangle occupying between the left and right edges of the static pos as defined in CSS2.1<br>
&lt;emilio> fantasai: which means you can control the alignment of the abspos element with respect of its static position<br>
&lt;emilio> fantasai: anyone has any comments?<br>
&lt;emilio> iank_: for orthogonal writing modes your static pos rectangle may change as soon as it's constrained<br>
&lt;emilio> iank_: ^ not sure I got that right, please correct if so<br>
&lt;emilio> iank_: if you've got a mismatch between the abspos CB and static pos CB as soon as you constrain it it's going to change the axis you align it against right?<br>
&lt;emilio> fantasai: no<br>
&lt;emilio> mismatch between writing-mode static pos and abspos CB<br>
&lt;emilio> iank_: so depending on the CB's writing mode that'll affect whether you use align or justify self to get the centering<br>
&lt;emilio> Rossen: bottom line is alignment happens in the CB<br>
&lt;emilio> Rossen: static pos is calculated in your parent and used in your CB, and the wm that applies to it is the one of the CB<br>
&lt;emilio> Rossen: I think there was one gotcha here which was if your static possition is affected by the wm of your parent<br>
&lt;emilio> Rossen: Imagine you have two empty elements and an abspos inside and the topmost is ltr and the inner one is rtl<br>
&lt;emilio> Rossen: one abspos auto-positioned inside the inner one and the CB is the outer one<br>
&lt;emilio> fantasai: [draws]<br>
&lt;emilio> fantasai: so you have an LTR rectangle. Inside that you have an RTL box. Inside that you have the abspos<br>
&lt;emilio> fantasai: [draws the static pos 0-height rectangle]<br>
&lt;emilio> Rossen: so, if I position with `justify-self: start` for the abspos...<br>
&lt;emilio> fantasai: the direction used is the direction of the CB<br>
&lt;emilio> fantasai: if you want to use the abspos writing mode you can use `self-start`, but the axis you align to is the axis of the CB<br>
&lt;emilio> RESOLVED: The static position rectangle is used as the alignment rectangle of the statically positioned abspos<br>
&lt;emilio> RESOLVED: For blocks the static position rectangle is the 0-height rectangle between the start and end static position offsets as defined in CSS21<br>
&lt;emilio> Rossen: [actually resolves]<br>
&lt;emilio> Rossen: is that everything?<br>
&lt;emilio> fantasai: yes<br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1432#issuecomment-402580897 using your GitHub account

Received on Thursday, 5 July 2018 01:24:21 UTC