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

On 10/20/15, 8:29 AM, "Eric A. Meyer" <eric@meyerweb.com> wrote:

>On 16 Oct 2015, at 15:06, Alan Stearns wrote:
>
>> On 10/15/15, 8:24 PM, "Eric A. Meyer" <eric@meyerweb.com> wrote:
>>
>>> 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.

If I understand you correctly, the circle example has a blunt edge, and the tablet example has a sharper edge. The sharper the edge, the less fallback margin is needed in relation to an appropriate shape margin. That does make sense, but I think less shape margin is required in these cases for the same reason (which should reduce the disadvantage you point out).

>
>>> 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?

A git pull request is the current mode. But I’m happy to work with whatever method you find easiest.

Thanks,

Alan

Received on Tuesday, 20 October 2015 15:49:57 UTC