Flow around floats (proposal for float-displace)

To resolve (?) the impasse between the spec's rules for flow around
floats and the behavior currently implemented by Internet Explorer, I
propose the following property.  I also think it is quite useful even
without such a problem with current implementations, since it would
give the author control over displacement, which should depend on the
purpose and size of the floating element.

Property: float-displace
Value: none | inline | jaggedbox | box
Applies to: all elements
Default: inline
Inherited: no
Percentage: N/A
Media: visual

The float-displace property describes how elements in the normal flow
of the parent of a floating element flow around that floating element.
If an element in the normal flow is displaced by a floating element,
then, for a left (right) floating element, the left (right) margin of
the element in the normal flow cannot be to the left (right) of the
right (left) margin of the float.  If an element in the normal flow is
not displaced, then it is positioned as if the float did not exist.
However, if an element is not displaced by the float in question but it
has an ancestor element that is displaced by that float, it is
positioned normally within its parent element (see below for handling
of jaggedbox).  The values have the following meanings:

none:
  Contents are not displaced by the floating element.

inline:
  Line boxes are displaced by the floating element, but block boxes
  are not.  When a line box is displaced around a left (right) floating
  element, its left (right) edge cannot be to the left (right) of the
  right (left) margin of the floating element.
    NOTE:  This is the CSS1 and CSS2 behavior.

jaggedbox:
  Block boxes are displaced by the floating element, and may have
  irregular shapes if the floating element is only next to part of the
  box (that is, that there is some horizontal split in the content of
  the box that would mean only one of the two boxes created by the
  split would be displaced by the float).  All block-level children of
  an element whose displace value is jaggedbox are also treated as
  though they have the value jaggedbox (unless they have the value
  box), and are formatted accordingly.  Top margin, border, and padding
  is applied at every top edge of the box, and equivalently for right,
  bottom, and left margin border and padding.
    NOTE:  This is the current behavior of MS Internet Explorer 4 and
    5.0 beta, or at least similar to it.

box:
  Block boxes are displaced by the floating element, and are always
  rectangular.

The flow of a box around a floating element is determined by both the
value of float-displace on the floating element and by the value of
float-displace on the element in the normal flow.  The value used is
the value with the highest precedence, where the order of precedence,
from lowest to highest, is inline, jaggedbox, box, none.

The following quote from CSS2 (section 9.5) [1] still applies (ignoring
the typos and ambiguity in the second sentence):

  "When an inline box overlaps with a float, the content, background,
  and borders of the inline box are rendered in front of the float.
  When a block box overlaps, the background and borders of the block
  box are rendered behind the float and are only be visible where the
  box is transparent. The content of the block box is rendered in front
  of the float."

  (I assume the third sentence means *inline* content of the block box,
  not other block boxes inside it.)

    NOTE:  Should z-index apply here?  It might be nice, although I
      don't think it is very important.  It currently only applies to
      positioned elements.

David Baron

[1] http://www.w3.org/TR/REC-CSS2/visuren.html#floats

Received on Sunday, 27 December 1998 20:26:36 UTC