Skip to content

Commit 2bf4cd0

Browse files
author
Jihye Hong
committed
[css-round-display] Add extension for 2d rotation function for polar coordinates
1 parent 4ebe4fa commit 2bf4cd0

3 files changed

Lines changed: 162 additions & 9 deletions

File tree

‎css-round-display/Overview.bs‎

Lines changed: 74 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -450,7 +450,7 @@ The 'polar-distance' property determines how far elements are positioned from th
450450
<pre class='propdef'>
451451
Name: polar-distance
452452
Applies to: all elements
453-
Value: [ <<length>> | <<percentage>> ] [contain]?
453+
Value: [ <<length>> | <<percentage>> ] contain?
454454
Initial: 0
455455
Media: visual
456456
Inherited: no
@@ -460,7 +460,7 @@ The 'polar-distance' property determines how far elements are positioned from th
460460
<p>
461461
Where
462462
<dl>
463-
<b>&lt;polar-distance&gt;</b> = [ <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var> ] [contain]?
463+
<b>&lt;polar-distance&gt;</b> = [ <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var> ] contain?
464464
</dl>
465465
<br>
466466
The first value specifies the distance between the origin of polar coordinates and the anchor point of the element. The second value may be omitted. If not so, it affects the calculated value of the first value.
@@ -542,7 +542,7 @@ One of the profits of polar coordinate system is performance improvement. The si
542542
<p class="issue">
543543
By 'polar-distance' property, a position of an element is specified based on the containing block's center. In other way, is the method of positioning elements by the distance based on the edge of the containing block needed?
544544
</p>
545-
<h3 id="polar-angle-property">The 'polar-anchor' property</h3>
545+
<h3 id="polar-anchor-property">The 'polar-anchor' property</h3>
546546
<p>
547547
The 'polar-anchor' property sets an anchor point of the element. The anchor point specifies a position which is a representative point of the element. The anchor point could be set as any point within a content area of the element rather than being positioned to the upper left corner of the element by CSS box model.
548548

@@ -628,3 +628,74 @@ Is '<code>auto</code>' needed for value of 'polar-anchor'?
628628
<p class="issue">
629629
How to solve overflowing when an element has 'polar-anchor' value as '<code>top</code>', 'polar-angle' value is 0deg, and 'polar-distance' is equal to the distance from center to edge of containing block?
630630
</p>
631+
632+
<h2 id="extending-svg-transform-functions">Rotate transformation for content in polar coordinates</h2>
633+
<h3 id="2d-rotation-transform-function">2D Rotation Transform Function</h3>
634+
<p>
635+
The 'transform' property supports all transform functions by <a href="http://www.w3.org/TR/SVG/coords.html#TransformAttribute">The ''transform'' attribute</a> in [[SVG11]].
636+
When elements are positioned in polar coordinates, there are many usecases which show the elements are rotated toward the origin of the polar coordinates. In such cases, the accurate rotation degree has to be specified in the 2d rotation function for each element. But when using the keyword value instead of the <<angle>> value, the calculation of accurate rotation degree may be omitted.
637+
<br><br>
638+
Therefore the two-dimensional rotation function 'rotate(<angle>)' used in polar coordinates is extended as follows:
639+
<dl><dd>
640+
<code><a href="http://www.w3.org/TR/css3-transforms/#funcdef-rotate">rotate()</a> = rotate( [<<angle>> | [center | counter-center]] [, <<translation-value>>, <<translation-value>>]?)</code>
641+
</dd></dl>
642+
The '<code>center</code>' keyword means that the element is rotated by the polar-angle value. Therefore, when the anchor point of an element is center point of the
643+
element, a straight line passing through the anchor point meets the center point of the containing block.<br>
644+
And for the '<code>counter-center</code>', the element is rotated by the angle of the polar-angle plus 180 degrees.
645+
</p>
646+
<div class='example'>
647+
This example shows how the keyword value works in the 2d rotation function.
648+
649+
<pre>&lt;style>
650+
651+
#item1 {
652+
position: polar;
653+
polar-angle: 0deg;
654+
polar-distance: 90%;
655+
transform: rotate(center);
656+
}
657+
#item2 {
658+
position: polar;
659+
polar-angle: 45deg;
660+
polar-distance: 90%;
661+
transform: rotate(center);
662+
}
663+
#item3 {
664+
position: polar;
665+
polar-angle: 135deg;
666+
polar-distance: 90%;
667+
transform: rotate(counter-center);
668+
}
669+
#item4 {
670+
position: polar;
671+
polar-angle: 180deg;
672+
polar-distance: 90%;
673+
transform: rotate(counter-center);
674+
}
675+
#item5 {
676+
position: polar;
677+
polar-angle: 225deg;
678+
polar-distance: 90%;
679+
transform: rotate(counter-center);
680+
}
681+
#item6 {
682+
position: polar;
683+
polar-angle: -45deg;
684+
polar-distance: 90%;
685+
transform: rotate(center);
686+
}
687+
&lt;/style>
688+
&lt;body>
689+
&lt;div id="item1">A&lt;/div>
690+
&lt;div id="item2">B&lt;/div>
691+
&lt;div id="item3">C&lt;/div>
692+
&lt;div id="item4">D&lt;/div>
693+
&lt;div id="item5">E&lt;/div>
694+
&lt;div id="item6">F&lt;/div>
695+
&lt;/body>
696+
</pre>
697+
<div style="width: 500px; text-align: center">
698+
<img alt="An image of extended 2d rotate function" src="images/2d_rotate_function.png" style="width: 250px; text-align: center"/>
699+
<p class="caption">An example of the extension for 2d rotate function</p>
700+
</div>
701+
</div>

‎css-round-display/Overview.html‎

Lines changed: 88 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
<div class="head">
5656
<p data-fill-with="logo"><a class="logo" href="http://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/Icons/w3c_home" width="72"> </a> </p>
5757
<h1 class="p-name no-ref" id="title">CSS Round Display Level 1</h1>
58-
<h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="2015-10-29">29 October 2015</time></span></h2>
58+
<h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="2015-11-04">4 November 2015</time></span></h2>
5959
<div data-fill-with="spec-metadata">
6060
<dl>
6161
<dt>This version:
@@ -136,7 +136,12 @@ <h2 class="no-num no-toc no-ref heading settled" id="contents"><span class="cont
136136
<li><a href="#polar-origin-property"><span class="secno">6.2</span> <span class="content">The <span class="property">polar-origin</span> property</span></a>
137137
<li><a href="#polar-angle-property"><span class="secno">6.3</span> <span class="content">The <span class="property">polar-angle</span> property</span></a>
138138
<li><a href="#polar-distance-property"><span class="secno">6.4</span> <span class="content">The <span class="property">polar-distance</span> property</span></a>
139-
<li><a href="#polar-angle-property0"><span class="secno">6.5</span> <span class="content">The <span class="property">polar-anchor</span> property</span></a>
139+
<li><a href="#polar-anchor-property"><span class="secno">6.5</span> <span class="content">The <span class="property">polar-anchor</span> property</span></a>
140+
</ul>
141+
<li>
142+
<a href="#extending-svg-transform-functions"><span class="secno">7</span> <span class="content">Rotate transformation for content in polar coordinates</span></a>
143+
<ul class="toc">
144+
<li><a href="#2d-rotation-transform-function"><span class="secno">7.1</span> <span class="content">2D Rotation Transform Function</span></a>
140145
</ul>
141146
<li>
142147
<a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
@@ -608,7 +613,7 @@ <h3 class="heading settled" data-level="6.4" id="polar-distance-property"><span
608613
<td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-polar-distance">polar-distance<a class="self-link" href="#propdef-polar-distance"></a></dfn>
609614
<tr class="value">
610615
<th>Value:
611-
<td class="prod">[ <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value">&lt;length></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value">&lt;percentage></a> ] [contain]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#mult-opt">?</a>
616+
<td class="prod">[ <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value">&lt;length></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value">&lt;percentage></a> ] contain<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#mult-opt">?</a>
612617
<tr>
613618
<th>Initial:
614619
<td>0
@@ -632,7 +637,7 @@ <h3 class="heading settled" data-level="6.4" id="polar-distance-property"><span
632637
<td>as <a href="http://www.w3.org/TR/css3-transitions/#animtype-lpcalc">length, percentage, or calc</a>
633638
</table>
634639
<p> Where </p>
635-
<dl> <b>&lt;polar-distance></b> = [ <var>&lt;length></var> | <var>&lt;percentage></var> ] [contain]? </dl>
640+
<dl> <b>&lt;polar-distance></b> = [ <var>&lt;length></var> | <var>&lt;percentage></var> ] contain? </dl>
636641
<br> The first value specifies the distance between the origin of polar coordinates and the anchor point of the element. The second value may be omitted. If not so, it affects the calculated value of the first value. <br><br> Values have the following meanings:
637642
<dl>
638643
<dt><var>&lt;length></var>
@@ -682,7 +687,7 @@ <h3 class="heading settled" data-level="6.4" id="polar-distance-property"><span
682687
<p class="issue" id="issue-8465ee32"><a class="self-link" href="#issue-8465ee32"></a> How to position items to the edge of the containing block without overflowing it? (<i>polar-anchor</i> could be suggested) </p>
683688
<p class="issue" id="issue-1fb69d32"><a class="self-link" href="#issue-1fb69d32"></a> One of the profits of polar coordinate system is performance improvement. The significant performance improvement can be seen in animation using the polar coordinates. How to define animation in the polar coordinates? Is there any difference between the conventional coordinates and the polar coordinates when animate elements? </p>
684689
<p class="issue" id="issue-6e7c10c1"><a class="self-link" href="#issue-6e7c10c1"></a> By <a class="property" data-link-type="propdesc" href="#propdef-polar-distance">polar-distance</a> property, a position of an element is specified based on the containing block’s center. In other way, is the method of positioning elements by the distance based on the edge of the containing block needed? </p>
685-
<h3 class="heading settled" data-level="6.5" id="polar-angle-property0"><span class="secno">6.5. </span><span class="content">The <a class="property" data-link-type="propdesc" href="#propdef-polar-anchor">polar-anchor</a> property</span><a class="self-link" href="#polar-angle-property0"></a></h3>
690+
<h3 class="heading settled" data-level="6.5" id="polar-anchor-property"><span class="secno">6.5. </span><span class="content">The <a class="property" data-link-type="propdesc" href="#propdef-polar-anchor">polar-anchor</a> property</span><a class="self-link" href="#polar-anchor-property"></a></h3>
686691
<p> The <a class="property" data-link-type="propdesc" href="#propdef-polar-anchor">polar-anchor</a> property sets an anchor point of the element. The anchor point specifies a position which is a representative point of the element. The anchor point could be set as any point within a content area of the element rather than being positioned to the upper left corner of the element by CSS box model. </p>
687692
<p>With position: polar, the value of polar-distance is given to the distance between an anchor point and a center point of a containing block.</p>
688693
<p></p>
@@ -769,6 +774,73 @@ <h3 class="heading settled" data-level="6.5" id="polar-angle-property0"><span cl
769774
</div>
770775
<p class="issue" id="issue-43dc3773"><a class="self-link" href="#issue-43dc3773"></a> Is '<code>auto</code>' needed for value of <a class="property" data-link-type="propdesc" href="#propdef-polar-anchor">polar-anchor</a>? </p>
771776
<p class="issue" id="issue-9a7a089f"><a class="self-link" href="#issue-9a7a089f"></a> How to solve overflowing when an element has <a class="property" data-link-type="propdesc" href="#propdef-polar-anchor">polar-anchor</a> value as '<code>top</code>', <a class="property" data-link-type="propdesc" href="#propdef-polar-angle">polar-angle</a> value is 0deg, and <a class="property" data-link-type="propdesc" href="#propdef-polar-distance">polar-distance</a> is equal to the distance from center to edge of containing block? </p>
777+
<h2 class="heading settled" data-level="7" id="extending-svg-transform-functions"><span class="secno">7. </span><span class="content">Rotate transformation for content in polar coordinates</span><a class="self-link" href="#extending-svg-transform-functions"></a></h2>
778+
<h3 class="heading settled" data-level="7.1" id="2d-rotation-transform-function"><span class="secno">7.1. </span><span class="content">2D Rotation Transform Function</span><a class="self-link" href="#2d-rotation-transform-function"></a></h3>
779+
<p>
780+
The <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/css3-2d-transforms/#propdef-transform">transform</a> property supports all transform functions by <a href="http://www.w3.org/TR/SVG/coords.html#TransformAttribute">The <span class="css">transform</span> attribute</a> in <a data-link-type="biblio" href="#biblio-svg11">[SVG11]</a>.
781+
When elements are positioned in polar coordinates, there are many usecases which show the elements are rotated toward the origin of the polar coordinates. In such cases, the accurate rotation degree has to be specified in the 2d rotation function for each element. But when using the keyword value instead of the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#angle-value">&lt;angle></a> value, the calculation of accurate rotation degree may be omitted. <br><br> Therefore the two-dimensional rotation function 'rotate(
782+
<angle>)' used in polar coordinates is extended as follows: </angle>
783+
</p>
784+
<dl>
785+
<dd> <code><a href="http://www.w3.org/TR/css3-transforms/#funcdef-rotate">rotate()</a> = rotate( [<a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#angle-value">&lt;angle></a> | [center | counter-center]] [, <a class="production css" data-link-type="type" href="http://www.w3.org/TR/css3-2d-transforms/#typedef-translation-value">&lt;translation-value></a>, <a class="production css" data-link-type="type" href="http://www.w3.org/TR/css3-2d-transforms/#typedef-translation-value">&lt;translation-value></a>]?)</code>
786+
</dl>
787+
The '<code>center</code>' keyword means that the element is rotated by the polar-angle value. Therefore, when the anchor point of an element is center point of the
788+
element, a straight line passing through the anchor point meets the center point of the containing block.<br> And for the '<code>counter-center</code>', the element is rotated by the angle of the polar-angle plus 180 degrees.
789+
<p></p>
790+
<div class="example" id="example-2894752f">
791+
<a class="self-link" href="#example-2894752f"></a> This example shows how the keyword value works in the 2d rotation function.
792+
<pre>&lt;style>
793+
#item1 {
794+
position: polar;
795+
polar-angle: 0deg;
796+
polar-distance: 90%;
797+
transform: rotate(center);
798+
}
799+
#item2 {
800+
position: polar;
801+
polar-angle: 45deg;
802+
polar-distance: 90%;
803+
transform: rotate(center);
804+
}
805+
#item3 {
806+
position: polar;
807+
polar-angle: 135deg;
808+
polar-distance: 90%;
809+
transform: rotate(counter-center);
810+
}
811+
#item4 {
812+
position: polar;
813+
polar-angle: 180deg;
814+
polar-distance: 90%;
815+
transform: rotate(counter-center);
816+
}
817+
#item5 {
818+
position: polar;
819+
polar-angle: 225deg;
820+
polar-distance: 90%;
821+
transform: rotate(counter-center);
822+
}
823+
#item6 {
824+
position: polar;
825+
polar-angle: -45deg;
826+
polar-distance: 90%;
827+
transform: rotate(center);
828+
}
829+
&lt;/style>
830+
&lt;body>
831+
&lt;div id="item1">A&lt;/div>
832+
&lt;div id="item2">B&lt;/div>
833+
&lt;div id="item3">C&lt;/div>
834+
&lt;div id="item4">D&lt;/div>
835+
&lt;div id="item5">E&lt;/div>
836+
&lt;div id="item6">F&lt;/div>
837+
&lt;/body>
838+
</pre>
839+
<div style="width: 500px; text-align: center">
840+
<img alt="An image of extended 2d rotate function" src="images/2d_rotate_function.png" style="width: 250px; text-align: center">
841+
<p class="caption">An example of the extension for 2d rotate function</p>
842+
</div>
843+
</div>
772844
</section>
773845
</main>
774846
<h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
@@ -871,6 +943,12 @@ <h3 class="no-num heading settled" id="index-defined-here"><span class="content"
871943
</ul>
872944
<h3 class="no-num heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
873945
<ul class="indexlist">
946+
<li>
947+
<a data-link-type="biblio" href="#biblio-css-2d-transforms-1">[css-2d-transforms-1]</a> defines the following terms:
948+
<ul>
949+
<li><a href="http://www.w3.org/TR/css3-2d-transforms/#typedef-translation-value">&lt;translation-value></a>
950+
<li><a href="http://www.w3.org/TR/css3-2d-transforms/#propdef-transform">transform</a>
951+
</ul>
874952
<li>
875953
<a data-link-type="biblio" href="#biblio-css-backgrounds-3">[css-backgrounds-3]</a> defines the following terms:
876954
<ul>
@@ -920,6 +998,8 @@ <h3 class="no-num heading settled" id="normative"><span class="content">Normativ
920998
<dd>Vincent Hardy; Rossen Atanassov; Alan Stearns. <a href="http://www.w3.org/TR/css-shapes-1/">CSS Shapes Module Level 1</a>. 20 March 2014. CR. URL: <a href="http://www.w3.org/TR/css-shapes-1/">http://www.w3.org/TR/css-shapes-1/</a>
921999
<dt id="biblio-css21"><a class="self-link" href="#biblio-css21"></a>[CSS21]
9221000
<dd>Bert Bos; et al. <a href="http://www.w3.org/TR/CSS2">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href="http://www.w3.org/TR/CSS2">http://www.w3.org/TR/CSS2</a>
1001+
<dt id="biblio-css-2d-transforms-1"><a class="self-link" href="#biblio-css-2d-transforms-1"></a>[CSS-2D-TRANSFORMS-1]
1002+
<dd>CSS 2D Transforms Module Level 1 URL: <a href="http://www.w3.org/TR/css3-2d-transforms/">http://www.w3.org/TR/css3-2d-transforms/</a>
9231003
<dt id="biblio-css-backgrounds-3"><a class="self-link" href="#biblio-css-backgrounds-3"></a>[CSS-BACKGROUNDS-3]
9241004
<dd>CSS Backgrounds and Borders Module Level 3 URL: <a href="http://www.w3.org/TR/css3-background/">http://www.w3.org/TR/css3-background/</a>
9251005
<dt id="biblio-css-conditional-3"><a class="self-link" href="#biblio-css-conditional-3"></a>[CSS-CONDITIONAL-3]
@@ -935,6 +1015,8 @@ <h3 class="no-num heading settled" id="normative"><span class="content">Normativ
9351015
</dl>
9361016
<h3 class="no-num heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
9371017
<dl>
1018+
<dt id="biblio-svg11"><a class="self-link" href="#biblio-svg11"></a>[SVG11]
1019+
<dd>Erik Dahlström; et al. <a href="http://www.w3.org/TR/SVG11/">Scalable Vector Graphics (SVG) 1.1 (Second Edition)</a>. 16 August 2011. REC. URL: <a href="http://www.w3.org/TR/SVG11/">http://www.w3.org/TR/SVG11/</a>
9381020
<dt id="biblio-css-shapes-1"><a class="self-link" href="#biblio-css-shapes-1"></a>[CSS-SHAPES-1]
9391021
<dd>Vincent Hardy; Rossen Atanassov; Alan Stearns. <a href="http://www.w3.org/TR/css-shapes-1/">CSS Shapes Module Level 1</a>. 20 March 2014. CR. URL: <a href="http://www.w3.org/TR/css-shapes-1/">http://www.w3.org/TR/css-shapes-1/</a>
9401022
<dt id="biblio-css3-border"><a class="self-link" href="#biblio-css3-border"></a>[CSS3-BORDER]
@@ -1011,7 +1093,7 @@ <h2 class="no-num heading settled" id="property-index"><span class="content">Pro
10111093
<td>as specified
10121094
<tr>
10131095
<th scope="row"><a class="css" data-link-type="property" href="#propdef-polar-distance">polar-distance</a>
1014-
<td>[ &lt;length> | &lt;percentage> ] [contain]?
1096+
<td>[ &lt;length> | &lt;percentage> ] contain?
10151097
<td>0
10161098
<td>all elements
10171099
<td>no

‎css-round-display/images/2d_rotate_function.png‎

19.1 KB
Loading

0 commit comments

Comments
 (0)