Skip to content

Commit 6fda9cc

Browse files
committed
Update 'shape-inside: display' description (3)
1 parent 333442e commit 6fda9cc

1 file changed

Lines changed: 14 additions & 16 deletions

File tree

css-round-display/Overview.bs

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -190,29 +190,27 @@ The example below shows how the 'shape-inside' property works when it is set to
190190
simple box with a circle shape-inside.
191191
</p>
192192
</div>
193-
<br />
194-
<p>-------------------------------------------------------------</p>
195-
<br />
196193
</pre>
197-
<div style="width: 500px; height: 380px; text-align:center">
198-
<div style="float: left; width: 230px;">
199-
<img style="width: 230px" src="images/watch_b.png">
200-
<p>(A) Without '<code>shape-inside</code>'</p>
201-
</div>
202-
<div style="float: left; width: 230px;">
203-
<img style="width: 230px" src="images/watch_c.png">
204-
<p>(B) With '<code>shape-inside: display</code>'</p>
205-
</div>
194+
<br />
195+
<div style="width: 500px; height: 380px; text-align:center">
196+
<div style="float: left; width: 230px;">
197+
<img style="width: 230px" src="images/watch_b.png">
198+
<p>(A) Without '<code>shape-inside</code>'</p>
206199
</div>
207-
<div style="width: 500px">
208-
<p class="caption">Align the content along the display border</p>
200+
<div style="float: left; width: 230px;">
201+
<img style="width: 230px" src="images/watch_c.png">
202+
<p>(B) With '<code>shape-inside: display</code>'</p>
209203
</div>
210204
</div>
205+
<div style="width: 500px">
206+
<p class="caption">Align the content along the display border</p>
207+
</div>
208+
</div>
211209
<p>
212-
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.
210+
Even though the shape of the rounded display could be described by circle() or ellipse() as basic-shape, 'shape-inside: display' is useful that authors make contents to be aligned within the display edge conveniently. In case of complicated shaped displays like curved, stelliform, or polygonal shape, the availability of 'shape-inside: display' is more increased in comparison with a simple shaped display (e.g., regular rounded display).
213211
</p>
214212
<p>
215-
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.
213+
When the containing block is placed on one end of the display and the block has 'shape-inside: display', The descendants of the 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 follows.
216214
</p>
217215
<div style="width: 500px;">
218216
<img style="width: 500px" src="images/ex3.png">

0 commit comments

Comments
 (0)