Re: [css3-background] should radii be capped?

Maciej Stachowiak wrote:

 > I think authors are more likely to want to achieve and preserve a  
 > "rounded rectangle" shape with circle-arc corners, and have that  
 > maintained independent of resizing, than to want to achieve an  
 > elliptical shape and have that maintained independent of resizing. If  
 > the latter use case is actually important, then it may deserve some  
 > special syntax, such as percentage units for border-radius.

Yes, I think the use case is important. And it would fall out
naturally from % units, when introduced on 'border-radius'. In fact, I
discovered that this already works in Opera's implementation (which
isn't publically available yet). Test case and screen shot are here:

  http://people.opera.com/howcome/2009/tests/border-radius9.html
  http://people.opera.com/howcome/2009/tests/border-radius9.png

Zack Weinberg wrote:

 > As of FF3.5, Mozilla still does support percentages in border-radius,
 > but the percentages are always interpreted relative to the outer
 > *width* of the border box, even for the vertical semi-axis of an
 > ellipse.  This is so we can continue to get circular arcs for
 > "border-radius: 10%" without messing with the defaulting rules.
 > 
 > I'd be happy to change that at least somewhat, but I think
 > "border-radius: 10%" needs to keep doing quarter circles.

So, you'd like for percentage values to always refer to the width?

This, alas, seems incompatible with the request for ellipsis. 

I can see four possible solutions:

1) We introduce % units and specify that percentages refer to width
   /or/ height. This makes 'border-radius: 50%' become an ellipsis. 

   The syntax seems natural, but percentage units would not guarantee
   shape.

2) We introduce % units, but only 'border-radius: 50%' gives you an
   ellipsis. 'border-radius: 49%' would not.

   This is probably not a good solution, as roundoff errors could
   create interoperability issues.

3) We introduce a keyword, e.g., 'border-radius: ellipse'.

4) We allow the '/' in the syntax to act as a switch:

     border-radius: 50%;         /* refers to width of element */
     border-radius: 50% / 50%;   /* refers to width/height of element */

   This is probably overloading the '/' notation.

My preference is for 1. There are other ways to guarantee shape (use
pixels, ems etc). But, it seems that Mozilla would have to change.

3 would also work.

Cheers,

-h&kon
              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome

Received on Wednesday, 22 July 2009 10:42:02 UTC