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

On Nov 4, 2015, at 4:59 PM, L. David Baron <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).

-- 'float: bottom' = 'float: none bottom ' (no left or right mentioned, so no left or right floating).

-- 'float: left' = 'float: left none' (no top or bottom mentioned, so no top or bottom floating, matches existing).

-- 'float: right' = 'float: right none' (no top or bottom mentioned, so no top or bottom floating, matches existing).

------------------
If you accept that, and that the logical values should be in the spots equivalent to Western style writing (left to right, top to bottom), then the order of logical equivalents should be 'inline' then 'block'. So 'float: start none' would be the same as 'float: left none' (for me), which is 'float: left'. Very logical logical, to me.

So single word logical equivalents would be:

-- 'float: start' = 'float: start none' 

-- 'float: end' = 'float: end none' 

Both of those are useful for the simple case of inline floating. For block floating, just use the 2 word version. E.g., 'float: none start', not 'float: block-start', and 'float: start start', not 'float: line-start block-start'.

----
Vertical float clearing only matters if you have multiple fragments.

Received on Friday, 6 November 2015 09:44:08 UTC