[css-shapes] shape-outside and floats interaction

The current CSS Shapes spec defines how shapes interact with floats in
section 3.1 [1]. In an attempt to simplify the interaction, it states that:

---
If a float has an outside shape, its positioning is resolved as defined in
[CSS21] but the outside shape's bounding box is used in lieu of the
float's margin box.
---

This has some nice consequences (the shape never extends outside the box
used for positioning and stacking floats, and floats with outside shapes
will stack somewhat compactly with respect to their shapes). But in
practice, users have found it too limiting. Changing the float's regular
margins has no effect on where the shape is placed. And positioning the
float using the shape's bounding box has a side-effect of shifting content
inside the float relative to the shape position, which users find really
weird. 

A simple use-case that is not served by the current spec text is a left
float with content that displays in a circle with a shape-outside
corresponding to that circle, and 'margin-left:-50%'. Here the float is
positioned using the entire circle shape, but the float's contents are
shifted off to the left. Ideally, the shape would also shift to the left,
the box for positioning the float would be 50% of the float's width, and
inline content would wrap around a semicircle.

So I propose removing the sentence above, so that floats with
shape-outside are positioned and stacked exactly the same as floats with
'shape-outside:auto'. Then the regular margins (and whatever else) can be
used to position floats with shapes.

This change creates some complications that I think can be addressed with
two new simplifications. Both of these simplifications would *only* apply
to how shapes interact with floats.

A: Shapes should be clipped to the margin box of the float. This will
avoid cases such as a shape with 500% height affecting more inline content
than a float normally would, or a shape with 500% width intruding past the
float area of a stacked float. And it gets us back to the state where a
shape never extends outside the box used for positioning and stacking
floats.

B: Where there are voids (either a large content box with a small shape,
or a large margin in a block direction) inline content will wrap to the
furthest margin edge of the float. So if you have a left float with a
shape-outside that conforms to its content box and a large margin-top, any
inline content flowing through the top margin area will be constrained by
the float's left margin edge. This avoids some stacking issues where it
could be possible for more than one left float to have a relevant edge to
consider. With this simplification, only the rightmost left float would
need to be considered for a given line box.


Thanks,

Alan

[1] 
http://dev.w3.org/csswg/css-shapes/#relation-to-box-model-and-float-behavio
r

Received on Wednesday, 19 June 2013 22:11:35 UTC