Re: [css-round-display] Suggest 'polar-anchor' property for positioning elements without overflowing

On Oct 9, 2015, at 10:44 AM, Brad Kemper <brad.kemper@gmail.com> wrote:

>What I suggested was: don't make 'polar' a separate value of 'position'.
Instead, let 
>'polar-angle' and 'polar-distance' combine with positions absolute, fixed,
and relative, 
>in the same way that left, right, top, and bottom do. The effects of left,
right, top, bottom,
> polar-angle, and polar-distance would be cumulative, so if you wanted a
horizontal or vertical
>offset, you would usually use 'top' and 'left' for that.

We also had considered about the method similar to your suggestion. 
But, I'm not sure that the coordination system is decided by the
polar-related properties not by the position: polar. 

When using position: polar, we clearly know that the element is positioned
based on the center point of the containing block. 

And there are several polar-related properties and other new properties will
be suggested.
When using those properties without position: polar, the base point for
positioning elements of properties and that in  the normal coordinate system
(point will be on the upper-left corner of containing block) are different.

Also, cumulative effects of left, right, top, bottom, polar-angle, and
polar-distance would be useful for positioning elements.

>I think most of the time, having a 2-dimensional polar-anchor seems like
overkill. Isn't the 
>real issue that you often (usually?) want 'polar-distance: 100%' to just
touch the inside edge
> of the containing block? I would do this (an effect similar to
'polar-anchor: auto) by adding 
>an optional keyword to 'polar-distance' value of either 'outer' or 'center'
which determined the 
>anchor point used for 'polar-distance: 100%'. 
>
>'Polar-distance: 100% outer' would mean that an imaginary ellipse that
touched all four sides of
> the border box (equivalent to border-radius:100%) would be positioned as
far out along the 
>ray as it could without passing the inner edge of the containing block's
border shape.

Is my understanding correct about your suggestion like below? :
	1) polar-distance: 100% outer :
	Only one point of contact exists between the element and the inner
edge of the containing block's border shape and the element is positioned
inside the containing block's border shape.

	2) polar-distance: 100% center :
	The center point of the element is positioned on the inner edge of
the containing block's border shape.

If it's correct, I agree with that having a 2-dimensional polar-anchor isn't
necessary.
Thanks to your solution, we will use polar-distance with optional keyword
value to set the anchor point instead of using polar-anchor. 
We haven't decided yet which keywords to use for the optional value. 
Of course, 'center' and 'outer' are one the table. : )


>If even more control is needed, we could have a 'polar-margin' property
that guaranteed a 
>distance between the imaginary ellipse and the inner border edge of the
container.

I think that 'polar-margin' property and 'polar-padding' property would
guarantee the overflow problem. I will add those new properties as soon as
possible.

Thanks,
Jihye

Received on Thursday, 15 October 2015 07:59:39 UTC