Re: [css-round-display] part of abs-pos (was: Suggest 'polar-anchor' property for positioning elements without overflowing)

> On Oct 16, 2015, at 7:02 AM, Florian Rivoal <> wrote:
>>>> Or... introduce 'center' as another property, so that 'center: 50%' would center an element. 
>>> That sounds more confusing, and not obviously more useful.
>> Does it? OK. Well, it would be useful in general to be able to abs-pos center an element, or even just position an element anywhere by the center of the element, instead of by the edges. And even to have 'center' be a shorthand for 'center-x' and 'center-y' (or logical equivalent). So this is really a whole other thing, but if we had it, then it would fit nice with the idea of then applying 'polar-*' measurements  (and maybe trbl measurements too) from that point without further need for a way to measure coordinates from the center. 
>> I realize this would expand the scope of what this spec is trying to accomplish. But I think it would be pretty useful beyond round displays in a way that still works well with round displays.
> #foo {
>  position:absolute;
>  polar-distance: 0;
> } /* Bam! it's centered. */
> #bar {
>  position:absolute;
>  polar-distance: 0;
>  left: 30px;
> } /* Bam! offset from the center. */
> That seems like a pretty straightforward way to do what you’re suggesting.

Sure, and I agree this is a step forward from what we have now, and what is in the polar draft so far.

However, there are many times when I have wanted to center in vertical dimension only or horizontal dimension only. Especially vertical only. This goes further beyond circular display applications, but we should consider it so that we don’t end up with multiple properties that do the same thing.

For instance, I recently had an image that was used to trigger a date-picker for the text field (input) immediately to its left, while both were surrounded by a span with ‘position:relative’. I wanted the image to appear over the field, equal distance from the top and bottom of the field (and in from the right a short distance). I absolutely positioned it, but to get it vertically centered, I had to know the height of the image and use ’top’. It would have been much easier to use ‘center-y:50%’.

Or consider a horizontal slider. If I want the indicator to line up with the tick marks, I could just set ‘center-x’ to a percentage. ‘center-x:0’ would put the center of the indicator all the way to the left, and ‘center-x:100%’ would put it all the way to the right. And ‘center-x:40%’ would put its center exactly lined up with the 40% tick mark.

> On the other hand, the meaning of the following is a lot left obvious to me.
> #baz {
>  position:absolute;
>  center: 42%;
> }
> even if you expand to center-x:42% and center-y:42%, it's still feels weird.
> First, it is not obvious that this moves the center, rather than sizing it
> (what could that mean?) or doing some other thing. Even if you get other than,
> it is moving the center by 42% of what, from where, in which direction?

Huh. I wouldn’t expect it to do anything to the size. ‘center-x:42%’ would just center it on a point that was 42% from the left of the containing block, and ‘center-y:42%’ would center it on a point that was 42% from the top of the containing block. ‘left’ and ’top’ would add to those offsets (Bam!). 

For size, I would have that still be affected by using ‘right’ and ‘left’ together (and/or ’top’ and ‘bottom’) in abs-pos or fixed-pos, but that is the same if we are using polar-distance to do the centering. The ‘center-x’ value would add to the ‘left’ value, just as with your "Bam! offset from the center” example. Even in that we still have to define what to do if you add a non-auto ‘right’ value to it.

> You also have to guess similar things with polar-distance, but at least
> to me, the answers are much more obvious.

Not to me. I think using a ‘center’ property to do the centering is a little more obvious. The only downside I see is that it further extends the scope from what is needed for round displays.

Received on Saturday, 24 October 2015 20:43:47 UTC