[css-shapes] basic shapes and shape-radius (was: Re: [css-shapes] <basic-shapes> etc. summary 3)

Hi,

The new syntax [1] looks sane. The paragraph should maybe say how percentage values are resolved (for width to the width of the …box, for height to the height of the …box). This is especially important for circle(). Of course it would be helpful to allow other specifications to define a different kind of box than CSS Shapes is going to use.

I suppose the ‘contain’ keyword can be useful in some situations where you position the center of a circle on one of the edges and then have the circle cover the half of the box or so. For clip-path it can be useful for animations of the position, otherwise the shape would change the size during changing the position.

The interpolation section [2] needs to be updated to the new shape syntax. It also still assumes that there is a rectangle :).

Greetings,
Dirk

[1] http://dev.w3.org/csswg/css-shapes/#typedef-shape-radius
[2] http://dev.w3.org/csswg/css-shapes/#basic-shape-interpolation


On Nov 11, 2013, at 11:55 AM, Alan Stearns <stearns@adobe.com> wrote:

> On 11/11/13 10:49 AM, "Alan Stearns" <stearns@adobe.com> wrote:
> 
>> On 11/11/13 10:37 AM, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:
>> 
>>> On Sun, Nov 10, 2013 at 5:36 PM, Alan Stearns <stearns@adobe.com> wrote:
>>>> On 11/11/13 9:20 AM, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:
>>>> 
>>>>> On Sun, Nov 10, 2013 at 4:58 PM, Alan Stearns <stearns@adobe.com>
>>>>> wrote:
>>>>>> On 11/10/13 3:07 PM, "Alan Stearns" <stearns@adobe.com> wrote:
>>>>>>> We change circle() and ellipse() to use radial gradient syntax:
>>>>>>> 
>>>>>>> circle() = circle( [<size>] [at <position>] )
>>>>>>> ellipse() = ellipse( [<size>] [at <position>] )
>>>>>> 
>>>>>> Now that I'm starting to make these changes, I'm noticing that <size>
>>>>>> as
>>>>>> defined by radial gradients does not allow percentages for circle
>>>>>> radii,
>>>>>> and the corner keywords there are more suited for gradients than
>>>>>> shapes
>>>>>> (farthest and closest corner radii will not tend to produce useful
>>>>>> circles
>>>>>> for shape-outside or clip-path).
>>>>>> 
>>>>>> I think I'd like to amend this to:
>>>>>> 
>>>>>> circle() = circle( [<shape-radius>] [at <position>] )
>>>>>> ellipse() = ellipse( [<shape-radius>{2}] [at <position>] )
>>>>>> 
>>>>>> 
>>>>>> Where <shape-radius> keeps the same width/height/cover/contain
>>>>>> keywords
>>>>>> as
>>>>>> the current shapes draft, and we keep the same percentage circle
>>>>>> radius
>>>>>> definition in the draft.
>>>>> 
>>>>> Alternately, we could just define <percentage> circle radius for
>>>>> radial gradients the same way, and add the 'width' and 'height'
>>>>> keywords.
>>>> 
>>>> Actually, I'm not sure that width and height are that useful for basic
>>>> shapes - when you use them as radii you get shapes that are too large
>>>> to
>>>> be used for shape-outside or clip-path.
>>>> 
>>>>> 
>>>>> circle()'s use of "cover" isn't correct - it's different from the
>>>>> definition of "cover" in every other instance of the term in CSS, or
>>>>> any reasonable English definition, as it doesn't "cover" anything.
>>>>> However, I'm not sure of what a better keyword would be.
>>>> 
>>>> Ditto for cover - I'm not seeing the use case.
>>> 
>>> Right, "cover" isn't useful at all.
>>> 
>>>>> For that matter, its definition of "contain" is different from every
>>>>> other instance, too - it only matches the normal meaning if the circle
>>>>> is centered.  Any other time, the circle won't actually be contained
>>>>> in the shape.
>>>> 
>>>> This is probably better covered by the 'closest-side' keyword. So
>>>> perhaps
>>>> we should use closest-side and farthest-side, and default to
>>>> closest-side
>>>> for circles.
>>>> 
>>>> I'd like to have default values for ellipse() radii that results in a
>>>> 'contain' situation, but I'm not sure what those defaults would be. 50%
>>>> 50% works for a centered ellipse, but once the position strays from the
>>>> center I'm not sure what to do.
>>> 
>>> Why not just use "contain"?
>> 
>> Well, there are two values. So it would be 'contain contain' but we could
>> default to contain for both so you could use zero, one or two keywords.
>> 
>> So for 'r' in circle() contain would mean closest-side
>> For 'rx' in ellipse() contain would mean closest-width-side
>> And for 'ry' in ellipse() contain would mean closest-height-side.
> 
> I have checked these changes in (just the <basic-shape> syntax changes).
> Everyone please take a look, and start a new thread if you have comments.
> 
> Thanks,
> 
> Alan
> 
>

Received on Monday, 11 November 2013 06:04:52 UTC