- From: Florian Rivoal <florianr@opera.com>
- Date: Thu, 26 Jul 2012 11:16:59 +0200
- To: www-style@w3.org
On Wed, 25 Jul 2012 23:04:27 +0200, fantasai <fantasai.lists@inkedblade.net> wrote: > Here's a proposal: > > # The hypothetical box used to calculate the static position [CSS21] > # of an absolutely-positioned flex item corresponds to that of an > # anonymous empty flex item whose main-axis position coincides with > # the main-start edge of the subsequent real flex item on the flex > line > # and, being hypothetical, has no effect on flex layout. > # If there is no subsequent real flex item, the hypothetical box's > # main-axis position is that of a hypothetical last item on the flex > # line, after any packing spaces that were introduced around any > # previous real items due to ‘content-justify: space-around’. This sounds quite reasonable to me, and I am happy to resolve on that. > There are two edge cases: > 1. If the item appears at a wrap point. This text places it on the > previous line. Removing "on the flex line" would place it on the > next line. Removing "on the flex line" first seemed to me to be an improvement, as it reduces the chances that we'd end up overflowing the viewport, but it seems overall closer to "Rosen's principles", so keeping it the way you wrote is probably best. That said, this seems to be an area where we don't have full interoperability, so evaluating Rosen's principles is hard. Consider the simple demo below, and resize the browser window down. Opera, firefox and webkit behave in subtly different ways. <p>yadayada yadayade yadayadi <span style="position:absolute>####</span> foobar barbaz</p> All browsers have #### on top of foobar when the line is long enough. Opera keeps #### at the same position when the window is small enough to send foobar on the second line, and buts #### back on top of foobar, when the window is small enough to push both yadayadi and foobar on the second line. Firefox behaves almost the same, except that when foobar is moved the the second line, #### is moved back 1 character, making the first line ending in "yadayadi####" rather than "yadayadi ####" Chrome keeps #### at the same position when the window is small enough to send foobar on the second line, if the windows get a little bit bit smaller (so that there is no more room on the first line for the space that preceded foobar?), #### (but not yadayadi) is moved to the second line, when the window gets even smaller both yadayadi and foobar go on the second line and #### overlaps foobar. Had there been no space between </span> and foobar in the markup, #### would be moved to the second line as soon as foobar goes there. Also (but I suspect that's a bug), the behavior when enlarging the window again isn't symmetrical when there is a space between </span> and foobar, and #### moves back up to the *beginning* of the first line first, before going back on top of foobar when foobar fits on the first line. I may be biased, but Opera seems to have the sanest behavior here, so I am taking that as my way to evaluate what "Rosen's principles" would lead us to do, and that makes me agree with your proposal. I don't have IE, but I wonder what it does. - Florian
Received on Thursday, 26 July 2012 09:17:38 UTC