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: Fri, 8 Jan 2016 10:43:06 +0900
Cc: www-style list <www-style@w3.org>, Brad Kemper <brad.kemper@gmail.com>
Message-Id: <E9D7A345-AF3A-4178-89CF-8834737F129C@rivoal.net>
To: Jihye Hong <jh.hong@lge.com>

> On Jan 8, 2016, at 08:30, Jihye Hong <jh.hong@lge.com> wrote:
> Do we need to drop 'polar-anchor'? 
> 'polar-anchor' would improve the flexibility of CSS positioning and avoid
> the overflowing problem.

I agree that polar-anchor is useful for increased flexibility, for example if the element you're positioning has an odd shape, and its visual "center of gravity" is not at height/2 width/2 (e.g. border-radius: 50%/10% 10% 90% 90%).

On the other hand, I don't think it is a good tool for avoiding the overflowing problem.

"polar-distance: 100% contain;" is easier to use and more reliable than using polar-anchor to avoid overflow.

For example:

#containing-block {
 width: 400px; height 400px;
 border-radius: 200px/150px;
 border: 5px solid black;

 position: relative;

#pp {
  width: 100px; height: 70px;
  border: 3px solid black;
  border-radius: 50%;

  position: absolute;
  polar-angle: 30deg;
  polar-distance: 100% contain;

For something like this, trying to use polar-anchor instead of "contain" to put the anchor just at the right spot so that the two borders just touch would be pretty tricky. And if the width or height of the containing block had been something else that a fixed size (auto, percentage...), then it would be impossible to get right.

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

Agreed, if we keep the "center" proposition and "polar-anchor", they'll need new names.

center ->  box-align?
polar-anchor -> box-anchor?

 - Florian
Received on Friday, 8 January 2016 01:43:35 UTC

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