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

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

From: Florian Rivoal <florian@rivoal.net>
Date: Thu, 7 Jan 2016 13:10:09 +0900
Cc: Jihye Hong <jh.hong@lge.com>, www-style list <www-style@w3.org>
Message-Id: <776C24A3-DC40-47D4-9A6A-0612E50D14E2@rivoal.net>
To: Brad Kemper <brad.kemper@gmail.com>
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. 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;
  polar-origin: 25% center; polar-anchor: center center; polar-distance:0;
  center: 25% center;

  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.

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.

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.

> 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. 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
b) if polar-distance is auto, center:auto resolves to center: 0 0 (legacy behavior)
c) else, if polar-distance is not auto, center:auto resolves to center: center center;

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

>> 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
- we either drop polar-anchor, or find a different name than center, or live with a confusing name

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

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.

 - Florian
Received on Thursday, 7 January 2016 04:10:39 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:59 UTC