Re: [css-logical-properties] the 'inline-{start,end}' values for 'float' and 'clear'

> On 06 Nov 2015, at 19:54, Johannes Wilm <johannes@fiduswriter.org> wrote:
> 
> 
> 
> On Fri, Nov 6, 2015 at 10:43 AM, Brad Kemper <brad.kemper@gmail.com <mailto:brad.kemper@gmail.com>> wrote:
> On Nov 4, 2015, at 4:59 PM, L. David Baron <dbaron@dbaron.org <mailto:dbaron@dbaron.org>> wrote:
> >
> >> On Wednesday 2015-11-04 16:27 -0800, Tab Atkins Jr. wrote:
> >> It's not a corner case.  All the *examples* have full-width elements
> >> being floated up or down, but that's irrelevant; in practice, a lot of
> >> top/bottom floats will be shrinkwrapped or otherwise sized to
> >> something other than 100%. Horizontal positioning is a requirement
> >> *now*.
> >
> > But even if they might not be full width doesn't mean that the
> > inline content flows around them on both sides.  It still seems like
> > there's a difference between "float to the top, place on the left
> > side, and have text flow underneath but not to the right" and "float
> > to the left, place on the top side, and have text flow on the right
> > but not underneath", even though both are top-left corner.
> 
> I'm not so sure "prevent text from wrapping underneath when floating to the left" should be part of this. We already have left floats without this, and I don't thing floating to the top too changes that.
> 
> > And
> > there's also the third option of wrapping on both sides.
> 
> That should be the second option (if you mean connecting sides, such as right and bottom).
> 
> The way I see this, 'float: left top' should be the same as 'float:left', except you first move it to the top of the first line line-box of its containing block (or of its reference containing block), instead of floating it at the line box of its float anchor. Move it up to the first line, then do normal float:left from there. It is simple and intuitive.
> 
> 'float: none top' would move it to the top line, and make it 'display:block' as floating normally does. The result is, text or other floats (including subsequent top floats) would start below it, not wrapped to the side. If the floated item had 'width: auto', it would fill the space horizontally. If it had some other width, or if it was a replaced element, then there would be empty space to the right of it. If you wanted empty space to the left instead, just add 'margin-left: auto'. In other words, exactly the same as if you had moved the item to the beginning of the containing block and made it it display:block. No left/right floating taking place there (thus the 'none'), so no shrink-to-fit for width.
> 
> This means that since it is pretty much the same as left/right/none floats, aside from what line box you start from, you've already got tons of edge cases solved. And it is easy to learn and understand, being such a simple extension of existing floats. Yet it covers most common use cases.
> 
> > Or is the plan to have authors do the first two by using a mechanism
> > for the third, and requiring an extra containing element that is
> > width:100% or height:100%?
> 
> Only if you don't want text or other floats to wrap underneath, such as for a sidebar. Of course, you still have the always confounding problem of that not working if the containing block is 'height:auto' (an existing problem that I would not fix here).
> 
> So here is my list of the 8 compass point use cases (4 corners, and four sides), and variations, and the syntax to use (assumes horizontal left-to-right writing):
> 
> -- Float to top left corner, wrap around right and bottom: 'float: left top'.
> 
> -- Float to top left corner, start text or other floats underneath:  'float: none top').
> 
> -- Float to top center, start text or other floats underneath:  'float: none top; margin: 0 auto'. Add 'width: 100%' and/or 'box-sizing: border-box' if needed/wanted (not necessary for non-replaced 'width: auto' items.
> 
> -- Float to top right corner, wrap around left and bottom: 'float: right top'.
> 
> -- Float to top right corner, start text or other floats underneath:  'float: none top; margin-left: auto').
> 
> -- Float to right, full height, text and subsequent floats to the left:  'float: right top; height: 100%; box-sizing: border-box /* optional */;'.
> 
> -- Float to bottom right corner, wrap around left and top: 'float: right bottom'.
> 
> -- Float to bottom right corner, end text and most floats above:  'float: none bottom; margin-left: auto'. Subsequent 'none bottom' floats always go below all previous floats in the containing block. (Maintains source order stacking of bottom floats. See next use case...)
> 
> -- Float to bottom center, end text or other non-bottom floats above:  'float: none bottom; margin: 0 auto'. Add 'width: 100%' and/or 'box-sizing: border-box' if needed/wanted. ***This could be useful for footnotes. ***
> 
> -- Float to bottom left corner, wrap around right and top: 'float: left bottom'.
> 
> -- Float to bottom left corner, end text and most floats above:  'float: none bottom;'.
> 
> -- Float to left, full height, text and subsequent floats to the right:  'float: left top; height: 100%; box-sizing: border-box /* optional */;'.
> 
> Note: if you add 100% width on top or bottom floats, then it doesn't much matter what you have as the horizontal value, except 'none' doesn't need clearing after. With 'float: none top', you don't need 'width: 100%' if you already have the initial 'width: auto', since it is a block that expands to fit.
>  
> 
> ------------------
> The single values for floats would expand thusly:
> 
> -- 'float: top' = 'float: none top' (no left or right mentioned, so no left or right floating).
> 
> 
> As was mentioned earlier, floating in the block direction and not the inline direction will likely give us results of low value.
> 
> Take this example: 
> 
> If we only float in the block direction and not in the inline direction, we will get something like this: http://snag.gy/2Otfa.jpg <http://snag.gy/2Otfa.jpg> (this is two top floats. The red Xs are the page float anchors (call outs).

I don't think that's what Brad meant. His "float: none top" would blockify the float, making it take the full width of the containing block. So in your example, you'd have the cyan float take the entire first line (with empty margins on the side since it's content does not fill the line), the green one would take the entire line below (same thing about empty margins), and all the text would be pushed below them.

I haven't though about page floats as much as you have, but Brad's approach makes a decent about of sense to me (assuming I'm understanding it correctly).

 - Florian