[css-round-display] Modify poisitions of figures to be included in related examples, and make an issue about positioning elements with polar to the body

Author: Jihye Hong

css-round-display/Overview.bs

@@ -253,7 +253,7 @@ The example below shows how the 'border-boundary' property works on drawing bord
     <div id="blueBox"></div>
 </div>
 </pre>
-</div>
+
 <div style="width: 600px; text-align:center">
     <div style="float: left; width: 300px;">
         <img style="width: 200px" src="images/border_b.png">
@@ -267,6 +267,8 @@ The example below shows how the 'border-boundary' property works on drawing bord
 <div style="width: 600px">
     <p class="caption">Align the content along the display border</p>
 </div>
+</div>
+
 <p class="note">Note: If the value of 'border-boundary' is parent or display, border lines of the element are actually just a visual effect. It triggers a layout for rendering in a general way, but in the above cases (border-boundary: parent|display), the layout doesn't occur and it only draws the border lines inward from the containing block's borders. With this situation, the borders might hide contents around the display edge.
 </p>
 
@@ -294,7 +296,7 @@ When the 'position' property on an element is set to '<code>polar</code>', the e
 <p class="note">
 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 class="issue">
+<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.
 </p>
 <div class='example'>
@@ -305,14 +307,14 @@ The examples below show the difference between conventional coordinate system in
 	&lt;div id="rect2" style="position: absolute; width: 50px; height: 50px; background-color: green;">&lt;/div>
 &lt;/body>
 </pre>
-And another example bellow shows the result in Figure 6B.
+Another example bellow shows the result in Figure 6B.
 <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: gr    een;">&lt;/div>
+	&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;/body>
 </pre>
-</div>
 
 <div style="width: 800px; text-align:center">
 	<div style="float: left; width: 400px;">
@@ -323,11 +325,10 @@ And another example bellow shows the result in Figure 6B.
 		<img style="width: 300px" src="images/polar_positioning_b.png">
 		<p>(B) Deploying elements using polar coordinate system</p>
 	</div>
-</div>
-
-<div style="width: 800px">
 	<p class="caption">Positioning elements in conventional coordinate system and polar coordinate system</p>
 </div>
+</div>
+
 
 <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.
@@ -363,21 +364,20 @@ This example shows a way to align elements within the polar coordinate system.
   &lt;div id="circle3" style="position: polar; polar-angle: 225deg; polar-distance: 100%">&lt;/div>
 &lt;/body>
 </pre>
-</div>
-
 <div style="width: 400px; text-align: center">
-<img src="images/polar.png" style="width: 200px; border: 1px #AAA solid; text-align: center"/>
-<p class="caption">An example of polar positioning</p>
+	<img src="images/polar.png" style="width: 200px; border: 1px #AAA solid; text-align: center"/>
+	<p class="caption">An example of polar positioning</p>
+</div>
 </div>
 
 <p class="issue">
-Will an element itself be rotated through the 'polar-angle' property?
+Is new property needed to support for rotating the element itself?
 </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)
 </p>
 <p class="issue">
-One of the profits of polar coordinate system is performance improvement. The significant performance improvement can be seen in animation using the polar coordinate. How to define animation in polar coordinate? Is there any difference between the conventional coordinate and polar coordinate when animate elements?
+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>
 <p class="issue">
 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?