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

On Fri, Nov 6, 2015 at 11:58 AM, Florian Rivoal <florian@rivoal.net> wrote:

>
> 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>
>  wrote:
>
>> 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).
>>
>>
> 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 (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.
>
>
So what do you then do if the user specifies that the top float is just
50px wide and it's floating in a fragment that's 150px wide? Is it placed
in the right or the left corner? Or center?

What is the difference between "float: none top", "float: right top" and
"float: left top"?


My point here is that if you do float in the block direction you also HAVE
to float in the inline direction, unless you want that result from the
image. However, in the case of width: 100%, both floating right and left
will give the same visual result.



-- 
Johannes Wilm
Fidus Writer
http://www.fiduswriter.org