Update 'shape-inside: display' description (2)

Author: hyojinLGE

css-round-display/Overview.bs

@@ -168,7 +168,9 @@ spec:css21; type:type; text:<uri>
     Computed value: computed lengths for <<basic-shape>>, the absolute URI for <<uri>>, otherwise as specified
     Animatable: as specified for <<basic-shape>>, otherwise no
 </pre>
-The example below shows how the 'shape-inside' property works when it is set to '<code>display</code>'.
+<p>
+The example below shows how the 'shape-inside' property works when it is set to '<code>display</code>'. Without using Mediaqueries, contents can be aligned within the display edge.
+</p>
 <div class='example'>
 <pre>&lt;style>
 
@@ -188,6 +190,9 @@ The example below shows how the 'shape-inside' property works when it is set to
         simple box with a circle shape-inside.
     &lt;/p>
 &lt;/div>
+<br />
+<p>-------------------------------------------------------------</p>
+<br />
 </pre>
     <div style="width: 500px; height: 380px; text-align:center">
         <div style="float: left; width: 230px;">
@@ -203,8 +208,12 @@ The example below shows how the 'shape-inside' property works when it is set to
         <p class="caption">Align the content along the display border</p>
     </div>
 </div>
+<p>
 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.
+</p>
+<p>
 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.
+</p>
 <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>