Re: [css-round-display] Add 'auto' to 'polar-anchor' and make it as initial value

Sent from my iPad

On Apr 27, 2016, at 6:42 AM, fantasai <fantasai.lists@inkedblade.net> wrote:

>>> polar-anchor:0 0' would put the element's upper left corner into the center
>>> of the containing block when you give a value as '50% 50%' for
>>> 'polar-origin'.
>> 
>> Yes that makes some sense. A different way to do it would be to have
>> 'polar-anchor:0 0' be the center of the element. Positive amounts
>> would move the anchor towards the right/bottom, while negative amounts
>> would move the anchor towards the left/top. This would have the same
>> general effect as polar-anchor does already, except it would not need
>> an 'auto' value. 'polar-anchor:0 0' would just always mean "don't
>> move the origin at all" (from its default of "center of the element",
>> which is where it starts when 'polar-origin' is non-auto).
>> 'polar-anchor:10px -50%' would mean "move the origin 10px to the
>> right, and 50% of its height towards the top."
> 
> While I'm sympathetic to this design, I think we should keep consistency
> with transform-origin and background positioning here. So 0 0, IIRC,
> would represent the top left corner.

Ah, but it is only consistent with those if you are thinking of it as an internal coordinate point, as the values are in transform-origin and background-position. An internal coordinate point whose sole effect was to move the element, off of its initial natural centering, by an amount in each dimension equal to half the dimension (width or height) minus the specified value in that dimension. 

So, (assuming 'polar-origin:50% 50%; polar-anchor:50% 50%' centered the element in its containing block, and that '50% 50%' is the initial value for polar-anchor), 'polar-origin:50% 50%; polar-anchor:0 0' would move the anchor by half the element's width and height to the upper left corner, and then that corner would be at the center of the containing block. Thus, the final effect would be that the first 0 moved it half its width to the right, and the second 0 moved it half its height downward. 

That's quite a mental journey to go from the values to the actual effect. If we keep this property, I'd rather cut out the high concept of the first part, and just enter the values I want it moved, assuming it starts out centered at the point of the containing block specified by 'polar-origin'. And then give 'polar-anchor' a more meaningful property name.

So, instead of 'polar-origin:50% 50%; polar-anchor:0 0', I would have 'polar-origin:50% 50%; nudge:50% 50%' to put it in the exact same place. **The value would not be a coordinate**; it would just be a pair of horizontal and vertical distances to move the element, from where 'polar-origin' aligned its center.

Instead of 'polar-origin:50% 50%; polar-anchor:50% 50%' to center it perfectly, I would use 'polar-origin:50% 50%; nudge:0 0'. 

Instead of 'polar-origin:50% 50%; polar-anchor:100% 100%' to move it up from center by half its height and left of center by half its width, I would use 'polar-origin:50% 50%; nudge:-50% -50%'.

If I wanted to move it 1px to the right and 1px up, from centered, I would use 'nudge:1px -1px', not, uh, 'polar-origin: calc(50% - 1px) calc(50% + 1px)'. Yikes.

To me, my way seems tremendously more intuitive and straightforward. I hope others can see it my way. I feel the difference is like night and day. 

It would be even more clear if we also changed the other property name from 'polar-origin' to 'center', so it was more analogous to the property names of 'top', 'right', 'bottom', and 'center'. 'Offset-center' would be OK too, as a component of an 'offset' shorthand. 

>> Of course, this then has EXACTLY THE SAME effect as 'transform:
>> translate(tx,ty)', where tx and ty are the polar-anchor values
>> specified, but multiplied by -1.
> 
> Yes, I'm not yet convinced polar-anchor is necessary.

Its main value over 'transform: translate()' seems to be in having it as an independent property that does not need to be part of a list of transform functions. Its main value over relative positioning is that it can be layered on top of absolute positioning for the same element. Personally I wouldn't mind if all the transform functions were added as properties, but that goes beyond the scope of this conversation. It doesn't really feel essential to me for round displays. 

I also think that the existing top, right, bottom, left keywords could be combined with 'polar-position' (maybe in a way similar to how you've combined them with align-self and justify-self), then this would also provide a nudge factor that could make polar-anchor less valuable (though it wouldn't be able to nudge by percentages of the positioned element's dimensions).

Received on Thursday, 28 April 2016 06:01:07 UTC