[css-round-display] Positioning elements with polar positioning and absolute positioning

> On Oct 24, 2015, at 1:43 PM, Brad Kemper <brad.kemper@gmail.com> wrote:
> However, there are many times when I have wanted to center in vertical
dimension only or horizontal dimension only. Especially vertical only. This
goes further beyond circular display applications, but we should consider it
so that we don't end up with multiple properties that do the same thing.
>
> For instance, I recently had an image that was used to trigger a
date-picker for the text field (input) immediately to its left, while both
were surrounded by a span with 'position:relative'. I wanted the image to
appear over the field, equal distance from the top and bottom of the field
(and in from the right a short distance). I absolutely positioned it, but to
get it vertically centered, I had to know the height of the image and use
'top'. It would have been much easier to use 'center-y:50%'.

> Or consider a horizontal slider. If I want the indicator to line up with
the tick marks, I could just set 'center-x' to a percentage. 'center-x:0'
would put the center of the indicator all the way to the left, and
'center-x:100%' would put it all the way to the right. And 'center-x:40%'
would put its center exactly lined up with the 40% tick mark.

We recently added the new property, 'polar-origin' to the CSS Round Display
Draft [1]. The property defines the origin point of polar coordinates within
the containing block area. 

It's possible to use 'polar-origin' property instead of 'position: polar'
for indicating polar coordinates like 'center' as you suggested. 
But is it appropriate to use a property to switch entire coordinate system
for positioning elements? I think there would be a situation with
'polar-origin' being omitted.

Also, 'polar-origin' makes possible to position elements with polar
positioning and absolute positioning.
	i) If you want to move an element horizontally or vertically and
then adopt polar positioning,
		give polar-origin non-auto value. 
		
		#item1 {
		  polar-origin: 0% 0%;
		  polar-distance: 10;
		  polar-angle: 90deg;
		}/* item1 moves 10px rightward from the upper left corner of
the containing block. */

	or
	ii) If you want to position elements using polar positioning and
then move it horizontally or vertically,
		specify position:polar or polar-origin: auto. Then use
'polar-angle' and 'polar-distance' to position elements in polar
coordinates. And use 'left', 'top', 'right', and 'bottom' to specify
horizontal and vertical offset.
		But, even if 'left', 'top', 'right', and 'bottom' are
supported by CSS Round Display Spec and the calculation of these value come
after the calculation of 'polar-distance' and 'polar-angle', polar-*
properties can't work together with 'left', 'top', 'right', and 'bottom'. 
		That's because 'left', 'top', 'right', and 'bottom' specify
how far an element's edges are from the padding edges of the containing
block so that they make elements moves from edges of a containing block,
whereas 'polar-distance' and 'polar-angle' make elements move from an origin
of polar coordinates.

		for example, 

		#item2 {
		  polar-origin: auto;
		  polar-distance: 10;
		  polar-angle: 90deg;
		  left: 10;	/* moves 10px from where? an origin of polar
coordinates or a left edge of containing block? */
		}
		
		Therefore, in this case, we need to redefine meaning of
'left' when using with polar coordinates or define new properties move
elements horizontally or vertically after polar positioning.

[1] https://drafts.csswg.org/css-round-display/#polar-origin-property

Thanks,
Jihye Hong