W3C home > Mailing lists > Public > www-style@w3.org > November 2012

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

From: Alan Stearns <stearns@adobe.com>
Date: Mon, 5 Nov 2012 16:33:47 -0800
To: Bear Travis <betravis@adobe.com>, "www-style@w3.org" <www-style@w3.org>
CC: Bem Jones-Bey <bjonesbe@adobe.com>, Zoltan Horvath <zhorvath@adobe.com>
Message-ID: <CCBD9887.18F50%stearns@adobe.com>
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.


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

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:14:21 UTC