Re: What's the model for wrapping text around a floating block?

Thanks! Your references was exactly what I needed.

L. David Baron wrote:

>On Fri, 17 Aug 2001, Lars Nyström wrote:
>
>>When inline text wrap around a floating block, is the margin moved or
>>are extra blocks generated to contain contain the shorter lines?
>>
>
>According to CSS1/CSS2, neither, which is a problem for list bullets.
>It does make sense for small floats that *can* fit in the margin.  This
>has been discussed before [1], and hopefully CSS3 will have a solution
>for this problem, probably similar to the one in the current CSS3 box
>model draft [2].  Does that solution seem sufficient?
>
It does handle displacement of blocks by floats quite well, and that was 
the most important thing. But I rather liked some things about 
"jagged-padding", and think it would be worthwhile to pursue the idea.
Think about a paragraph block with all its trimmings: contents, padding, 
border and margin. Put a background on it to make it really stand out. 
Which of those parts should be displaced by a float?

We have four possibilities (and I don't think the current one looks best).

1) Displace only the contents. The magin and border is drawn below the 
float exactly as if it wasn't there. The padding is extended though, to 
fill the area where we displaced the contents. (This is what I would 
call "jagged-padding" - because nothing but the padding is jagged. The 
margin and border are not displaced. Well, the contents is jagged too, 
but that should always be the case.)

2) Displace the contents and let the border be displaced too. The border 
and padding follows the contour of the paragraph text. But the margin is 
not displaced. It is usually transparent, so we will not notice that. 
But the parent box probably likes this, because it doesn't have to deal 
with jagged child boxes. (I think this should be regarded as always 
painting floats in the margin of the box which caused it to be. I would 
call this "jagged border". The padding is jagged only because it follows 
the border, and the margin is straight.

3) Displace the margin as well as the border. If the margin isn't 
transparent, we would notice the difference from the previous case. But 
this may make the parent notice the jaggidness of our box.

4) Like the first case in that we only displace the contents. But with 
the additional touch that we clip painting of the paragraph box below 
the float. Instead of drawing a jagged border, we get a jagged 
background without a border to the float.

Of these four ways to do this, I like case 2 -  the jagged-border - 
absolutly best. It would look nice with a background and border on the 
paragraph. I don't like the look case 1, because the border and 
background includes the float in a way I don't feel is nice. Without 
border and background we don't notice that.

The current solution in CSS3 
<http://www.w3.org/TR/css3-box#the-float-displace> takes care of the 
problem with block contents in a very simple way. But the jagged-border 
takes care of everything. It is also very close to handling a general 
shaped displacement outline - if we ever would do that.

    -- Lars

>
>
>-David
>
>[1] http://lists.w3.org/Archives/Public/www-style/1998Dec/0029.html
>    http://lists.w3.org/Archives/Public/www-style/1998Dec/0066.html
>    http://lists.w3.org/Archives/Public/www-style/1998Dec/0082.html
>    http://lists.w3.org/Archives/Public/www-style/1998Dec/0083.html
>    http://lists.w3.org/Archives/Public/www-style/1999Jan/0056.html
>    http://lists.w3.org/Archives/Public/www-style/1999Jan/0060.html
>    http://lists.w3.org/Archives/Public/www-style/1999Jan/0061.html
>    and probably many other messages that I can't find right now...
>[2] http://www.w3.org/TR/css3-box/#the-float-displace
>

Received on Saturday, 18 August 2001 07:15:22 UTC