Re: [css-round-display] polar-pos part of abs-pos

> On Nov 15, 2015, at 16:55 PM, Brad Kemper <brad.kemper@gmail.com> wrote:
>
> Just sending this to the list again, because it relates to the need for
'polar-origin' that we discussed in the last telecon.
>
> Read the discussion below, and maybe the replies, but the basics are this:
>
> 1. Instead of having 'position: polar', just make 'polar-angle' and
'polar-distance' work similarly to 'top', right', 'bottom'. and 'left', in
that they would work within 'position: absolute | fixed | relative'.
>
> 2. Just as a non-auto value for 'top', right', 'bottom'. and 'left' is
what activates those properties for positioning, so would a non-auto value
of 'polar-distance' (which means 'auto' would be its initial value). When
non-auto, the polar-distance is measured from the center for absolute or
fixed positions, or from its static position for relative positions.
>
> 3. 'top', right', 'bottom'. and 'left' could combine with 'polar-distance'
to determine the final placement, thus negating the need for 'polar-origin'.
>
If I understand correctly, 'top', 'right', 'bottom', and 'left' act like
setting the point of origin for polar coordinates?
Can 'polar-distance' combine with 'top', 'right', 'bottom', and 'left'? 
I couldn't find any usecase about combining 'top', 'right', 'bottom', and
'left' properties with other properties which specify offset for positioning
elements.

'top', 'right', 'bottom', and 'left' indicate how far an element's padding
edge is from the containing block's edges in absolute positioning.
So, 'top', 'right', 'bottom', and 'left', element is positioned based on its
edges.
But specifying 'polar-distance' and 'polar-angle' for an element, the anchor
point of the element(default: center of the element) is used for positioning
the element. 
Therefore when combining 'top', 'right', 'bottom', and 'left' with
'polar-distance', there exist two anchor points for an element.

For example, 

#item {
  top: 10px;
  left: 10px;
  polar-anchor: 50% 50%
  polar-distance: 0;
  width: 10px;
  height: 10px;
}

In this case, it isn't clear that how far the top edge and the left edge of
the element are from the containing block's top edge and left edge. The
offset should be 5px or 10px?

So I think that the representative point for polar coordinates should be
deal with another properties instead of 'top', 'right', 'bottom', and
'left'.

> ---
>
> An alternative for #2 above, is to have 'center-x', 'center-y', and
'center' properties for positioning, similar to 'top', right', 'bottom'. and
'left', but positioning the center of the element instead of an edge. So,
'center-x:0' would position the center of the item aligned on the left edge
of the containing block, 'center-y:100%' would position the center of the
item aligned on the bottom edge of the containing block, and so on. 'Center'
would be shorthand for 'center-x' and 'center-y', so that 'center: 0 100%'
would position the center of the item to align with the bottom left corner
of the containing block. 'Center:50%' would be short for 'center:50% 50%',
and would put the item dead center of its containing block. If you had
non-auto 'center-x' and 'left' on the same element, their positions would
add together (same for 'center-y' and 'top'). So, 'center-x:50%; left:10px'
would put the center of the item 10px to the right of center. In relative
positioning, 'center-x' would have the same effect as 'left', and 'center-y'
would have the same effect as 'top'.
>
I think polar-origin works as same as 'center' that you suggested.
'polar-origin: 50% 50%' position the item at the center point of containing
block.
Also, if 'polar-origin' and 'left' are specified in an element, their
computed offset value would be accumulated for positioning.

In the conclusion, I think a non-auto value for 'polar-origin' activates
properties for polar positioning, and  'top', right', 'bottom'. and 'left'
couldn't be combined with polar-angle and polar-distance.

Thanks,
Jihye Hong

Received on Tuesday, 24 November 2015 02:58:21 UTC