W3C home > Mailing lists > Public > www-style@w3.org > February 2007

Underhang protection

From: Daniel Beardsmore <public@telcontar.net>
Date: Fri, 23 Feb 2007 08:55:33 +0000
Message-ID: <45DEAC05.5000506@telcontar.net>
To: www-style@w3.org

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>

For example, if you want to ensure that you have no fewer than two full lines of 
text underneath the float, write:

  body { underhang-limit: 2 }

The above text has zero such complete lines in the first paragraph, giving:

  +---------+  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.


I wrote "body" because of course, the effect is a container effect and not an 
element effect.

You may want to figure out a way of correctly fitting this into how CSS works :-)


================================================================================
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 ;-)
Received on Friday, 23 February 2007 15:50:27 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:49 GMT