Re: Advanced Floats

On Jan 2, 2008, at 4:25 PM, fantasai wrote:

> James Elmore wrote:
>> This is one reason why I prefer to separate the ability to 'float'  
>> an element into a position and the ability to flow (or 'wrap')  
>> elements around the 'floated' element. There are already some  
>> good, well documented, reasonably complete, and even implemented  
>> ways to position elements. What is lacking is the ability to make  
>> other elements move around them as a 'float' does. Why make  
>> 'float' more complex when it could just be a shorthand way of  
>> saying 'position: absolute left; flow: right;'. (If I got the  
>> syntax wrong, I apologize; I just wanted to point out that 'float'  
>> is doing two things, and it should be possible to handle the two  
>> different things separately, as well as the shorter 'float: left;')
>
> When talking about implementability, one key thing to keep in mind is
> that absolute positioning can position things anywhere inside their
> container *because* those things don't affect the size of the  
> container.
> This is not the case with floats: since they affect the content, they
> can affect the size of the container. You can't define a new feature
> as "just mix floats and absolute positioning". It creates a circular
> dependency.
>
> However, this isn't to say that more powerful floats aren't something
> we'd like to consider. James Elmore posted a list including some other
> seriously useful cases we should consider:
>   http://lists.w3.org/Archives/Public/www-style/2007Dec/0272.html
>
> Håkon has already started experimenting with ideas for more powerful
> floats, particularly in relation to paged media:
>   http://www.w3.org/TR/css3-gcpm/#page-floats
>
> If we want to extend something like this to containing blocks other  
> than
> the page, note that floating to the top of a box is relatively
> straightforward (although it requires a second layout loop), but  
> floating
> to the bottom only works without an iterative balancing algorithm  
> if the
> containing block is a fixed height.

It's interesting that you mention that. I've seen that page before,  
and immediately wondered if those features would ever be available  
for the screen. But perhaps you can elaborate on why you think those  
float ideas would work, when you are more pessimistic about What  
James and I have been proposing. In fact combining floats with  
columns was something I suggested for "float:center". But more  
importantly, Håkon's float-offset property would achieve a great deal  
of what "float:absolute" or "position:absolute; wrap:[direction]" would.

The two values of Håkon's "float-offset" are analogous to "left" and  
"top" of absolute or fixed positioning, and also cause inline content  
to wrap around it. The main difference (aside from the syntax) seems  
to be that it uses its parent box and initial vertical position  
(which could be "top") as the zero points of its position, instead of  
its first positioned parent.

So the main thing lacking would be the ability to wrap in two  
directions at once. In the examples Håkon gives that can happen, sort  
of, when a float crosses a gutter into another column box. In example  
LIX, it is a top left float, but it pushes aside text to its left in  
the left column and to the right in the right column.

It doesn't say what would happen if the column was really wide and  
the float really narrow. Would inline content only flow down the left  
side, even though left floats usually have inline content pushed to  
the right? If so, what would be the effect of a second (narrow)  
float:left of the same height immediately after the first (offset the  
same amount from the top, if need be). It seems to me, that would  
flow inline content to the right as well then (although not breaking  
lines in the middle, as I would prefer, but as another mini-column  
within the column).

So, if you had something you wanted to float in the center  
horizontally, you could do it in a multi-column layout by giving it a  
float offset of 50% horizontally, minus half its width (or perhaps  
you give it padding equal to half its width and a matching amount of  
negative left margin).

And you could break the floating element (such as an image) into two  
halves (divided vertically), you could achieve similar centering with  
a column, by giving the left half a left float and offset and giving  
the right half a more traditional left float. To get lines to break  
across the float, you would have to divide the image into line-height  
sized horizontal strips, and shoot for that "pixel-perfection" that  
so many here deride. If columns were required, and I didn't need any,  
I would add a 1px wide column next to my 100% width column.

Do you think I am the only one in the world to think this way? There  
will be tutorials on the Web instructing people how to do this, and  
they will be popular destinations, because CSS didn't make it easy  
and obvious to do it in other ways, and it is a capability that is  
missing. There will be PhotoShop plugins to aid in achieving that  
capability. It would be so much nicer if all that work was done  
behind the scenes by the UA software, and in a way that could be  
applied to things other than images.

>
> I think this topic deserves more discussion, but we need to keep in
> mind that defining new CSS layout features is more than just  
> evaluating
> syntax.
>
> ~fantasai
>


<quoted out of order: >
> I agree with Peter Moulder's points about the cost vs. gain for a
> "float: center" feature. I don't think we will add it to CSS. I'm not
> speaking for the Working Group when I say this, but I very, very much
> doubt that we will find the cost of implementing "float: center" worth
> the dubious benefit of adding it to the feature list.

Obviously implementation costs are a major consideration, but I  
wouldn't describe the benefit as dubious. Float left and float right  
are used for many more purposes these days, not just for putting  
images and pull quotes in the corner.

Received on Thursday, 3 January 2008 17:37:27 UTC