Re: [css-shapes] Functional Notation

On Oct 4, 2013, at 6:40 AM, Brad Kemper <brad.kemper@gmail.com> wrote:

>> On Oct 3, 2013, at 2:21 PM, Alan Stearns <stearns@adobe.com> wrote:
>> 
>> I think this is the best summation of the choice between the two options
>> we're considering. Do we want SVG-similarity for <basic-shape>, or
>> CSS-similarity?
> 
> Speaking for all of us who never really learned to hand author SVG, I would definitely say I'd prefer CSS-similarity, to make it easier to learn and remember, and easier to understand when reading.

The nice think about shapes currently is that you don't need to learn a lot:

rectangle(<x>, <y>, <width>, <height>)

Quite simple right? And very logical. The only thing that this has in common with SVG is that you have x, y, width and height. Something that authors sometime would like to use but can't.

People more familiar with margin and padding styling can use:

inset-rectangle(<top>, <right>, <bottom>, <left>).

I am personally always unsure about the right order. (Even now I am not sure if I quoted it right.) But if you know how margin does it, then you are good.

Both functions potentially take two optional arguments for the border radius.

> 
>>>> ex rounded corners in CSS are used (or abused)
>> to create non-rectangular shapes. In SVG, it makes sense to have only
>> basic rounded corners for rectangles, because you can use more appropriate
>> methods to create those non-rectangular shapes. Since I expect we'll
>> eventually add path() to the <basic-shape> roster, I'm not sure it's worth
>> the effort to synchronize rectangle() with what's possible with
>> border-radius.
> 
> I can agree with that.

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. I still doubt that a rectangle without x, y will be used a lot.

I could live with:

    rectangle(<x> <y> <width> <height> [ round <rx> <ry>? ]? )

though. This would allow to adapt a new border syntax to basic shapes as well. I would not speculate right now how this could look like.


The circle function could be

    circle(<r> [ <cx> <cy>? ]?)

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)

And so on.

Greetings,
Dirk

Received on Friday, 4 October 2013 07:53:31 UTC