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

> On Apr 20, 2016, at 3:19 AM, Brad Kemper < brad.kemper@gmail.com > wrote:
> > On Apr 19, 2016, at 12:46 AM, Jihye Hong <jh.hong@lge.com> wrote:
> >
> > Even where a property is not specifically set on an element, the element
> will often have a default value for that property.
> > In the specification, default values are referred to as initial values.
> > In CSS Round Display, the initial value for 'polar-anchor' is 'center'.
> 
> I don't think it should be. Assuming I am not confusing 'polar-anchor'
> with 'polar-origin', as I often do, 'polar-anchor: center' should be what
> lines up the center of the element with the center of the containing
block.
> Since positioned items are not centered by default, the initial value
> should be 'polar-anchor: auto'.
> 

'polar-anchor' is the element's representative point(anchor point) when it
is positioned in the containing block.
'polar-anchor' can set the anchor point within the content area of the
element.
When 'polar-anchor' is specified with 'left' property on an element,

#item {
   position: absolute;
   polar-anchor: left;
   left: 50px;
   width: 100px;
   height: 100px;
}

'polar-anchor: left' means that the representative point (anchor point) is
at the middle of the element's left edge.
So the element's left edge aligns with 50px from the left edge of the
containing block.

But when the value of 'polar-anchor' is changed from 'left' to 'center',

#item {
   position: absolute;
   polar-anchor: center;
   left: 50px;
   width: 100px;
   height: 100px;
}

The anchor point is at the center of the element.
And the anchor point is positioned at a distance of 50px from the left edge
of the containing block.
This is the same result when #item is like below:

#item {
   position: absolute;
   polar-anchor: left;
   left: 0px;
   width: 100px;
   height: 100px;
}

And yes, I also think that 'auto' is better for the initial value of
'polar-anchor'.

> > 'auto' works as:
> >   - 'auto' becomes 'top left' if an element is positioned in Cartesian
> coordinates (specifying Top/Right/Bottom/Left).
> 
> I don't know what you mean. top/right/bottom/left properties position
> items by their top/right/bottom/left edges, while  'polar-anchor'
> positions items by their centers (which is why I would change the name
> from 'polar-anchor' to 'center').

My suggestion was, 
- If any positioning property isn't specified, 'polar-anchor: auto' is the
same result of 'polar-anchor: left top'.
- When 'polar-anchor: auto' is specified on an element with 'left', when it
works as 'polar-anchor: left'.
- When 'polar-anchor: auto' is specified on an element with 'top', when it
works as 'polar-anchor: top'.
- When 'polar-anchor: auto' is specified on an element with 'right', when it
works as 'polar-anchor: right'.
- When 'polar-anchor: auto' is specified on an element with 'bottom', when
it works as 'polar-anchor: bottom'.
And 'polar-anchor: auto' is specified with 'left' and 'top', when it works
as 'polar-anchor: left top'.

'auto' works like this to get the same result as the normal positioning
method.

> >   - 'auto' becomes 'center' if an element is positioned in polar
> coordinates (specifying 'polar-distance' or 'polar-angle').
> 
> You aren't really changing the coordinate system of either the element or
> its containing block. '50% 50%' still refers to halfway across and down
> from the zero point on the left top. And all other properties continue to
> use Cartesian coordinates too. 'Polar-distance' and 'polar-angle' are
> simply an additional transformation from where 'polar-anchor' puts it.
> 
> Polar-anchor:0 0 would put the element's center into the top left corner
> of the containing block.
> 
When you specify 'polar-distance' or 'polar-angle' on the element, it means
that the element will be positioned in polar coordinates.
By default, the element's center is put into the center of the containing
block for polar positioning.

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

For example,

#item {
   position: absolute;
   polar-origin: 50% 50%;  /* The origin of coordinates is at the center of
the containing block. */
   polar-anchor: 0 0;  /* The anchor point(representative point) of the
element is at the upper left corner of the element. */
   polar-distance: 0px; /* #item is positioned with polar positioning. And
the distance between the origin of coordinates and the anchor point of the
element is 0px.*/   
}

> > #item {
> >   position: absolute;
> >   polar-origin: center;
> >   width: 50px;
> >   height: 50px;
> >   background-color: red;
> > }
> >
> > #item is positioned in the Cartesian coordinate system, so the
> representative point for positioning #item is at the top left corner.
> > The top left corner of #item is positioned at the center of the
> containing block.
> 
> That makes no sense to me. 'polar-origin: center' should mean move the
> item so that's it's center aligns with the 50% 50% ('center' value) of the
> containing block.

Yes, 'polar-origin: center' means move #item to the center of the containing
block.
But the point of the element which aligns on the containing block's center
isn't its center.

'polar-anchor' isn't be specified on #item, so by default, the point of the
element is decided by 'polar-anchor' set to the initial value, 'auto'.
In this case, 'auto' works like 'left top' so the upper left corner of the
element is positioned at the center of the containing block.

> > And when 'polar-distance' is specified on #item,
> >
> > #item {
> >   polar-origin: center;
> >   polar-distance: 0px;
> >   width: 50px;
> >   height: 50px;
> >   background-color: red;
> > }
> 
> Ah, you are making polar-distance into a switch. That's seems unintuitive.
> 
> It makes a lot more sense to me to make 'polar-anchor' the thing that
> aligns the center of the element with the specified value in the
> containing block. This would make 'polar-anchor' much more like how
> top/right/bottom/left work, and polar-distance determines how much to move
> it at an angle from there (initial value of zero).
> 
> Thus with position:relative or polar-anchor:auto, you only have to deal
> with polar-distance and polar-angle to move it (at a distance along an
> angle) from its non-positioned location.

It was resolved that using 'polar-distance' or 'polar-angle' makes a switch
of the coordinate system from Cartesian coordinates to polar coordinates at
CSSWG F2F in Sydney [1].

Do you think it is more intuitive when 'polar-anchor' would do that?
I'm not convinced because 'polar-anchor' can be used for positioning the
element in both coordinate systems.

> I still feel that using 'polar-' prefix and asking people to think about
> coordinate systems is adding an unnecessary complication. It brings to
> mind polar map projections and cartography, and geometry, instead of just
> saying "this property moves an object so that its center aligns with the
> specified value, as a point within the containing block." Just as the
> 'left' property means "move (and/or resize) an object so that its left
> edge aligns with the specified value, as a distance from the left edge of
> the containing block."
I also think that 'polar-' prefix for 'polar-origin' and 'polar-anchor'
isn't appropriate.
Because they could be used to position elements not just in polar
coordinates.

I think the namings could be changed like:
  polar-origin -> origin-position
  polar-anchor -> anchor-position

Thanks,
Jihye

Received on Thursday, 21 April 2016 08:57:16 UTC