[css-shapes] how to position <basic-shape>s

Hey all,

The current editor's draft of shapes defines <basic-shape> functions that
take their position arguments from SVG basic shapes. This means that
there's just a basic x,y for positioning. CSS has additional positioning
mechanisms, and it would be good to support these. It would also be good
to be compatible with SVG, as <basic-shape> is used there as well.

So far there are two proposals that can (to some extent) accommodate both
requirements. It may be possible to go forward with both proposals if they
are both deemed worthy.

1. The first proposal is to introduce a new shape() function that would
use CSS positioning (and other syntax) exclusively. It would use radial
gradient syntax to define circles and ellipses, and we would define how to
express rounded rectangles and possibly polygons in the shape() function
with future extensions. So you could any of these to express a centered,
10px radius circle:

circle (50% 50% 10px)
shape (circle 10px at 50% 50%)
shape (circle 10px)

2. The second proposal is to adapt some of the current functions for
future CSS position extensions. So the circle() function would become

circle (10px at 50% 50%)

And a square covering the top left corner would change from this

rectangle (0px 0px 50% 50%) /* x y w h */

To this

rectangle (50% 50% at 0px 0px) /* w h at x y */

One difficulty with the second proposal is that percentage position values
are handled differently between CSS and SVG. So while this defines a
square that covers the bottom right corner in the current syntax:

rectangle (50% 50% 50% 50%) /* x y w h */

The CSS-style ordering would actually imply centering that square:

rectangle (50% 50% at 50% 50%) /* w h at [ x y (as defined by
background-position) ] */

So in order to be compatible with future CSS extensions to the position
arguments in the current <basic-shape> functions, we'd have to break SVG
compatibility for percentage values. And this would introduce a
dissimilarity between how percentages are handled on x,y arguments in
rectangle() versus how they are handled in polygon()

Conclusion:

Given the percentage issue, my recommendation is to go with the first
proposal, which allows us to get both CSS and SVG compatibility. We can
either define shape() in level 2, or allow shape() with circles and
ellipses in level 1 and extend the shape() keywords to rectangle and
possibly others in level 2. Given that we're currently discussing how to
amend the <position> value, it may make the most sense to put off all of
shape() to level 2.

Thanks,

Alan

Received on Wednesday, 9 October 2013 18:34:06 UTC