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

On 6/14/13 1:06 PM, "Brad Kemper" <brad.kemper@gmail.com> wrote:

>On Jun 14, 2013, at 10:05 AM, Alan Stearns <stearns@adobe.com> wrote:
>
>> On 6/14/13 8:59 AM, "Tab Atkins Jr." <jackalmage@gmail.com> 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).

Thanks,

Alan
>

Received on Friday, 14 June 2013 21:38:32 UTC