Re: Underhang protection

On Friday 23 February 2007 09:55, Daniel Beardsmore wrote:
> When you float an item left, you often get poor overhang, e.g.
>
>   +---------+  Lorem ipsum dolor, in the bathtub, lorem
>
>   |         |  ipsum dolor, in the bathtub, lorem ipsum
>   |         |  dolor, in the bathtub, lorem ipsum dolor,
>   |         |  in the bathtub, lorem ipsum dolor, in the
>   |         |  bathtub, lorem ipsum dolor, in the bathtub,
>
>   +---------+  lorem ipsum dolor, in the bathtub -- lorem
>   ipsum dolor!
>
>   Lorem ipsum dolor, in the bathtub, etc etc.
>
>
> In printing, there's widow/orphan control for single lines at the
> start and end of pages, but how about for underhang? How about:
>
>   underhang-limit: <count of full lines>

Interesting proposal. I know of no systems that do this automatically 
(probably because most systems outside the Web expect the user to 
manually adjust the text, which is impossible on the Web).


It's not quite the same, but there is a way to make the whole block as 
narrow as its shortest lines. That's overkill if there are still many 
lines after the float, but it might help for short paragraphs. 
(Strictly speaking, while waiting for some properties in level 3, we 
only *allow* browsers to make blocks narrower, we don't require it, but 
most browsers do.)

To make a block into such a block-that-becomes-narrower, you need to 
change its 'overflow' property to 'hidden' or 'auto' (or 'scroll', but 
then you get scrollbars, which you probably don't want).

This only makes the block narrower if the float itself is defined 
*before* the block element, not when it is structurally part of the 
element. (And it's a bit of a hack: you make use of a side-effect of 
forbidding overflow, but without the level 3 properties, that's the 
only way.)

Compare the two paragraphs in the attachment. (Make the window narrow 
enough or the text big enough that the text wraps around the float.)


> Aside: I've got a page with a left-floated image, and to 
> its right, a <blockquote>. I've tried padding-left, margin-left, a
> border around the blockquote, display: block on the float ... Nothing
> I do will put a wider gap between that float and the blockquote. I
> hope that over the years you've found a solution to the hideous
> problem of float stealing and destroying padding and margins from
> elements ;-)

The way to get a margin between the float and the text is to put a 
margin on the float rather than on the block.

In CSS level 2, the margin of a block element is counted from its 
enclosing element. The presence of floats doesn't influence that. The 
idea is that, if the margin is wide enough, the float will just fit in 
it and the block is not distorted. (If the margin isn't wide enough, 
the block's *content* is pushed aside by the float, but the block's 
margin is not. That's what gives the wrap-around effect.)



Bert
-- 
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos                               W3C/ERCIM
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France