W3C home > Mailing lists > Public > www-style@w3.org > January 2016

Re: [css-round-display] Positioning elements with polar positioning and absolute positioning

From: Brad Kemper <brad.kemper@gmail.com>
Date: Sat, 9 Jan 2016 00:22:24 -0800
Cc: Jihye Hong <jh.hong@lge.com>, www-style list <www-style@w3.org>
Message-Id: <6789931C-CE1B-4B5F-9F3A-0C489A135963@gmail.com>
To: Florian Rivoal <florian@rivoal.net>

Sent from my iPad
> On Jan 6, 2016, at 8:10 PM, Florian Rivoal <florian@rivoal.net> wrote:
> Hi Brad,
>>> Is it possible to use like below?:
>>> position: absolute;
>>> center: 50% 50%;
>>> polar-anchor: 25% 25%;
>> You wouldn't need polar-anchor for that. You would just do this:
>> position: absolute;
>> center: 75% 75%; /* 50% + 25% = 75% */
>> I am suggesting we don't need polar-anchor at all. For cases where you want to offset it from center by a non-percentage length, margin-top and margin-left work fine for this, as they have for many, many years with absolute positions set in percentage.
> I think you're confusing polar-origin and polar-anchor here.

Yeah, I do that a lot. I always have to stop to think of which one is which. It is easy to think of the ray "originating" from where it is "anchored" in the containing block, but that isn't what you mean by anchor.

> Center (if adopted) makes polar-origin redundant, but not polar-anchor.


> polar-origin (like your proposed center property) choses the point in the containing block to which we align the element. %ages are relative to the size of the containing block.
> polar-anchor choses the point in the element that we align. the initial value is "center center" %ages are relative to the size of the element being aligned.
> So the following two lines are equivalent:
>  polar-origin: center center; polar-anchor: center center; polar-distance:0;
>  center: center center;
> So are
>  polar-origin: center left; polar-anchor: center center; polar-distance:0;
>  center: center left;
> or
>  polar-origin: 25% center; polar-anchor: center center; polar-distance:0;
>  center: 25% center;
> But
>  polar-origin: center center;  polar-anchor: top left; polar-distance:0;
> puts the top left corner of the element at the center of its containing block, and
>  polar-origin: 50% 50%; polar-anchor: 25% 25%; polar-distance: 0;
> aligns to the center of the containing block a point in the element being aligned that is
> 25% of the element's width from its left and 25% of the element height from its top.

Which in turn means that the true center of the element has been nudged down and to the right by 25% of its height and width.

> If "center: center center: polar-anchor: top left;" and "center: 50% 50%; polar-anchor: 25% 25%;" is supposed to do the same, then the "center" name is confusing, since what it is aligning is not necessarily the center.

Or perhaps it is 'polar-anchor' that is the confusing name here. See below.

> If it doesn't do the same, then it is less expressive.
> TL;DR: as proposed, center and polar origin can differ on two aspects:
> - polar-origin only affects polar positioning, center also affects rectangular positioning
> - center always aligns the center of the element, polar-origin aligns the anchor point of the element, which is initially the center, but doesn't have to be.

In theory, we could still have 'polar-anchor' change the point of the positioned element that the 'center' property aligns from, and we could call it 'center-point' instead (defaulting to '0 0' for dead center, with percentages referring to the distance from center to edge). You can move the center point to the left side (center-point:-100%), and then 'center-x' would act a lot like 'left'.

But I'm not a fan of this property either, whatever it is called. I think the problem polar-anchor is trying to solve (if I understand it correctly), is better solved in other ways. It is awkward if the 12 numbers on the clock all need to have separate anchor values in order to make them seem equidistant from the edge, because the containment is dealing with their corners and not their centers (which you could see in example 6, that it would make the center of the numeral six much closer to the edge than the numeral two). That should maybe be a separate topic in a separate thread, as I feel the same way about it regardless of whether or not we adopt 'center' and use 'polar-*' properties within abs-pos, abs-rel, and abs-fixed.

>> Incorrect. The main feature of 'center' is to specify where the center of something is positioned relative to its containing block. This can be to the center of its containing block (with '50% 50%'), or somewhere else with some other value. This can happen with or without polar- anything.
>> It's separation of concerns. The main feature of 'polar-angle' and 'polar-distance' is to move something a certain distance at a certain angle. It need not be concerned with where that movement starts from.
> I understand the separation of concerns argument, but I have a reservation. When you use polar-angle/distance, you most often want things to start from the center.

I disagree, a lot. I think there is a subclass of cases where you want to start in the center (like clock face elements). But think of it this way: when moving a distance along an angle, you  could end up at the same place by moving horizontally and then vertically. It is a convenience to use an angle instead, because sometimes the length of that hypotenuse is what you care about more than whatever length the other two sides of the right triangle end up being. So say, instead of 'left: 3px; top: 4px;' you would have 'polar-distance:5px; polar-angle: [whatever, someone else do the math, I never took trig];'. This is a useful convenience for any positioning.

So for position:relative, there would be no centering anyway, you just move the element at an angle from wherever it started. Same thing if top, right, bottom, left, center-x, and center-y are all 'auto', except that it is taken out of flow. If you have 'top:0; left:0; polar-angle: 45deg;' then the item is positioned somewhere along a line extending 45deg from the top left corner. That is, it starts out with its top left corner in the top left corner of its containing block, then moved 45deg from there.

> Regardless of whether we use center or polar origin, I think it would be nice that we define the various "auto" values so that if you are only setting polar-angle/distance, it works from the center.
> i.e. If we use center instead of polar origin:
> a) center-x (resp. center-y) only works if left and right (resp. top and bottom) are auto

Yeah. [1]

> b) if polar-distance is auto, center:auto resolves to center: 0 0 (legacy behavior)

'center: 0 0' would position the element with its center in the top left corner of its containing block (horizontal center at 0 from left edge, vertical center at 0 from top edge). That is not what it should do, especially since 'auto' would be the initial value of 'center'. 

> c) else, if polar-distance is not auto, center:auto resolves to center: center center;

No, that would mean that with all initial values, everything would be centered as soon as you had 'position:absolute'. That doesn't work. 'center: center center' means align the center of the element with the center of the containing block when absolutely or fixed positioned. For relative positioning, it would mean the same as 'left:50%; top:50%' (not terribly useful, in my experience, but that's beside the point). 

> This partly breaks the separation of concerns, but does so to make the typical polar use cases simpler to express.

It only saves you from adding a 'center: center' (or 'center:50%' or 'center:50% 50%' or 'center: center center'), for those times when you wanted your angular movement to start from the center of the box. I would find it surprising, frankly. It would be much better for authors to be explicit about when they wanted centering prior to angular repositioning. 

>>> Therefore including 'origin' to the property's name seems
>>> natural to me. For example, 'box-origin' or 'origin-point'?
>> The positioning-by-center that it does is not just for setting an origin for polar movement.
>> It has other use cases too.
> I think this last sentence is the key here. Using center instead of polar-origin creates 2 tradeoffs with downsides not encountered with polar-origin:
> - we either have the maybe-too-magical auto behavior I describe above, or make polar coordinates more verbose to use in simple cases

Not too verbose to me. Too magical is to center when the author didn't ask for centering, only asked for angular movement. It is only one property to ask for the centering explicitly. That isn't a downside; it is clarity of intent. 

> - we either drop polar-anchor, or find a different name than center, or live with a confusing name

Drop polar-anchor (it isn't really needed, because margin-left and margin-top can give you the same effect), or call it 'center-point', so that 'center-point:5px 50%' would move the center point (used by 'center') to the right 5px, plus halfway down to the bottom edge, in addition to wherever 'center' moved it. Then polar-angle and polar-distance can move it some more, if desired.

> The upside is that we gain the ability to align things by their center (or anchor) regardless of coordinate systems.

It also makes it more obvious when the author wants or doesn't want centering to combine with the angular positioning.

> Echoing Tab's comment from the last teleconf, can you give some practical use cases where this would be desirable, and not achievable in a satisfactory way with other existing mechanisms.

I had a couple I mentioned before, which might be included in these:

-- a horizontal (or vertical) gauge, in which the width (or height) of the pointer is unknown but it (and the tick marks of any size or shape) could be each centered at any percentage along a line. To do that now for a horizontal gauge, I'd probably have to position the marker on the right edge of an invisible wrapper box that had percentage width. 

-- animate an image around the perimeter of an element, staying centered on the edge, even if you scale the image (from its center).

The separation of center-x and center-y also allows some interesting opportunities:

-- position a bullet marker to the left of text, vertically centered, with 'right:100%; center-y:50%;'. 

-- position 3 small decorative elements under a paragraph (top:100%; margin-top: 1em;), with one at 'center-x: 25%', one at 'center-x: 50%', and one at 'center-x: 75%'.

1) I still have some thoughts on combining left and top with center-x and center-y, but this isn't strictly necessary. The simplest is to ignore center-x (resp. center-y) when left or right (resp. top or bottom) are not auto.
Received on Saturday, 9 January 2016 08:22:56 UTC

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:14:56 UTC