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

Brad Kemper
> On Jan 7, 2016, at 5:43 PM, Florian Rivoal <florian@rivoal.net> wrote:
> 
> 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%).

We already have that for absolutely positioned items. It's called margin-left and margin-top. This is not a problem unique to centering. I often position things with percentage 'top' and 'left', and then use negative left and top margins to adjust their position based on their individual sizes. Or I'll do something like 'left:100%; margin-left:10px' (for modern browsers, calc() can be used for that now too). 

> 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.

I totally agree. When you are trying to get a rectangle to have its center to be a predictable distance from the edge, and contained, the corners of the positioned item really get in the way. The center is further in for 45deg angles than for multiples of 90deg. So if you are trying to arrange tick marks or numerals around a clock, you would need separate adjustments for each one. 

Which is why I proposed a different solution about a hundred emails ago, which uses an imaginary ellipse contained within the positioned item to determine what polar-distance:100% means. 

>> 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?

I prefer renaming polar-anchor if we keep it. Maybe 'center-adjust' or 'center-point'. 

Box-align doesn't really describe what I've proposed. Point-position, maybe.

Received on Friday, 8 January 2016 16:21:09 UTC