Update 'shape-inside: display' description

Author: hyojinLGE

css-round-display/Overview.bs

@@ -64,7 +64,7 @@ By the mechanism of media queries, if the value of the 'device-radius' media fea
 	Percentage: Refer to corresponding dimension of the display
 </pre>
 <p class="note">
-Note: To define a '<code>range</code>' type media feature, the feature may be written as a normal media feature, but with a '<code>min-</code>' or '<code>max-</code>' prefix on the feature name. '<code>min-</code>' or '<code>max-</code>' prefixes express 'greater or equal to' or 'smaller or equal to' constriants respectively.
+NOTE: To define a '<code>range</code>' type media feature, the feature may be written as a normal media feature, but with a '<code>min-</code>' or '<code>max-</code>' prefix on the feature name. '<code>min-</code>' or '<code>max-</code>' prefixes express 'greater or equal to' or 'smaller or equal to' constriants respectively.
 </p>
 <p>
 The length or percentage value of the '<code>device-radius</code>' property defines a radius of a quarter ellipse in terms of the shape of the corner of the outer screen edge (This is similar to the '<code>border-radius</code>' properties. see the 'border-radius' description). If the length is zero the shape of screen is a rectangle, otherwise it is a rectangle with rounded corners or a regular circle. A percentage value of the '<code>device-radius</code>' is proportional to the diameter of the screen. If the screen shape is the regular circle, '<code>device-radius</code>': 50% has a true value, because a half of the diameter of the regular circle is the radius of the screen shape. An negative value is not allowed.
@@ -141,7 +141,7 @@ If this example code is loaded in a regular round display, '<code>round.css</cod
 </div>
 </div>
 
-<p class="note">If the shapes of displays are various, such as polygons, we need to extend the media features more with additional parameters. The current features have limitations to support the diversity beyond round shapes. How can we express star-shaped polygons? (E.g., SVG syntax, etc.) Of course, there is a trade-off between simplicity and expressiveness.
+<p class="note">NOTE: If the shapes of displays are various, such as polygons, we need to extend the media features more with additional parameters. The current features have limitations to support the diversity beyond round shapes. How can we express star-shaped polygons? (E.g., SVG syntax, etc.) Of course, there is a trade-off between simplicity and expressiveness.
 </p>
 
 <p class="issue">
@@ -189,20 +189,22 @@ The example below shows how the 'shape-inside' property works when it is set to
     &lt;/p>
 &lt;/div>
 </pre>
-</div>
-<div style="width: 500px; height: 380px; text-align:center">
-    <div style="float: left; width: 250px;">
-        <img style="width: 250px" src="images/watch_b.png">
-        <p>(A) Without '<code>shape-inside</code>'</p>
+    <div style="width: 500px; height: 380px; text-align:center">
+        <div style="float: left; width: 230px;">
+            <img style="width: 230px" src="images/watch_b.png">
+            <p>(A) Without '<code>shape-inside</code>'</p>
+        </div>
+        <div style="float: left; width: 230px;">
+            <img style="width: 230px" src="images/watch_c.png">
+            <p>(B) With '<code>shape-inside: display</code>'</p>
+        </div>
     </div>
-    <div style="float: left; width: 250px;">
-        <img style="width: 250px" src="images/watch_c.png">
-        <p>(B) With '<code>shape-inside: display</code>'</p>
+    <div style="width: 500px">
+        <p class="caption">Align the content along the display border</p>
     </div>
 </div>
-<div style="width: 500px">
-    <p class="caption">Align the content along the display border</p>
-</div>
+Even though the shape of a rounded display could be described by circle() or ellipse() in <basic-shape>, 'shape-inside: display' is useful that authors make contents to be aligned within the display edge conveniently. In case complicated shaped display like curved, stelliform, or polygonal shape, The availability of 'shape-inside: display' is more increased in comparison with a simple shaped display.
+When the containing block is placed on one end of the display and the block has 'shape-inside: display', The descendants of containing block are basically put on the overlapping region between the containing block and the display area. The overlapping region's shape is mostly complicated shape, so it's difficult to define the shape using previous method like <basic-shape>. The figure 4 describes these circumstances as follow.
 <div style="width: 500px;">
     <img style="width: 500px" src="images/ex3.png">
     <p class="caption">Align a part of the content along the display border</p>