Re: [css-shapes] Functional Notation

On 10/05/2013 10:36 AM, Brad Kemper wrote:
>
> That is basically 'rect()', isn't it? Rect() has commas to disambiguation itself from the earlier version. Both versions are bad. I don't use it often, because it's dependence on positioning severely limit its usefulness. But when I do, I have to remember what version has commas, and which version is the harder to use one (the old version, which made me do arithmetic). The new version has commas, but that's more unusual in CSS.

No, rect() is weird. The numbers are all offsets from the top/left
corner. inset-rect() is like margins, each side is inward from its
respective edge.

Which is why imo the syntax should *be* exactly like margins:
   inset-rect( [<length>|<percentage]{1,4} )
and fill in the exact same way.

>> I agree as well. Tab is right that path() potentially should use the SVG syntax. This doesn't make it easy to allow just styling the corners. That is a good point of fantasai. But this:
>>
>>     rectangle( <size>? [ at <position> ]? [ radii <radius>{1,4} [/ <radius>{1,4} ]?] )
>>
>> seems hardly be easier.
>
> It does seem clearer. But I am a big fan of simplicity. I think the following would be good enough:
>
> rectangle( <size>? [ at <position> ]? [ radius <radius>]? )

I agree with this (given s/radius/round/). I don't think we
need full-on border-radius syntax at the moment, although
I think it's good to pick a syntax that we can extend in that
direction.

> Once you accept that, then it is not much of a leap to extend just a little more for clarity by turning it into this:
>
> rectangle(<size> at <position>[, round <radius>? ]? )

I'd drop the comma, but otherwise, I agree with your logic 100%.

>> And to get back to Francois' proposal with width, height, contain and cover:
>>
>>     circle([ <rx> | width | height | cover | contain ] [ <cx> <cy>? ]?)
>>
>> which allows things like
>>
>>     circle(cover)
>>     circle(width 50% 0%)
>>     circle(50px)
>
> How useful is it for an element in a circle shape to contain or cover its parent element? I'd be fine with just 'circle(<r>)' or 'ellipse(<r>{1,2})'.

Fairly useful, I think.

~fantasai

Received on Monday, 7 October 2013 22:05:12 UTC