[css-round-display] Modify description of 'polar-distance' and 2d rotate function for polar

Author: Jihye Hong

css-round-display/Overview.bs

@@ -343,7 +343,12 @@ Figure 6B might be the result of
 </div>
 
 <h3 id="polar-origin-property">The 'polar-origin' property</h3>
+<p>
 The 'polar-origin' property sets a point of origin for polar coordinate system.
+<br>
+In conventional coordinate system, the origin of coordinate system implicitly set to upper left corner of the containing block. According to the origin, not only elements are positioned within the containing block but also prope
+기존 방식은 origin이 암시적으로(implicitly) containing block의 left-top으로 셋팅이 되어있고, 해당 origin을 기준으로 엘리먼트가 배치되고 display, margin, padding 등의 property들도 이러한 배경하에 동작을 했다. 하지만 polar좌표계에서는 이러한 origin이 기존의 left-top이 아닌 center로 명시되는 것이 합리적이며, 이 값은 필요에 따라 변경 가능한 상황이 발생할 수 있다.
+</p>
 <pre class='propdef'>
     Name: polar-origin
     Applies to: all elements
@@ -376,7 +381,7 @@ Where
 ]
 </dl>
 
-Values are defined like below:
+Values are defined as follows:
 
 <dl>
 <dt><var>&lt;percentage&gt;</var></dt>
@@ -393,35 +398,35 @@ A length value gives a fixed length as the offset. The value for the horizontal
 </dl>
 
 <dl>
-<dt>top</dt>
+<dt><var>top</var></dt>
 <dd>
 Computes to 0% for the vertical position.
 </dd>
 </dl>
 
 <dl>
-<dt>right</dt>
+<dt><var>right</var></dt>
 <dd>
 Computes to 100% for the horizontal position.
 </dd>
 </dl>
 
 <dl>
-<dt>bottom</dt>
+<dt><var>bottom</var></dt>
 <dd>
 Computes to 100% for the vertical position.
 </dd>
 </dl>
 
 <dl>
-<dt>left</dt>
+<dt><var>left</var></dt>
 <dd>
 Computes to 0% for the horizontal position.
 </dd>
 </dl>
 
 <dl>
-<dt>center</dt>
+<dt><var>center</var></dt>
 <dd>
 Computes to 50% (left 50%) for the horizontal position if the horizontal position is not otherwise specified, or 50% (top 50%) for the vertical position if it is.
 </dd>
@@ -431,6 +436,9 @@ Computes to 50% (left 50%) for the horizontal position if the horizontal positio
 <p class="issue">
 Between the item and the containing block, which is appropriate for polar-origin value to be referenced of?
 </p>
+<p class="issue">
+According to enable to specify the point of origin for polar coordinates, properties for specifying layout such as 'margin', 'padding' would work different from the conventional coordinate system. We need different approaches to define those properties.
+</p>
 
 <h3 id="polar-angle-property">The 'polar-angle' property</h3>
 The 'polar-angle' property specifies the angle from the Y-axis. This property is activated on condition of position: polar.
@@ -450,21 +458,17 @@ The 'polar-distance' property determines how far elements are positioned from th
 <pre class='propdef'>
     Name: polar-distance
     Applies to: all elements
-    Value: [ <<length>> | <<percentage>> ] contain?
+    Value: [ <<length>> | <<percentage>> ] && contain?
     Initial: 0
     Media: visual
     Inherited: no
     Percentages: relative to distance from the origin of polar coordinates to edge of containing block
     Animatable: as <a href="http://www.w3.org/TR/css3-transitions/#animtype-lpcalc">length, percentage, or calc</a>
 </pre>
 <p>
-Where
-<dl>
-<b>&lt;polar-distance&gt;</b> = [ <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var> ] contain?
-</dl>
+The <code>'polar-distance'</code> specifies the distance between the origin of polar coordinates and the anchor point of the element.
+
 <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:
 <dl>
 <dt><var>&lt;length&gt;</var></dt>
@@ -479,9 +483,12 @@ A percentage is relative to the distance from a point of contact which is made b
 </dd>
 </dl>
 <dl>
-<dt>contain</dt>
+<dt><var>contain</var></dt>
 <dd>
-Adjust polar-distance value when positioned element within containing block overflows shape of the containing block. The main purpose for this value is avoiding overflow of positioning elements. When overflowing occurs, the distance between the center point of containing block and the anchor point of the element is reduced until there are less than 2 points of contact between edge of shape of containing block and content block of the element.
+Adjust polar-distance value of the positioned element which overflows shape of the containing block. 
+The main purpose of this value is avoiding overflow when positioning elements. 
+When overflowing occurs, the distance between the point of origin of polar coordinates and the anchor point of the element is reduced, 
+until there are 2 contact points or less between edge of shape of containing block and content block of the element.
 </dd>
 </dl>
 </p>
@@ -629,19 +636,28 @@ Is '<code>auto</code>' needed for value of 'polar-anchor'?
 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?
 </p>
 
-<h2 id="extending-svg-transform-functions">Rotating content in polar coordinates</h2>
-<h3 id="2d-rotation-transform-function">2D Rotation Transform Function</h3>
+<h3 id="2d-rotation-transform-function">2D Rotation Transform Function for self-rotating elements in polar coordinates</h3>
 <p>
- 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]].
  When elements are positioned in polar coordinates, there are many usecases which show the elements rotated toward the origin of polar coordinates. In such cases, degree of rotation 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.
 <br><br>
 The two-dimensional rotation function <code><a href="http://www.w3.org/TR/css3-transforms/#funcdef-rotate">'rotate(<angle>)'</a></code> used in polar coordinates is extended as follows:
 <dl><dd>
-<code><a href="http://www.w3.org/TR/css3-transforms/#funcdef-rotate">rotate()</a> = rotate( [<<angle>> | [center | counter-center]] [, <<translation-value>>, <<translation-value>>]?)</code>
+<code><a href="http://www.w3.org/TR/css3-transforms/#funcdef-rotate">rotate()</a> = rotate( <<angle>> | center | counter-center)</code>
 </dd></dl>
-The '<code>center</code>' keyword means that the element is rotated with the 'polar-angle' value. Therefore, when the anchor point of an element is center point of the
-element, a straight line passing through the anchor point meets the origin 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. 
+Values have the following meanings:
+<dl>
+<dt><var>center</var></dt>
+<dd>
+Rotate an element by the 'polar-angle' value. Therefore, when the anchor point of an element is center point of the
+element and there is a perpendicular line which passes through the anchor point, the line meets the origin of the containing block.
+</dd>
+</dl>
+<dl>
+<dt><var>counter-center</var></dt>
+<dd>
+Rotate an element by the angle of the 'polar-angle' plus 180 degrees.
+</dd>
+</dl>
 </p>
 <div class='example'>
 This example shows how the keyword value works in the 2d rotation function.
@@ -686,12 +702,12 @@ This example shows how the keyword value works in the 2d rotation function.
 	}
 &lt;/style>
 &lt;body>
-	&lt;div id="item1">A&lt;/div>
-	&lt;div id="item2">B&lt;/div>
-	&lt;div id="item3">C&lt;/div>
-	&lt;div id="item4">D&lt;/div>
-	&lt;div id="item5">E&lt;/div>
-	&lt;div id="item6">F&lt;/div>
+	&lt;div id="item1">1&lt;/div>
+	&lt;div id="item2">2&lt;/div>
+	&lt;div id="item3">3&lt;/div>
+	&lt;div id="item4">4&lt;/div>
+	&lt;div id="item5">5&lt;/div>
+	&lt;div id="item6">6&lt;/div>
 &lt;/body>
 </pre>
 <div style="width: 500px; text-align: center">