@@ -153,9 +153,9 @@ Relation to the box model and float behavior</h2>
153
153
A reduced <a>float area</a> may have no effect
154
154
on some line boxes
155
155
that would normally be affected by the float.
156
- An <dfn>empty float area</dfn>
157
- (where the shape encloses no area)
158
- has no effect on line boxes .
156
+ If a shape does not enclose any area,
157
+ the shape’s edges are still used
158
+ to define the <a>float area</a> .
159
159
160
160
A <a>float area</a> defined by a shape
161
161
may reduce the normal <a>float area</a> on all sides,
@@ -223,18 +223,34 @@ Relation to the box model and float behavior</h2>
223
223
224
224
<div class="example">
225
225
226
- A shape with no extent will create
227
- a <a>float area</a> with no extent.
228
- Because <a>wrapping</a> only considers the <a>float area</a> ,
229
- either shape below applied to a float
230
- will allow inline content
231
- to flow through all of the float's box.
226
+ A shape that does not enclose any area
227
+ still has edges that contribute to the <a>float area</a> .
232
228
229
+ This inset shape is a vertical line positioned
230
+ at the midpoint of the reference box.
231
+ This midpoint edge is used as the edge
232
+ of the float area for wrapping content.
233
233
<pre><code>
234
- shape-outside: inset(50% 50% 50% 50%);
235
- shape-outside: inset(150% 150% 0% 0%);
236
- </code>
237
- </pre>
234
+ shape-outside: inset(0% 50% 0% 50%);
235
+ </code></pre>
236
+
237
+ If inset values add up to more than the width,
238
+ [[css-backgrounds-3#corner-overlap]] rules are used to determine
239
+ the edges of the rectangle.
240
+ This shape results in a vertical edge
241
+ 25% from the left side of the reference box.
242
+ <pre><code>
243
+ shape-outside: inset(0% 150% 50% 0%);
244
+ </code></pre>
245
+
246
+ If the shape is only a horizontal line,
247
+ then it is an empty float area and has no effect on wrapping.
248
+ Note that in this example shape-margin must be 0px
249
+ (otherwise the line would expand to enclose an area).
250
+ <pre><code>
251
+ shape-outside: inset(50% 0% 0% 50%);
252
+ shape-margin: 0px;
253
+ </code></pre>
238
254
</div>
239
255
240
256
<div class="example">
@@ -350,9 +366,11 @@ Supported Shapes</h3>
350
366
A pair of insets in either dimension
351
367
that add up to more than the used dimension
352
368
(such as left and right insets of 75% apiece)
353
- define a shape enclosing no area.
354
- For this specification,
355
- this results in an <a>empty float area</a> .
369
+ use the [[css-backgrounds-3#corner-overlap]] rules
370
+ to proportionally reduce the inset effect to 100%.
371
+ This will result in a shape edge positioned
372
+ within the reference box
373
+ (at 50%, in the case of two 75% inset values).
356
374
357
375
</dd>
358
376
<dt> <dfn>circle()</dfn> =
@@ -365,9 +383,6 @@ Supported Shapes</h3>
365
383
<strong> r</strong> , the radius
366
384
of the circle.
367
385
Negative values are invalid.
368
- A radius of zero defines a shape
369
- enclosing no area,
370
- which results in an <a>empty float area</a> .
371
386
A percentage value here
372
387
is resolved from the used width and height
373
388
of the <a>reference box</a> as <br>
@@ -393,9 +408,6 @@ Supported Shapes</h3>
393
408
of the ellipse,
394
409
in that order.
395
410
Negative values for either radius are invalid.
396
- If either radius is zero this defines a shape
397
- enclosing no area,
398
- which results in an <a>empty float area</a> .
399
411
Percentage values here are resolved
400
412
against the used width (for the rx value)
401
413
and the used height (for the ry value)
@@ -433,13 +445,6 @@ Supported Shapes</h3>
433
445
by connecting the last vertex
434
446
with the first vertex of the list.
435
447
436
- At least three vertices are required
437
- to define a polygon with an area.
438
- This means that (for this specification)
439
- polygons with less than three vertices
440
- (or with three or more vertices
441
- arranged to enclose no area)
442
- result in an <a>empty float area</a> .
443
448
</dd>
444
449
<dt> <dfn>path()</dfn> =
445
450
path( [<<'fill-rule'>>,] ? <<string>> )
@@ -660,7 +665,7 @@ Shapes from Image</h2>
660
665
is greater than the 'shape-image-threshold' value.
661
666
The absence of any pixels with an alpha value
662
667
greater than the specified threshold
663
- results in an <a> empty float area</a> .
668
+ results in an empty float area that will not affect wrapping .
664
669
If the 'shape-image-threshold' is not specified,
665
670
the initial value to be considered is 0.0.
666
671
@@ -993,16 +998,17 @@ Expanding a Shape: the 'shape-margin' property</h3>
993
998
that includes all the points
994
999
that are the 'shape-margin' distance outward
995
1000
in the perpendicular direction
996
- from a point on the underlying shape.
1001
+ from a point on the underlying shape.
1002
+ This includes any edge or line sections
1003
+ from the underlying shape.
997
1004
Note that at points where
998
1005
a perpendicular is not defined
999
- (e.g. sharp points)
1006
+ (e.g. sharp points or line ends )
1000
1007
take all points
1001
1008
on the circle centered at the point
1002
1009
and with a radius of 'shape-margin' .
1003
1010
This property takes only non-negative values.
1004
1011
1005
-
1006
1012
<pre class='propdef'>
1007
1013
Name : shape-margin
1008
1014
Value : <<length-percentage>>
@@ -1076,6 +1082,8 @@ Expanding a Shape: the 'shape-margin' property</h3>
1076
1082
Acknowledgments</h2>
1077
1083
1078
1084
This specification is made possible by input from
1085
+ Tab Atkins Jr.,
1086
+ Amelia Bellamy-Royds,
1079
1087
Andrei Bucur,
1080
1088
Alexandru Chiculita,
1081
1089
Boris Chiou,
@@ -1102,6 +1110,7 @@ Acknowledgments</h2>
1102
1110
Peter Sorotokin,
1103
1111
Bear Travis,
1104
1112
Eugene Veselov,
1113
+ Brad Werth,
1105
1114
Stephen Zilles
1106
1115
and the CSS Working Group members.
1107
1116
@@ -1117,6 +1126,7 @@ Since <a href="https://www.w3.org/TR/2014/CR-css-shapes-1-20140320/">March 20th
1117
1126
<li> Added handling of negative margins for margin-box</li>
1118
1127
<li> Added clarifications to shape-margin examples</li>
1119
1128
<li> Added margin=0 case for margin-box shape</li>
1129
+ <li> Changed rules about degenerate shapes to use shape edges</li>
1120
1130
</ul>
1121
1131
1122
1132
<h3 class="no-num" id="20140211">
0 commit comments