RE: [css-round-display] Suggest ‘polar-anchor’ property for positioning elements without overflowing

On 23/09/2015 05:40 PM, Jihye Hong wrote:
> Hello all,
> I’m Jihye Hong from LG Electronics. I attended the last F2F meeting at Paris and presented CSS 
> Round Display demos. I hope you could remember me. : )
>
> In the middle of discussing about css-round-display [1] at the F2F Paris meeting, there was an
> issue about positioning items to the edge of the containing block without overflowing [2]. When 
> authors would align elements in the circular display using ‘polar-angle’ and ‘polar-distance’, 
> they should find out the accurate value of ‘polar-distance’ for avoiding elements to get out of 
> the edge of the containing block. We described the issue in the spec and deliberate how to 
> resolve it.
> We potentially came up with a ‘polar-anchor’ property to set a anchor point of the element as a 
> suggested solution in the meeting. The anchor point specifies a position which is a 
> representative point of the element aligned with a containing block. Setting the anchor point 
> makes easier to position the elements inside the containing block. To design the ‘polar-anchor’, 
> I refer to the ‘background-position’ property [3].
> You can see the Polyfill with ‘polar-anchor’ [4][5].
>
> The ‘polar-anchor’ has the value <position> | auto. The value indicates which horizontal and 
> vertical offset of the element is aligned to the containing block’s alignment position.
> The <position> value is defined like below: 
> <position> = [
>  [ left | center | right | top | bottom | <percentage> | <length> ]
> |
>  [ left | center | right | <percentage> | <length> ]
>  [ top | center | bottom | <percentage> | <length> ]
> |
>  [ center | [ left | right ] [ <percentage> | <length> ]? ] &&
>  [ center | [ top | bottom ] [ <percentage> | <length> ]? ]
> ]
>
> I have several questions about the ‘polar-anchor’ property:
>  - Is the ‘polar-anchor’ property useful to be a new property in css-round-display?
>  - Is naming of the property reasonable?
>  - Is value types of the property suitable? Any other types to be considered?
>
> Happy to have your feedback!
>
> Regards,
> Jihye Hong
> 
> [1] http://www.w3.org/TR/css-round-display-1/ 
> [2] https://www.w3.org/Style/CSS/Tracker/actions/714
> [3] http://www.w3.org/TR/2014/WD-css3-background-20140204/#background-position
> [4] http://anawhj.github.io/jRound/demo/polar/anchor.html 
> [5] http://anawhj.github.io/jRound/src/css-polar.js 
> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
> Jihye Hong
> Research Engineer
> SoftWare Platform R&D Lab,
> CTO Division, LG Electronics Inc.
> Mobile : 82-10-7276-5695
> E-mail : jh.hong@lge.com

I took some feedback from CC last week [1] and added 'polar-anchor' property to the CSS Round Display ED [2].
I'd like to discuss about this spec whether its definition is reasonable.

When the 'polar-anchor' property was suggested, there was a consideration of 'auto' value for the property. 
But I'm not sure that 'auto' value is necessary for 'polar-anchor'. fantasai had mentioned auto keyword for 'polar-anchor' during the F2F meeting at Paris[3]. Could you tell me your thought about the way 'auto' works for 'polar-anchor'?

I thought 2 approaches to specify 'auto'.
When we have elements with 'polar-distance' and 'polar-angle' values, the anchor points are specified by one of methods as below : 

 method 1) 
  - If polar-angle value of an element is 0deg, 90deg, 180deg, and 270deg,
   - polar-anchor value is '50% 0%', '100% 50%', '50% 100%', and '0% 50%'.
   - if the polar-distance value is 100%, 
    polar-anchor value is adjusted to avoid overflowing.
  - If polar-angle value of an element isn't 0deg, 90deg, 180deg, and 270deg,
   - and if 0deg < polar-angle < 90deg, 
    polar-anchor value is '100% 0%'
   - or if 90deg < polar-angle < 180deg, 
    polar-anchor value is '100% 100%'
   - or if 180deg < polar-angle < 270deg, 
    polar-anchor value is '0% 100%'
   - or if 270deg < polar-angle < 360deg, 
    polar-anchor value is '0% 0%'
  - The result is look like [4]. 
  - This guarantees not overflow.

 method 2) 
  - An anchor point is on the edge of a circumscribed circle of an element.
  - An anchor point is also on a straight line made from the center point of a containing block and the center point of a element's content box.
  - The result will be [5].
  - This guarantees not overflow.

But both methods have side-effects. In method 1, distances between neighboring elements are not even.
And in method 2, there is a gap between the edge of a containing block and the edge of an element's content box when the polar-distance value is 100%.

As you can see, it's tricky to specify the expecting effect from auto value.
Which definition of auto is more appropriate?
Do you have any thought?

Thanks : )
- Jihye Hong

[1] https://lists.w3.org/Archives/Public/www-style/2015Oct/0012.html 
[2] https://drafts.csswg.org/css-round-display/#propdef-polar-anchor 
[3] http://log.csswg.org/irc.w3.org/css/2015-08-26/#e583134
[4] https://github.com/anawhj/jRound/blob/master/demo/polar/polar_anchor_auto_method1.JPG
[5] https://github.com/anawhj/jRound/blob/master/demo/polar/polar_anchor_auto_method2.JPG

Received on Thursday, 8 October 2015 10:10:37 UTC