Re: [css-round-display] What is the % in device-radius relative to?

> On 16 Oct 2015, at 02:49, Tab Atkins Jr. <> wrote:
> On Sun, Oct 11, 2015 at 8:23 PM, Hyojin Song <> wrote:
>> On 08 Oct 2015, 07:43 AM, Tab Atkins Jr. <> wrote:
>>> The spec says that %s in the 'device-radius'  media feature are
>>> resolved "proportional to the diameter of the screen".  Rectangles
>>> don't have diameters, tho.  What dimension should it be resolved off
>>> of?
>>> (I suspect width.)
>> %s in the 'device-radius' have relevance to a horizontal radius and a vertical radius of the screen according to the length of width and height of the screen each. Thus I modified the expression from diameter to width and height, and added more.
> This doesn't work; it assumes that the length/percentage is identical
> in both dimensions.  If they're different, it's still undefined.
> Take an elliptical screen.  It's 50% in both dimensions, but the
> <length>s are different.  Or take a square screen whose corners are
> elliptical.  Here, neither the <length> nor the <percentage> are the
> same across the two dimensions.
> You need to define a *single* way of measuring the size of the screen
> and the size of the curve, so we can resolve the <length> and
> <percentage> unambiguously.

I don't think we need percentage and lengths to be equivalent to eachother.
Each of them absolutely needs a clear and unambiguous definition, but there's
no reason it has to be the same.

Lengths have to match in both dimensions, so they can only ever match with
circles, not ellipses, when used in equalities.

For percentages, making the horizontal radius of the ellipse relate to the
width and the vertical one relate to the hight is useful and unambiguous.
This means that a fully rounded screen matches device-radius:50%, regardless
of whether it is a rounded square screen (circle) or a rounded rectangle
screen (ellipse).

If you have a circular (non elliptical) rounded corners on a rectangular screen,
they never match (device-radius: X%), for any value of X. However, we can make
them work with inequalities.

A definition of inequalities that works well for circles / ellipses of
various sizes, and gives meaningful results for arbitrary sizes is to base
it on how much the shape obstruct the corners. Any shape that obscures the
corners at least as much as the circle/ellipse with radius X matches
(device-radius > X), and any shape that obscures the corners at most as
much as the circle/ellipse with radius X matches (device-radius < X)

So on a tall and narrow rectangular screen, a full ellipse would match
(device-radius <= 50%), but so would circularly rounded corners with a 
radius of half the width of the screen (or less).

The other way around, a full ellipse would match (device-radius > 25%),
but so would a rhombus.

 - Florian

Received on Friday, 16 October 2015 04:50:51 UTC