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

On Tue, Jul 21, 2009 at 4:12 PM, fantasai<fantasai.lists@inkedblade.net> wrote:
> Håkon Wium Lie wrote:
>>
>> Also sprach fantasai:
>>
>>  > > Opera, however, doesn't cap the radii but attempts to honor them. I
>>  > > can see many uses for the elliptic expressions that this behavior
>>  > > allows. The spec, instead, will leave us with many stadium-like
>>  > > borders, as can be seen in the two leftmost Firefox renditions.
>>  >  > If you want an elliptic look, then set the two corner radii to two
>>  > different values.
>>
>> That's possible when you know the width and height of the box. But, if
>> either the widths or height is unknown, it is impossible to get the
>> elliptic shape in a static style sheet. For instance, this gives you
>> an elliptic border:
>>
>>  width: 100px; height: 200px;  border: 1px solid red;  border-radius: 50px
>> / 100px;
>>
>> However, when the size of the box changes the elliptic shape is gone.
>> (It's probably possible to reinstantiate the elliptic shape through JS
>> magic, be we should try to avoid that for common effects)
>>
>>  > The goal of the formula is to preserve the shape
>>  > of the curve
>>
>> The question becomes: if preserving the shape of the curve worth the
>> higher cost of achieving elliptic forms?
>> If we remove the protection of the shape, what's the worst case
>> scenario?
>
> Authors get shapes they didn't intend.
>
> You're using the radii reduction formula in Opera (you have one, it's just
> different from the one in the spec) to hack an oval shape, that's not a
> typical usual use-case. See responses by Tab and Brad.

Specifically, it appears from the provided renderings that the radius
reduction formula is identical to the spec but for one detail: it
applies the formula separately to each side rather than finding the
largest reduction needed and applying that to all sides.

> What you want appears to be 'border-radius: 50%'. Yes? That's a different
> feature, and one we can consider if there's agreement on what it should
> do. (Mozilla used to have percentage border-radii, but because they didn't
> allow elliptical corners it always resulted in quarter-circles.)

As opposed to round corners, where I typically want to *keep* them
round, if I define elliptical corners I think I'd often want exactly
the resizing behavior that a % border-radius would provide.

(Though then we have a further question - what to do when the two
border radiuses for a given side add up to more than 100%?  Stick with
current spec behavior and shrink all radiuses, or shrink just the
offending sides?  I'm inclined to go with the former for parsimony,
but don't know which would feel more 'natural' to me.)

(As well: mixing length and % values.  How do we determine how much to
shrink these when they're too large, e.g. "border-radius: 50% 100px"
on a 150px-wide box?)

~TJ

Received on Tuesday, 21 July 2009 22:23:15 UTC