[css-round-display] Clarify some explanations in 'polar-anchor' property

Author: Jihye Hong

css-round-display/Overview.bs

@@ -276,9 +276,9 @@ The example below shows how the 'border-boundary' property works on drawing bord
 <h2 id="positioning-content">Positioning content by using the polar coordinate system</h2>
 
 <p>
-Polar coordinate system is a two-dimensional coordinate system that describes the position of a point in a plane with a distance from a reference point and an angle from a reference direction. Elements could be placed along a circle or concentric circles, and the polar coordinate system is useful to handle such cases. 
+Polar coordinate system is a two-dimensional coordinate system that describes the position of a point in a plane with a distance from a reference point and an angle from a reference direction. Elements could be placed along a circle or concentric circles, and the polar coordinate system is useful to handle such cases.
 
-This section introduces polar positioning to support layout of elements in the polar coordinate system where the position of an element is determined by a distance from the center point within the containing element and an angle from the Y-axis. 
+This section introduces polar positioning to support layout of elements in the polar coordinate system where the position of an element is determined by a distance from the center point within the containing element and an angle from the Y-axis.
 
 We add '<code>polar</code>' to the value of the 'position' property to support the polar coordinates of an element itself. The 'polar-angle' and 'polar-distance' properties specify the position of an element.
 </p>
@@ -302,14 +302,14 @@ When the 'position' property on an element is set to '<code>polar</code>', the e
 Note:  The center point of the containing block of an element indicates the origin of polar coordinate when the value of position property of the element  is '<code>polar</code>'.
 </p>
 <p>
-In conventional coordinate system used in the web, the origin is positioned in the upper left corner of a containing block. In comparison, the origin of polar coordinates  is the center point of a containing block. Therefore different methods are required to deploy and transform elements, or set margin/padding values when using polar coordinates. 
+In conventional coordinate system used in the web, the origin is positioned in the upper left corner of a containing block. In comparison, the origin of polar coordinates  is the center point of a containing block. Therefore different methods are required to deploy and transform elements, or set margin/padding values when using polar coordinates.
 
 An example as below shows the difference between the conventional coordinates and the polar coordinates when positioning elements.
 </p>
 <div class='example'>
-The codes below show the difference between conventional coordinate system in the web and polar coordinate system when positioning elements. 
+The codes below show the difference between conventional coordinate system in the web and polar coordinate system when positioning elements.
 
-Figure 6A might be the result of 
+Figure 6A might be the result of
 <pre>
 &lt;body>
 	&lt;div style="position: absolute; width: 100px; height: 100px; background-color: blue;">&lt;/div>
@@ -396,98 +396,108 @@ By 'polar-distance' property, a position of an element is specified based on the
 </p>
 <h3 id="polar-angle-property">The 'polar-anchor' property</h3>
 <p>
-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.
+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.
 
 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>
 <pre class='propdef'>
     Name: polar-anchor
     Applies to: all elements
     Value: <<position>>
-    Initial: center
+    Initial: 50% 50%
     Media: visual
     Inherited: no
     Percentages: relative to width and height of an element
 	Animatable: as <<position>>
 </pre>
 <p>
-The property's value is given as <position> specified in ‘background-position’ property, but meanings of some keywords in value type are different in ‘polar-anchor’ property.
+The property's value is given as <position> specified in 'background-position' property, but meanings of some keywords in value type are different in 'polar-anchor' property.
 
-Where
-</p>
+<dl>
 
-<pre class='prod'>
-<dfn id=position><var>&lt;position&gt;</var></dfn>
- = [
-  [ left | center | right | top | bottom | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
+<b>&lt;position&gt;</b> = [
+<br>
+&nbsp;[ left | center | right | top | bottom | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
+<br>
 |
-  [ left | center | right | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
-  [ top | center | bottom | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
+<br>
+&nbsp;&nbsp;[ left | center | right | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
+<br>
+&nbsp;&nbsp;[ top | center | bottom | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
+<br>
 |
-  [ center | [ left | right ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ] &amp;&amp;
-  [ center | [ top | bottom ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]
+<br>
+&nbsp;&nbsp;[ center | [ left | right ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ] &amp;&amp;
+<br>
+&nbsp;&nbsp;[ center | [ top | bottom ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]
+<br>
 ]
-</pre>
-<p>
+</dl>
+
+<dl>
 <dt><var>&lt;percentage&gt;</var></dt>
 <dd>
-A percentage for the horizontal offset is relative to width of content box area of the element. A percentage for the vertical offset is relative to height of content box area of the element. For example, with a value pair of ‘100%, 0%’, an anchor point is on the upper right corner of the element.
+A percentage for the horizontal offset is relative to width of content box area of the element. A percentage for the vertical offset is relative to height of content box area of the element. For example, with a value pair of '100%, 0%', an anchor point is on the upper right corner of the element.
 </dd>
+</dl>
 
+<dl>
 <dt><var>&lt;length&gt;</var></dt>
 <dd>
 A length value gives a length offset from the upper left corner of the element’s content area.
 </dd>
+</dl>
 </p>
+
 <p>
-Only with 'polar-angle' and 'polar-distance' to position elements, adjusting values of those properties for avoiding elements sticking out of the containing block is required. When the appropriate anchor point is given, there is no need to adjust polar-distance value to avoid overflowing when positioning elements in the containing block.
+Only with 'polar-angle' and 'polar-distance' to position elements, adjusting values of those properties for avoiding elements sticking out of the containing block is required. When the appropriate anchor point is given, there is no need to adjust 'polar-distance' value to avoid overflowing when positioning elements in the containing block.
 </p>
 
 <div class='example'>
 This example shows an alignment of four elements with different anchor points positioned in a containing block.
 
 <pre>&lt;style>
-    #item1 {
-        position: polar;
+
+	#item1 {
+		position: polar;
 		polar-angle: 45deg;
 		polar-distance: 100%;
 		polar-anchor: right top;
-
-    }
-    #item2 {
-        position: polar;
+	}
+	#item2 {
+		position: polar;
 		polar-angle: 135deg;
 		polar-distance: 100%;
 		polar-anchor: right bottom;
-    }
-    #item3 {
-        position: polar;
+	}
+	#item3 {
+		position: polar;
 		polar-angle: 225deg;
-		polar-distance: 100%;	
+		polar-distance: 100%;
 		polar-anchor: left bottom;
-    }
-    #item4 {
-        position: polar;
+	}
+	#item4 {
+		position: polar;
 		polar-angle: 315deg;
-		polar-distance: 100%;	
+		polar-distance: 100%;
 		polar-anchor: left top;
-    }
+	}
 &lt;/style>
 &lt;body>
-    &lt;div id="item1">&lt;/div>
-    &lt;div id="item2">&lt;/div>
-    &lt;div id="item3">&lt;/div>
+	&lt;div id="item1">&lt;/div>
+	&lt;div id="item2">&lt;/div>
+	&lt;div id="item3">&lt;/div>
 	&lt;div id="item4">&lt;/div>
 &lt;/body>
 </pre>
 <div style="width: 400px; text-align: center">
-	<img alt="An image of four elements with different anchor points positioned in a containing block" src="images/polar_anchor.png" style="width: 200px; border: 1px #AAA solid; text-align: center"/>
+	<img alt="An image of four elements with different anchor points positioned in a containing block" src="images/polar_anchor.png" style="width: 300px; text-align: center"/>
 	<p class="caption">An example of 'polar-anchor'</p>
 </div>
 </div>
 <p class="issue">
-Is ‘auto’ needed for value of ‘polar-anchor’?
+Is '<code>auto</code>' needed for value of 'polar-anchor'?
 </p>
 <p class="issue">
-How to solve overflowing when an anchor point is set to ‘top’, polar-angle value is 0deg and polar-distance is equal to the distance from center to edge of containing block?
+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>