[css-round-display] Modify Example5 and split paragraphs to read better

Author: Jihye Hong

css-round-display/Overview.bs

@@ -275,7 +275,11 @@ 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. 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.
+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. 
+
+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>
 <p class="note">
 Note: In the polar coordinate system, a point is described as being a certain distance from the pole and a certain angle from the polar axis. In the mathematical theory, the polar axis is commonly defined as the positive direction of the x-axis, but we consider the polar axis as the positive direction of the y-axis position as other CSS specifications usually do. Therefore, when the 'polar-angle'  value  of an element is 0, the element is positioned on the y-axis. If the angle value of an element increases in the positive direction from 0, the element moves clockwise. The method to determine a direction using 'polar-angle' works the same way in [[CSS-VALUES]], <<angle>> value.
@@ -297,38 +301,43 @@ 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. An example as below shows the difference between the conventional coordinates and the polar coordinates when positioning elements.
+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 examples below show the difference between conventional coordinate system in web and polar coordinate system when positioning elements. The result of following example is Figure 6A.
+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 
 <pre>
 &lt;body>
-	&lt;div id="rect1" style="position: absolute; width: 100px; height: 100px; background-color: blue;">&lt;/div>
-	&lt;div id="rect2" style="position: absolute; width: 50px; height: 50px; background-color: green;">&lt;/div>
+	&lt;div style="position: absolute; width: 100px; height: 100px; background-color: blue;">&lt;/div>
+	&lt;div style="position: absolute; width: 50px; height: 50px; background-color: green;">&lt;/div>
 &lt;/body>
 </pre>
-Another example bellow shows the result in Figure 6B.
+Figure 6B might be the result of
 <pre>
 &lt;body>
-	&lt;div id="rect1" style="position: polar; width: 100px; height: 100px; background-color: blue;">&lt;/div>
-	&lt;div id="rect2" style="position: polar; width: 50px; height: 50px;
-	background-color: green;">&lt;/div>
+	&lt;div style="position: polar; width: 100px; height: 100px; background-color: blue;">&lt;/div>
+	&lt;div style="position: polar; width: 50px; height: 50px; background-color: green;">&lt;/div>
 &lt;/body>
 </pre>
+
 <br />
-<div style="width: 600px; text-align:center">
-	<div style="float: left; width: 300px;">
-		<img style="width: 250px" src="images/polar_positioning_a.png">
-		<p>(A) Deploying elements using the conventional coordinate system used in the web</p>
+<div style="width: 700px; text-align:center">
+    <div style="float: left; width: 350px;">
+		<img style="width: 300px" src="images/polar_positioning_a.png">
+		<p>(A) With 'position: <code>absolute</code>'</p>
+	</div>
+    <div style="float: left; width: 350px; ">
+		<img style="width: 300px" src="images/polar_positioning_b.png">
+		<p>(B) With 'position: <code>polar</code>'</p>
 	</div>
-	<div style="float: left; width: 300px;">
-		<img style="width: 250px" src="images/polar_positioning_b.png">
-		<p>(B) Deploying elements using polar coordinate system</p>
-	</div>	
 </div>
-<div style="width: 600px">
-	<p class="caption">Positioning elements in conventional coordinate system and polar coordinate system</p>
+<div style="width: 700px">
+    <p class="caption">Positioning elements in conventional coordinate system and polar coordinate system</p>
 </div>
+
 </div>
 
 
@@ -373,7 +382,7 @@ This example shows a way to align elements within the polar coordinate system.
 </div>
 
 <p class="issue">
-Is new property needed to support for rotating the element itself?
+How to rotate the element itself with an axis from the element position to the central point of containing block? Is new property needed to support that at one time in polar coordinate system?
 </p>
 <p class="issue">
 How to position items to the edge of the containing block without overflowing it? (<i>polar-anchor</i> could be suggested)