W3C home > Mailing lists > Public > www-style@w3.org > October 2015

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

From: Alan Stearns <stearns@adobe.com>
Date: Fri, 16 Oct 2015 19:36:18 +0000
To: "L. David Baron" <dbaron@dbaron.org>
CC: "Eric A. Meyer" <eric@meyerweb.com>, CSS WG <www-style@w3.org>
Message-ID: <AF2844F8-CC98-44DF-824A-33BABE158252@adobe.com>
On 10/16/15, 12:21 PM, "L. David Baron" <dbaron@dbaron.org> wrote:

>On Friday 2015-10-16 19:06 +0000, 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.
>
>Is it a feasible alternative to make the bounds of the float for
>layout purposes be (on each side) the farther of the margin-box or
>the box enclosing the shape-outside?  In other words, if the
>shape-outside goes above the top of the margin-box, the float moves
>down?
>
>(I'm not sure if it's a good idea or not; just suggesting it as an
>option.)

This has some annoying side effects that mess with expectations of float positioning. People use negative margins to make floats “stick out” of their block. So when we had floats do as you suggest above, designers got annoyed that they couldn’t use these margin tricks to place a shape-influenced float where they expected.

Negative top margin has limited application - it really only to floats at the top of a block of text. The more compelling case for me was a floated circle where you want the left side of the circle to stick out into the gutter. So you might have something like

margin-left: -50%;
shape-outside: circle(50%);

If you make the float bounds affected by the shape bounds, then your work moving the float out into the gutter with the negative margin is undone.

Thanks,

Alan
Received on Friday, 16 October 2015 19:36:52 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:57 UTC