Re: [css-shapes] "box" value for shape-inside

On Jun 14, 2013, at 2:38 PM, Alan Stearns <> wrote:

> On 6/14/13 1:06 PM, "Brad Kemper" <> wrote:
>> On Jun 14, 2013, at 10:05 AM, Alan Stearns <> wrote:
>>> On 6/14/13 8:59 AM, "Tab Atkins Jr." <> wrote:
>>>> I know shape-inside has been punted to level 2, so consider this a
>>>> suggestion for that level.
>>>> I'm watching Lea give a talk about border-radius right now, and she's
>>>> demonstrating the use of shape-inside to make text in an element
>>>> conform to the border-radius.  She points out how awkward it is,
>>>> because you have to duplicate the element's size and border-radius in
>>>> the rectangle() function.
>>>> I suggest we add a "box" keyword to shape-inside, which is nothing
>>>> more than the shape of the box.
>>>> ~TJ
>>> This could be useful on shape-outside as well, so it could be considered
>>> for level 1.
>>> I've been thinking of other keywords that could be added to shape-inside
>>> and shape-outside. One might be 'image' which, if the element is an img
>>> element would use the image referenced by the src attribute with
>>> whatever
>>> positioning, sizing, clipping etc. is applied. This would avoid having
>>> to
>>> repeat the URL in your HTML and CSS, and make sure that the shape aligns
>>> with the displayed image it comes from.
>> How about 'attr(src)' instead of a keyword? Then one could reference
>> other attributes too, such as 'data-foo', and the feature would be more
>> source language agnostic (not just HTML's 'src').
> You should be able to use attr(whatever) as well. I'm thinking the keyword
> would be more about making sure the shape you get from the image file
> lines up with the displayed image. You can do all sorts of things with
> positioning and sizing an image within a content area. If the alpha shape
> doesn't also get those positioning and sizing steps, it won't be aligned
> with the displayed image.
> I don't think that it makes sense to have a shape version of everything
> you can do to an image (shape-object-fit:contain?). I was thinking the
> 'image' keyword would be a way of saying, "Do everything necessary to line
> up the alpha shape with the displayed image."
> And if you don't want or need the shape to match the displayed image (or
> you want to use a different image entirely for the shape) you could use
> the URL or attr(src).

OK, makes sense. Its not really so much about the src as it is about the rendered image itself. And presumably the source code language would determine what represented a foreground image (img  in HTML). Maybe <map> could provide the shape (the union of its areas) if 'box' is used and a <map> is present? Or maybe some other keyword for that?

Maybe <object> could provide a shape too. Can PDFs and Flash objects have non-rectangular alpha shapes?

Received on Saturday, 15 June 2013 15:13:58 UTC