- From: Jihye Hong <jh.hong@lge.com>
- Date: Thu, 21 Apr 2016 17:56:42 +0900
- To: "'Brad Kemper'" <brad.kemper@gmail.com>
- Cc: "'www-style list'" <www-style@w3.org>
> 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