[css-shapes] Shapes, margin clipping, and misleading examples

I've been testing shapes recently[1] and I feel like the way shapes are 
confined to the margin box of the element is unintuitive, but more to 
the point, some of the examples seem to imply different behavior than 
what the spec defines.  Unless of course I completely misunderstood what 
the spec says, though if I did, the Chrome team came to the same 
conclusion.

First off, let me quote from section 2 of 
<http://www.w3.org/TR/css-shapes-1/>:

    "When a shape is used to define a float area, the shape is clipped 
to the float’s margin box.
     In other words, a shape can only ever reduce a float area, not 
increase it."

So that means if I do something like this, the shape will still be 100px 
by 100px:

    img {width: 50px; height: 50px; margin: 25px;
  shape-outside: polygon(0 0, 200px 0, 200px 200px, 0 200px);}

First off, I object to this a little bit on general principles: if I 
want a shape to stick out of the element's margin box, that seems like 
it should be allowed.  Suppose I have a raster image of a circle, where 
the circle's edge touches the edges of the image.  If I set a circle 
shape that's larger than the visible circle, like so:

    img {width: 50px; height: 50px; margin: 0;
  shape-outside: circle(60px at 50% 50%);}

…then any text flowing past it will still jam up against the side of 
the circle, because the shape is clipped on each side.  The only way for 
me to make the text flow nicely around the curve is to enlarge either 
the image or the image's margins to encompass the shape.

But, okay.  It's arguable that this is a good thing, in general: it 
prevents the fallback in shape-blind browsers from having text jammed up 
against floats where an author relied on shapes to push away the text.  
We could probably devise scenarios in which that would not be an 
advantage as well, but never mind.

The real problem is that Example 11 is fairly misleading about this 
behavior, to my eyes.  Looking at the figure in Example 11, I would 
expect the image edges of the CSS logo to be pretty close to touching 
the outermost points of the dotted line, with maybe a few pixels extra.  
But the 'shape-margin: 35px' pushes all the text away 35 pixels.  Sure, 
we could assume that there's more image or a right margin large enough 
to cover the shape-margin, but this is not what I would assume given the 
visual and the CSS that accompanies it.

I also feel that Example 10, in not showing the edges of the float on 
which the polygon shape has been hung, leaves readers without a sense of 
the limits of shapes and their margins.  (Which, yes, the shape margin 
is defined to create a whole new shape, but most people won't think of 
it that way, just as almost nobody thinks of an element as being resized 
by its margins.)

In my ideal world, shapes would not be clipped by the margin box of the 
float,  That would make the examples not misleading, and also be more 
intuitive in general, since there's no obvious reason why shapes should 
be clipped.  This could be partially accomplished by defining the 
float's margin box to expand to cover the outermost points of the new 
shape defined by the shape-margin, or wholly accomplished by simply 
dropping the clipping behavior.

Failing that, I strongly recommend that Examples 10 and 11 be altered to 
make visually clear where the floats' margin edges are placed, likely 
with the addition of a declaration in Example 11.

I also (very) strongly recommend adding a new example that explicitly 
demonstrates margin-box shape clipping, probably best placed in section 
2.

I'm willing to create the clarified figures and the new example, if 
people agree with my reading of the specification and belief that 
clarification is needed.


[1] See the shape-related links on 
<http://meyerweb.com/eric/css/tests/css3/>.

--
Eric A. Meyer - http://meyerweb.com/

Received on Friday, 16 October 2015 03:24:34 UTC