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

On 16 Oct 2015, at 15:06, Alan Stearns wrote:

> On 10/15/15, 8:24 PM, "Eric A. Meyer" <eric@meyerweb.com> wrote:
>
>> 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.
>
> It seems like this should work (and it did in the original design), 
> but after some discussion we arrived at the margin box clipping for a 
> few reasons. One is that we *have* to clip at the top of the margin 
> box. A shape-outside on a float cannot affect preceding lines. So 
> it’s a simpler story to clip all around the box than have to explain 
> why we’re only clipping at the top.

Understood, and I can see why that was the conclusion.  All the more 
reason to have clear examples of that clipping, though.  I can see a 
scenario where an author drops in a circular image and then tries to 
give it a very tall ellipse shape (well beyond the margin boundaries) to 
try to get text above and below to curve past it.

>> 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.
>
> If there is a scenario where clipping to the margin box makes fallback 
> worse, I’d like to explore it.

I won't go so far as to claim "worse", but imagine an image of a tablet 
at a steep angle.  The author wants a large shape-margin around a 
polygon describing the outline of the tablet's image.  (Or a mask of the 
same thing, whichever.)  If they're required to create a large margin 
past the point of the image, it could push the text far away from that 
one tiny bit of the image, and create even more space around the rest.

As a concrete example, look at the image of the Newton in 
https://medium.com/@nekolaweb/what-i-learned-from-conference-bingo-51cdb088ab01. 
  Now image in the stylus is gone and the Newton is at an even more 
extreme angle.  It would be better to let the text come up close to the 
rightmost point of the Newton in fallback, but keep a (say) 4em margin 
around the shape.  So it's not an advantage in that scenario.

>> 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.
>
> Yes, now that you point this out I agree the example is misleading. It 
> should probably show the image bounds and have two renderings - the 
> first showing how the shape is clipped with no margin applied, and a 
> second showing the intended shape with an adequate margin applied.

That would work very well!  Or even just having dotted lines showing the 
edges of the image and the margin box, and mentioning why the margin is 
necessary, would be a big help.

>> 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.)
>
> Here I intended the 100x100px sizing in the prose to give an idea of 
> the bounds in which the shape is being drawn. Perhaps there should be 
> width and height declarations in the code?

Yes, I think that would help.

>> 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.
>
> This would be my preference. If you’re interested in making these 
> changes, I’m all for it. But I can likely get to it some time in 
> November after TPAC.

I might be able to get to it before that, though no promises.  If I do, 
what's your preferred method for submitting changes?


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

Received on Tuesday, 20 October 2015 15:29:29 UTC