Re: [css-round-display] Suggest 'polar-anchor' property for positioning elements without overflowing

Sent from my iPad
> On Oct 15, 2015, at 11:42 PM, Brad Kemper <brad.kemper@gmail.com> wrote:
> 
> 
> On Oct 15, 2015, at 12:59 AM, Jihye Hong <jh.hong@lge.com> wrote:
> 
>>> I think most of the time, having a 2-dimensional polar-anchor seems like
>> overkill. Isn't the 
>>> real issue that you often (usually?) want 'polar-distance: 100%' to just
>> touch the inside edge
>>> of the containing block? I would do this (an effect similar to
>> 'polar-anchor: auto) by adding 
>>> an optional keyword to 'polar-distance' value of either 'outer' or 'center'
>> which determined the 
>>> anchor point used for 'polar-distance: 100%'. 
>>> 
>>> 'Polar-distance: 100% outer' would mean that an imaginary ellipse that
>> touched all four sides of
>>> the border box (equivalent to border-radius:100%) would be positioned as
>> far out along the 
>>> ray as it could without passing the inner edge of the containing block's
>> border shape.
>> 
>> Is my understanding correct about your suggestion like below? :
>>   1) polar-distance: 100% outer :
>>   Only one point of contact exists between the element and the inner
>> edge of the containing block's border shape and the element is positioned
>> inside the containing block's border shape.
> 
> Mostly, if you are considering the element's point to be on the imaginary eclipse I described. For container blocks with square corners, or inner border radiuses less than that of the positioned element's "imaginary ellipse", then there could be 2 sides contacting the imaginary ellipse, both limiting how far out 100% would be. 
> 
>>   2) polar-distance: 100% center :
>>   The center point of the element is positioned on the inner edge of
>> the containing block's border shape.
> 
> Exactly.
> 
>> If it's correct, I agree with that having a 2-dimensional polar-anchor isn't
>> necessary.
>> Thanks to your solution, we will use polar-distance with optional keyword
>> value to set the anchor point instead of using polar-anchor.
> 
> Great! 
> 
>> We haven't decided yet which keywords to use for the optional value.
> 
> Sure. There's room for bikeshedding there.
> 
>> Of course, 'center' and 'outer' are one the table. : )
> 
> :) 
> 
>>> If even more control is needed, we could have a 'polar-margin' property
>> that guaranteed a 
>>> distance between the imaginary ellipse and the inner border edge of the
>> container.
>> 
>> I think that 'polar-margin' property and 'polar-padding' property would
>> guarantee the overflow problem. I will add those new properties as soon as
>>  possible.
> 
> Cool.

Based on the illustrations in the latest draft, I think you might have misunderstood my intent somewhat. In Example 6, I would treat the blue and green squares as having 'border-radius:50%' (even if they didn't) for the purpose of seeing where they touched the actual inner edge of the containing block's border (I say inner border edge instead of inner padding edge, because padding doesn't follow the shape of the border-radius). This point at which the round edge of positioned item would touch the containing block would then be the 100% point for polar-distance.

This would mean that some corners of the positioned items would overlap with their containers, but for things like numbers or seconds marks, you wouldn't notice, and all 12 numbers or all 60 seconds marks would all be equal distance from the center. You don't currently have that.

Received on Wednesday, 11 November 2015 20:45:42 UTC