Re: [css3-exclusions] Shape-outside on floats

On 10/26/12 1:45 PM, "Bear Travis" <betravis@adobe.com> wrote:

>Hi Alan,
>
>
>We were doing some quick brainstorming about shapes this morning, and
>wanted to iron out some questions. From the spec, floats with
>shape-outside use the shape-outside's bounding box to position the float
>[1]. Where does the float element position itself
> within the float area? It seems like it should position itself such that
>it lines up with the shape-outside offsets.
>
>
>For example, if the shape outside is larger than the element (eg
>circle(50%, 50%, 150%)), then content inside the float should lay out in
>the center of the circle [2]. In this case, shape-inside would default to
>outside-shape. If we are clipping shape-inside
> to the content box, it would occupy a smaller area.

I think I've been convinced that we should not be clipping shape-inside to
the content box. So the result shown in [1] would only occur if you had
that shape-outside circle with shape-inside computing to auto. If
shape-inside computed to shape-outside (the initial value), then you'd get
the green inside content composing to the inside of the circle (like [2]).

>
>
>If, however, the shape-outside is smaller than the current element (eg
>circle(50%, 50%, 25%)), then shape-inside would default to outside-shape
>and respect the same circle [3]. If we were to add a border, (border: 1px
>solid green), you would still see
> an outline larger than the shape.

Correct.

>
>
>One of the odd edge cases is for a shape-outside smaller than the float
>element, where the float element's shape-inside is set to auto [4]. In
>that case, content could potentially overlap, which would be odd.

Yes, but the default scenario does not cause overlap. You have to change
shape-inside from its initial value to auto, and overlap is a reasonable
outcome when the shape-inside is larger than the shape-outside.

>
>
>Is the behavior outlined here correct?
>
>
>-Bear
>
>
>[1] 
>http://dev.w3.org/csswg/css3-exclusions/#relation-to-box-model-and-float-b
>ehavior
>[2] https://dl.dropbox.com/u/1558588/www-style/shape-outside-floats-01.png
>[3] https://dl.dropbox.com/u/1558588/www-style/shape-outside-floats-02.png
>[4] https://dl.dropbox.com/u/1558588/www-style/shape-outside-floats-03.png
>

Received on Tuesday, 6 November 2012 00:34:13 UTC