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

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