20 Jun 2013 00:08
[css-shapes] shape-outside and floats interaction
Alan Stearns <stearns <at> adobe.com>
2013-06-19 22:08:46 GMT
2013-06-19 22:08:46 GMT
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.(Continue reading)
RSS Feed