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

Continuing a discussion about using polar positioning as part of absolute
positioning from last Telecon [1],
I am curious about something of your idea [2]: 

1. For using 'top', right', 'bottom', and 'left' combining with
'polar-distance', we have to redefine the meaning of 'top', right',
'bottom', and 'left'.
That's because 'top', 'right', 'bottom', and 'left' indicate how far the
padding edge is from the containing block's edge in abspos. But
polar-distance and polar-angle are relative to polar coordinates, specially
to the point of origin.

I couldn't find any usecase about redifining 'top', 'right', 'bottom', and
'left' properties yet.
If redefine those properties, what will be the definition of those
properties?
And Can 'top', 'right', 'bottom', and 'left' properties be applied to the
result of polar positioning?

2. I can't find any difference between 'polar-origin' property[3] and
'center' which you had suggested.

'polar-origin: 50% 50%' position the item at the center point of containing
block. 
Also, 'polar-origin: 50% 50%; left:10px' would put the center of the item
10px to the right of center when we use polar positioning in the absolute
positioning.

Am I misunderstanding something about your suggestion?

>> 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

[1] https://lists.w3.org/Archives/Public/www-style/2015Dec/0048.html
[2] https://lists.w3.org/Archives/Public/www-style/2015Nov/0253.html
[3] https://drafts.csswg.org/css-round-display/#polar-origin-property

Received on Friday, 4 December 2015 09:14:27 UTC