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 10:07:38 -0800
Cc: www-style list <www-style@w3.org>, Florian Rivoal <florian@rivoal.net>
Message-Id: <905B55E1-9556-41D5-8F6C-D8746DF1A1B8@gmail.com>
To: Jihye Hong <jh.hong@lge.com>



Sent from my iPad
> On Jan 7, 2016, at 3:30 PM, Jihye Hong <jh.hong@lge.com> wrote:
> 
> On Jan 07, 2016, at 1:10 PM, Florian Rivoal <florian@rivoal.net> wrote:
>>>> 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% */
> 
> The examples above have different results.
> If the containing block has height: 50px, width: 50px and the element within
> that containing block is
> 
>  position: absolute;
>  width: 20px;
>  height: 20px;
>  center: 50% 50%;
>  polar-anchor: 25% 25%;
> 
> then the center point of the element is positioned to the (30px, 30px) of
> the containing block.
>    ( x position of the element's center point 
>            = width of the containing block * 50% + width of the element *
> 25% 
>            = 30px )
> 
> but when the element is specified like below,:
> 
>  position: absolute;
>  width: 20px;
>  height: 20px;
>  center: 75% 75%;
> 
> in that case, the center point of the element is positioned to the (width of
> the containing block * 75%, height of the containing block * 75%) of the
> containing block.

You're right, I was wrong. So, the basic difference between this margin-left and margin-right is that percentages resolve to the width/height of the element itself.

If that is important, then it is probably no more important for polar than for any other positioning, or even non-positioned items. Which means the name is unintuitive. People would likely use it whenever they wanted an offset that was in addition to margin and position adjustments, or whenever they wanted to move something by a percentage of itself. In which case, it should be 'offset: 25% 25%'. **If it is important to have this.** 

But I don't see any evidence that it is more important for angular positioning than for anything else. Wherever the item ends up from using polar-distance and polar-angle can be simulated by using left and top. So it would certainly be no less useful when combined with left and top. And once you have that, then why not for static position as well?

>>> 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.
> 
> Do you think that after positioning element with 'center', using margin can
> do the same result of using 'polar-anchor'?

I would expect to. 'Center' would move the margin box, same as other positioning properties. 

> I don't think so. 
> When using 'center' property, the anchor point of element is always the
> center of the content area.
> So the margin should be applied according to the center point, not the upper
> left corner of the content as the general box model.
> Therefore modifying margin value of the element positioned by 'center'
> doesn't change the position of the element within the containing block.

We can define it however we want. I think how I've described 'center-x' can be thought of as the same as 'left', minus half the element's width (if we ignore combinations of 'left' and 'right'). Likewise with 'center-y', 'top', half the element's height, etc. I am personally fine with center-x and center-y offsetting the whole margin box, which is actually pretty much how the other trbl properties work. 

>> 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. If it
> doesn't do the same, then it is less expressive.
> 
> I also agree with that.

I think that is mostly because you are approaching 'center' and 'polar-anchor' as things that are primarily to support polar positioning. I am looking at them as how they might be useful (or not) in general, and of how authors might use them in ways that you didn't originally intend (which is not necessarily a bad thing). As such, 'polar-anchor' is the more confusing name. It is basically a property that adds offsetting to whatever is already being offset by positioning and margin. Or, if it is not intended to work with 'left' et al too, then it can also be thought of as moving the center point used by the 'center' property.

Thus, 'center' is a perfectly reasonable property name for what I've described, but 'polar-anchor' is not.

>> 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 
>> - we either drop polar-anchor, or find a different name than center, or
> live with a confusing name
> 
> Do we need to drop 'polar-anchor'? 
> 'polar-anchor' would improve the flexibility of CSS positioning and avoid
> the overflowing problem.

I think it only slightly improves upon margin, by letting you use a percentage of the width/height of the element as the measure. If that's important, then we should change the name and add this capability to at least all other types of positioned content, and maybe to static positioned elements as well. The only relationship it has to polar is that polar has two parts: 1) centering and 2) moving at an angle. If centering is handled by a separate property (because of its general usefulness), then the "moving at an angle" part is what's left over for 'polar-*' properties, and that has no concern about where the center of the element is. It's moving the entire element (edges, center, and all) at that angle. It is really the centering part that could also use an additional offset from true center.

> So I prefer to find a different name than center.
> Previously, I suggested 'box-origin' or 'origin-point'.

That really doesn't fit with the other properties that do similar things, namely top, left, right, and bottom. 'box-origin' or 'origin-point' would make more sense as an alternative name to 'polar-anchor'. Though I still think 'offset' would be a better name, if it isn't restricted to only working when 'center' is in effect.
Received on Saturday, 9 January 2016 18:08:08 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:35 UTC