css-exclusions/Overview.html@2e18178b6451
css-exclusions/Overview.html
Mon, 22 Apr 2013 17:29:40 -0700
- author
- Alan Stearns <stearns@adobe.com>
- date
- Mon, 22 Apr 2013 17:29:40 -0700
- changeset 7984
- 2e18178b6451
- parent 7953
- 536970c5c544
- child 8185
- 0cbffca495fd
- permissions
- -rwxr-xr-x
[css-exclusions] add inset rectangle to basic shapes
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
4 <html lang=en>
5 <head
6 profile="http://dublincore.org/documents/2008/08/04/dc-html/ http://www.w3.org/2006/03/hcard">
7 <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
8 <title>CSS Exclusions and Shapes Module Level 3</title>
10 <link href="http://purl.org/dc/terms/" rel=schema.dcterms>
11 <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
12 rel=dcterms.rights>
13 <meta content="CSS Exclusions and Shapes Module Level 3"
14 name=dcterms.title>
15 <meta content=text name=dcterms.type>
16 <meta content=2013-04-23 name=dcterms.date>
17 <meta content="Vincent Hardy" name=dcterms.creator>
18 <meta content="Rossen Atanassov" name=dcterms.creator>
19 <meta content="Alan Stearns" name=dcterms.creator>
20 <meta content=W3C name=dcterms.publisher>
21 <meta content="http://dev.w3.org/csswg/css3-exclusions/"
22 name=dcterms.identifier>
23 <link href="../shared/style/default.css" rel=stylesheet type="text/css">
24 <script defer=defer
25 src="http://test.csswg.org/harness/annotate.js#CSS3-EXCLUSIONS_DEV"
26 type="text/javascript"></script>
27 <style type="text/css">
28 .singleImgExample {
29 display: block;
30 margin: auto;
31 }
33 .example-table {
34 table-layout: fixed;
35 width: 100%;
36 }
38 .example-table tr td img {
39 width: 90%;
40 }
41 </style>
42 <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
43 type="text/css">
44 <link href="../shared/style/issues.css" rel=stylesheet type="text/css">
45 <link href="../shared/style/alternate-spec-style.css" id=st rel=stylesheet
46 title="alternate spec style" type="text/css">
48 <body>
49 <div class=head id=div-head>
50 <p><a href="http://www.w3.org/"><img alt=W3C height=53 id=mobile-logo
51 src="http://www.w3.org/2008/site/images/logo-w3c-mobile-lg" width=90></a>
52 <!--begin-logo-->
54 <p><a href="http://www.w3.org/"><img alt=W3C height=48
55 src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
57 <h1 id=css-exclusions-module>CSS Exclusions and Shapes Module Level 3</h1>
59 <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 23 April 2013</h2>
61 <dl>
62 <dt>This version:
64 <dd><a
65 href="http://dev.w3.org/csswg/css3-exclusions/">http://dev.w3.org/csswg/css3-exclusions/</a></dd>
66 <!--<dd><a href="http://dev.w3.org/csswg/css3-exclusions/">http://www.w3.org/TR/2013/WD-css3-exclusions-20130423/</a></dd>-->
68 <dt>Latest version:
70 <dd><a
71 href="http://www.w3.org/TR/css3-exclusions/">http://www.w3.org/TR/css3-exclusions/</a>
73 <dt>Editor's Draft:
75 <dd><a
76 href="http://dev.w3.org/csswg/css3-exclusions/">http://dev.w3.org/csswg/css3-exclusions/</a>
78 <dt>Previous version:
80 <dd>None
82 <dt>Editors:
84 <dd class=vcard><span class=fn>Vincent Hardy</span>, <span
85 class=org>Adobe Systems, Inc.</span>, <span
86 class=email>vhardy@adobe.com</span>
88 <dd class=vcard><span class=fn>Rossen Atanassov</span>, <span
89 class=org>Microsoft Corporation</span>, <span
90 class=email>ratan@microsoft.com</span>
92 <dd class=vcard><span class=fn>Alan Stearns</span>, <span class=org>Adobe
93 Systems, Inc.</span>, <span class=email>stearns@adobe.com</span>
95 <dt>Issues List:
97 <dd><a
98 href="https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&product=CSS&component=Exclusions&resolution=---&cmdtype=doit">in
99 Bugzilla</a>
101 <dt>Feedback:
103 <dd><a
104 href="mailto:www-style@w3.org?subject=%5B[css-exclusions]%5D%20feedback">www-style@w3.org</a>
105 with subject line “<kbd>[css-exclusions] <var>… message topic
106 …</var></kbd>” (<a
107 href="http://lists.w3.org/Archives/Public/www-style/"
108 rel=discussion>archives</a>)
109 </dl>
110 <!--begin-copyright-->
111 <p class=copyright><a
112 href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
113 rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr
114 title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
115 href="http://www.csail.mit.edu/"><abbr
116 title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
117 href="http://www.ercim.eu/"><abbr
118 title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
119 <a href="http://www.keio.ac.jp/">Keio</a>, <a
120 href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a
121 href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
122 <a
123 href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
124 and <a
125 href="http://www.w3.org/Consortium/Legal/copyright-documents">document
126 use</a> rules apply.</p>
127 <!--end-copyright-->
128 <hr title="Separator for header">
129 </div>
131 <h2 class="no-num no-toc" id=abstract>Abstract</h2>
133 <p> CSS Exclusions define arbitrary areas around which <a
134 href="http://www.w3.org/TR/CSS2/visuren.html#inline-boxes">inline
135 content</a> (<a href="#CSS21"
136 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>) content can flow. CSS
137 Exclusions can be defined on any CSS block-level elements. CSS Exclusions
138 extend the notion of content wrapping previously limited to floats.
140 <p>CSS Shapes control the geometric shapes used for wrapping inline flow
141 content outside or inside an element. CSS Shapes can be applied to any
142 element. A circle shape on a float will cause inline content to wrap
143 around the circle shape instead of the float's bounding box.
145 <p>Combining CSS Exclusions and CSS Shapes allows sophisticated layouts,
146 allowing interactions between shapes in complex positioning schemes.
148 <h2 class="no-num no-toc" id=status>Status of this document</h2>
149 <!--begin-status-->
151 <p>This is a public copy of the editors' draft. It is provided for
152 discussion only and may change at any moment. Its publication here does
153 not imply endorsement of its contents by W3C. Don't cite this document
154 other than as work in progress.
156 <p>The (<a
157 href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
158 mailing list <a
159 href="mailto:www-style@w3.org?Subject=%5Bcss3-exclusions%5D%20PUT%20SUBJECT%20HERE">
160 www-style@w3.org</a> (see <a
161 href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
162 discussion of this specification. When sending e-mail, please put the text
163 “css3-exclusions” in the subject, preferably like this:
164 “[<!---->css3-exclusions<!---->] <em>…summary of comment…</em>”
166 <p>This document was produced by the <a
167 href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
168 the <a href="http://www.w3.org/Style/">Style Activity</a>).
170 <p>This document was produced by a group operating under the <a
171 href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
172 2004 W3C Patent Policy</a>. W3C maintains a <a
173 href="http://www.w3.org/2004/01/pp-impl/32061/status"
174 rel=disclosure>public list of any patent disclosures</a> made in
175 connection with the deliverables of the group; that page also includes
176 instructions for disclosing a patent. An individual who has actual
177 knowledge of a patent which the individual believes contains <a
178 href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
179 Claim(s)</a> must disclose the information in accordance with <a
180 href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
181 6 of the W3C Patent Policy</a>.</p>
182 <!--end-status-->
184 <h2 class="no-num no-toc" id=contents>Table of contents</h2>
185 <!--begin-toc-->
187 <ul class=toc>
188 <li><a href="#intro"><span class=secno>1. </span>Introduction</a>
190 <li><a href="#definitions"><span class=secno>2. </span>Definitions</a>
192 <li><a href="#exclusions"><span class=secno>3. </span>Exclusions</a>
193 <ul class=toc>
194 <li><a href="#declaring-exclusions"><span class=secno>3.1.
195 </span>Declaring exclusions</a>
196 <ul class=toc>
197 <li><a href="#wrap-flow-property"><span class=secno>3.1.1. </span>The
198 ‘<code class=property>wrap-flow</code>’ property</a>
199 </ul>
201 <li><a href="#scope-and-effect-of-exclusions"><span class=secno>3.2.
202 </span>Scope and effect of exclusions</a>
204 <li><a href="#propagation-of-exclusions"><span class=secno>3.3.
205 </span>Propagation of Exclusions</a>
206 <ul class=toc>
207 <li><a href="#wrap-through-property"><span class=secno>3.3.1.
208 </span>The ‘<code class=property>wrap-through</code>’
209 Property</a>
210 </ul>
212 <li><a href="#exclusions-order"><span class=secno>3.4. </span>Exclusions
213 order</a>
215 <li><a href="#exclusions-processing-model"><span class=secno>3.5.
216 </span>Processing model</a>
217 <ul class=toc>
218 <li><a href="#exclusions-processing-model-description"><span
219 class=secno>3.5.1. </span>Description</a>
221 <li><a
222 href="#step-1-resolve-exclusion-boxes-belonging-to-each-wrapping-context"><span
223 class=secno>3.5.2. </span>Step 1: resolve exclusion boxes belonging
224 to each <span>wrapping context</span></a>
226 <li><a
227 href="#step-2-resolve-wrapping-contexts-layout-containing-blocks"><span
228 class=secno>3.5.3. </span>Step 2: resolve wrapping contexts and lay
229 out containing blocks</a>
231 <li><a href="#step-2-A-resolve-exclusions-position-and-size"><span
232 class=secno>3.5.4. </span>Step 2-A: resolve the position and size of
233 exclusion boxes</a>
235 <li><a
236 href="#step-2-B-layout-containing-block-applying-wrapping"><span
237 class=secno>3.5.5. </span>Step 2-B: lay out containing block applying
238 wrapping</a>
240 <li><a href="#exclusions-processing-model-example"><span
241 class=secno>3.5.6. </span>Example</a>
242 <ul class=toc>
243 <li><a href="#step-1-resolve-exclusion-boxes-belonging"><span
244 class=secno>3.5.6.1. </span>Step 1: resolve exclusion boxes
245 belonging to each <span>wrapping context</span></a>
247 <li><a href="#step-2-resolve-wrapping-contexts-and-lay"><span
248 class=secno>3.5.6.2. </span>Step 2: resolve wrapping contexts and
249 lay out containing blocks</a>
250 <ul class=toc>
251 <li><a href="#resolving-rwc-1"><span class=secno>3.5.6.2.1.
252 </span>Resolving RWC-1</a>
254 <li><a href="#resolving-rwc-2"><span class=secno>3.5.6.2.2.
255 </span>Resolving RWC-2</a>
256 </ul>
257 </ul>
258 </ul>
260 <li><a href="#floats-and-exclusions"><span class=secno>3.6.
261 </span>Floats and exclusions</a>
262 <ul class=toc>
263 <li><a href="#floats-and-exclusions-similarities"><span
264 class=secno>3.6.1. </span>Similarities</a>
266 <li><a href="#floats-and-exclusions-differences"><span
267 class=secno>3.6.2. </span>Differences</a>
269 <li><a href="#floats-and-exclusions-interoperability"><span
270 class=secno>3.6.3. </span>Interoperability</a>
271 <ul class=toc>
272 <li><a href="#effect-of-floats-on-exclusions"><span
273 class=secno>3.6.3.1. </span>Effect of floats on exclusions</a>
275 <li><a href="#effect-of-exclusions-on-floats"><span
276 class=secno>3.6.3.2. </span>Effect of exclusions on floats</a>
277 </ul>
278 </ul>
279 </ul>
281 <li><a href="#shapes"><span class=secno>4. </span>Shapes</a>
282 <ul class=toc>
283 <li><a href="#relation-to-box-model-and-float-behavior"><span
284 class=secno>4.1. </span>Relation to the box model and float
285 behavior</a>
287 <li><a href="#basic-shapes-from-svg-syntax"><span class=secno>4.2.
288 </span>Basic Shapes</a>
289 <ul class=toc>
290 <li><a href="#supported-basic-shapes"><span class=secno>4.2.1.
291 </span>Supported Shapes</a>
293 <li><a href="#referencing-svg-shapes"><span class=secno>4.2.2.
294 </span>Referencing SVG shapes</a>
296 <li><a href="#basic-shape-interpolation"><span class=secno>4.2.3.
297 </span>Interpolation of Basic Shapes</a>
298 </ul>
300 <li><a href="#shapes-from-image"><span class=secno>4.3. </span>Shapes
301 from Image</a>
303 <li><a href="#declaring-shapes"><span class=secno>4.4. </span>Declaring
304 Shapes</a>
305 <ul class=toc>
306 <li><a href="#shape-outside-property"><span class=secno>4.4.1.
307 </span>The ‘<code class=property>shape-outside</code>’
308 Property</a>
310 <li><a href="#shape-inside-property"><span class=secno>4.4.2.
311 </span>The ‘<code class=property>shape-inside</code>’
312 Property</a>
314 <li><a href="#shape-image-threshold-property"><span class=secno>4.4.3.
315 </span>The ‘<code class=property>shape-image-threshold</code>’
316 Property</a>
318 <li><a href="#shape-margin-property"><span class=secno>4.4.4.
319 </span>The ‘<code class=property>shape-margin</code>’
320 property</a>
322 <li><a href="#shape-padding-property"><span class=secno>4.4.5.
323 </span>The ‘<code class=property>shape-padding</code>’
324 Property</a>
325 </ul>
326 </ul>
328 <li><a href="#conformance"><span class=secno>5. </span>Conformance</a>
330 <li class=no-num><a href="#acknowledgments">Acknowledgments</a>
332 <li class=no-num><a href="#references">References</a>
333 <ul class=toc>
334 <li class=no-num><a href="#normative-references">Normative
335 references</a>
337 <li class=no-num><a href="#other-references">Other references</a>
338 </ul>
340 <li class=no-num><a href="#index">Index</a>
342 <li class=no-num><a href="#property-index">Property index</a>
344 <li class=no-num><a href="#change-log">Change Log</a>
345 <ul class=toc>
346 <li class=no-num><a href="#since-may-3rd-2012">Since May 3rd 2012</a>
348 <li class=no-num><a href="#since-december-13th-2011">Since December 13th
349 2011</a>
350 </ul>
351 </ul>
352 <!--end-toc-->
354 <h2 id=intro><span class=secno>1. </span>Introduction</h2>
356 <p><em>This section is not normative.</em>
358 <p> The exclusions section of this specification defines features that
359 allow inline flow content to wrap around outside the <a
360 href="#exclusion-area">exclusion area</a> of elements.
362 <p> The shapes section of the specification defines properties to control
363 the geometry of an element's <a href="#exclusion-area">exclusion area</a>
364 as well as the geometry used for wrapping an element's inline flow
365 content.
367 <h2 id=definitions><span class=secno>2. </span>Definitions</h2>
369 <p><dfn id=exclusion-box>Exclusion box</dfn>
371 <p> A <a href="http://www.w3.org/TR/css3-box/">box</a> (<a href="#CSS3BOX"
372 rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a>) that defines an <a
373 href="#exclusion-area">exclusion area</a> for other boxes. The ‘<a
374 href="#wrap-flow"><code class=property>wrap-flow</code></a>’ property is
375 used to make an element's generated box an exclusion box. An exclusion box
376 contributes its <a href="#exclusion-area">exclusion area</a> to its <a
377 href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">
378 containing block's</a> <a href="#wrapping-context">wrapping context</a>.
379 An element with a ‘<code class=property>float</code>’ computed value
380 other than ‘<code class=property>none</code>’ does not become an
381 exclusion.
383 <p><dfn id=exclusion-area>Exclusion area</dfn>
385 <p> The area used for excluding inline flow content around an exclusion
386 box. The <a href="#exclusion-area">exclusion area</a> is equivalent to the
387 <a href="http://www.w3.org/TR/CSS2/box.html#box-dimensions"> border
388 box</a> for an exclusion box. This specification's ‘<a
389 href="#shape-outside"><code class=property>shape-outside</code></a>’
390 property can be used to define arbitrary, non-rectangular <a
391 href="#exclusion-area">exclusion areas</a>. The ‘<a
392 href="#shape-inside"><code class=property>shape-inside</code></a>’
393 property also defines an <a href="#exclusion-area">exclusion area</a>, but
394 in this case it is the area outside the shape that inline content avoids.
396 <p><dfn id=float-area>Float area</dfn>
398 <p> The area used for excluding inline flow content around a float element.
399 By default, the float area is the float element's <a
400 href="http://www.w3.org/TR/CSS2/box.html#box-dimensions">margin box</a>.
401 This specification's ‘<a href="#shape-outside"><code
402 class=property>shape-outside</code></a>’ property can be used to define
403 arbitrary, non-rectangular float areas.
405 <p><dfn id=exclusion-element>Exclusion element</dfn>
407 <p>An block-level element which is not a float and generates an <a
408 href="#exclusion-box">exclusion box</a>. An element generates an exclusion
409 box when its ‘<a href="#wrap-flow"><code
410 class=property>wrap-flow</code></a>’ property's computed value is not
411 ‘<code class=property>auto</code>’.
413 <p><dfn id=wrapping-context>Wrapping context</dfn>
415 <div class=issue-marker data-bug_id=15086 data-bug_status=NEW> <a
416 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15086">Issue-15086</a>
418 <div class=issue-details>
419 <p class=short-desc>should the wrapping context be generic and include
420 floats?
421 </div>
422 </div>
424 <p> The <a href="#wrapping-context">wrapping context</a> of a box is a
425 collection of <a href="#exclusion-area">exclusion areas</a> contributed by
426 its associated <a href="#exclusion-box">exclusion boxes</a> and elements
427 with ‘<a href="#shape-inside"><code
428 class=property>shape-inside</code></a>’. During layout, a box wraps its
429 inline flow content in the <a href="#wrapping-area"><code>wrapping
430 area</code></a> that corresponds to the subtraction of its <a
431 href="#wrapping-context">wrapping context</a> from its own <a
432 href="#content-area">content area</a>.
434 <p> A box inherits its <a
435 href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">containing
436 block's</a> <a href="#wrapping-context">wrapping context</a> unless it
437 specifically resets it using the ‘<a href="#wrap-through"><code
438 class=property>wrap-through</code></a>’ property.
440 <p><dfn id=content-area>Content area</dfn>
442 <p> The <a href="http://www.w3.org/TR/CSS2/box.html#box-dimensions">content
443 area</a> is normally used for layout of the inline flow content of a box.
445 <p><dfn id=wrapping-area>Wrapping area</dfn>
447 <p> The area used for layout of inline flow content of a box affected by a
448 <a href="#wrapping-context">wrapping context</a>, defined by subtracting
449 the <a href="#wrapping-context">wrapping context</a> from its <a
450 href="#content-area">content area</a>
452 <div class=issue-marker data-bug_id=15089 data-bug_status=NEW> <a
453 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15089">Issue-15089</a>
455 <div class=issue-details>
456 <p class=short-desc>shrink-to-fit circle / shape
457 </div>
458 </div>
460 <p><dfn id=outside-and-inside title=outside-inside>Outside and inside</dfn>
462 <p> In this specification, ‘<code class=property>outside</code>’ refers
463 to DOM content that is not a descendant of an element while ‘<code
464 class=property>inside</code>’ refers to the element's descendants.
466 <h2 id=exclusions><span class=secno>3. </span>Exclusions</h2>
468 <p> Exclusion elements define <a href="#exclusion-area">exclusion areas</a>
469 that contribute to their containing block's <a
470 href="#wrapping-context">wrapping context</a>. As a consequence,
471 exclusions impact the layout of their containing block's descendants.
473 <p>
475 <p> Elements layout their inline content in their <a
476 href="#content-area">content area</a> and wrap around the <a
477 href="#exclusion-area">exclusion areas</a> in their associated <a
478 href="#wrapping-context">wrapping context</a>. If the element is itself an
479 exclusion, it does not wrap around its own exclusion shape and the impact
480 of other exclusions on other exclusions is controlled by the ‘<code
481 class=property>z-index</code>’ property as explained in the <a
482 href="#exclusions-order">exclusions order</a> section.
484 <p> The <a href="#shapes">shape properties</a> can be used to change the
485 shape of <a href="#exclusion-area">exclusion areas</a>.
487 <h3 id=declaring-exclusions><span class=secno>3.1. </span>Declaring
488 exclusions</h3>
490 <p> An element becomes an exclusion when its ‘<a href="#wrap-flow"><code
491 class=property>wrap-flow</code></a>’ property has a computed value other
492 than ‘<code class=property>auto</code>’.
494 <h4 id=wrap-flow-property><span class=secno>3.1.1. </span>The ‘<a
495 href="#wrap-flow"><code class=property>wrap-flow</code></a>’ property</h4>
497 <table class=propdef>
498 <tbody>
499 <tr>
500 <th>Name:
502 <td><dfn id=wrap-flow title="'wrap-flow'">wrap-flow</dfn>
504 <tr>
505 <th>Value:
507 <td><var>auto</var> | <var>both</var> | <var>start</var> |
508 <var>end</var> | <var>minimum</var> | <var>maximum</var> |
509 <var>clear</var>
511 <tr>
512 <th>Initial:
514 <td>auto
516 <tr>
517 <th>Applies to:
519 <td>block-level elements.
521 <tr>
522 <th>Inherited:
524 <td>no
526 <tr>
527 <th>Percentages:
529 <td>N/A
531 <tr>
532 <th>Media:
534 <td>visual
536 <tr>
537 <th>Computed value:
539 <td>as specified except for element's whose ‘<code
540 class=property>float</code>’ computed value is not <code
541 class=css>none</code>, in which case the computed value is ‘<code
542 class=property>auto</code>’.
543 </table>
545 <p>The values of this property have the following meanings:
547 <dl>
548 <dt><dfn id=auto title="'wrap-flow'!!'auto'">auto</dfn>
550 <dd> No exclusion is created. Inline flow content interacts with the
551 element as usual. In particular, if the element is a <a
552 href="http://www.w3.org/TR/CSS2/visuren.html#floats">float</a> (see <a
553 href="#CSS21" rel=biblioentry>[CSS21]<!--{{CSS21}}--></a>), the behavior
554 is unchanged.
556 <dt><dfn id=both title="'wrap-flow'!!'both'">both</dfn>
558 <dd> Inline flow content can flow on all sides of the exclusion.
560 <dt><dfn id=start title="'wrap-flow'!!'start'">start</dfn>
562 <dd> Inline flow content can flow around the start edge of the <a
563 href="#exclusion-area">exclusion area</a> but must leave the area next to
564 the end edge of the exclusion empty.
566 <dt><dfn id=end title="'wrap-flow'!!'end'">end</dfn>
568 <dd> Inline flow content can flow around the end edge of the <a
569 href="#exclusion-area">exclusion area</a> but must leave the area next to
570 the start edge of the exclusion empty.
572 <dt><dfn id=minimum title="'wrap-flow'!!'minimum'">minimum</dfn>
574 <dd> Inline flow content can flow around the edge of the exclusion with
575 the smallest available space within the flow content's containing block,
576 and must leave the other edge of the exclusion empty.
578 <dt><dfn id=maximum title="'wrap-flow'!!'maximum'">maximum</dfn>
580 <dd> Inline flow content can flow around the edge of the exclusion with
581 the largest available space within the flow content's containing block,
582 and must leave the other edge of the exclusion empty.
584 <dt><dfn id=clear title="'wrap-flow'!!'clear'">clear</dfn>
586 <dd> Inline flow content can only flow before and after the exclusion in
587 the flow content's block direction and must leave the areas next to the
588 start and end edges of the exclusion empty.
589 </dl>
591 <p> If the property's computed value is ‘<code
592 class=property>auto</code>’, the element does not become an
593 <span>exclusion</span>.
595 <p> Otherwise, a computed ‘<a href="#wrap-flow"><code
596 class=property>wrap-flow</code></a>’ property value of ‘<code
597 class=property>both</code>’, ‘<code class=property>start</code>’,
598 ‘<code class=property>end</code>’, ‘<code
599 class=property>minimum</code>’, ‘<code
600 class=property>maximum</code>’ or ‘<code
601 class=property>clear</code>’ on an element makes that element an
602 <span>exclusion element. It's <span>exclusion shape</span> is contributed
603 to its containing block's <a href="#wrapping-context">wrapping
604 context</a>, causing the containing block's descendants to wrap around its
605 <a href="#exclusion-area">exclusion area</a>. </span>
607 <div class=figure> <img
608 alt="LTR text wrapping on left edge, RTL text wrapping on right edge, and vertical text wrapping on top edge."
609 src="images/exclusion-writing-modes.png" width="70%">
610 <p class=caption>Exclusion with ‘<code class=css>wrap-flow:
611 start</code>’ interacting with various writing modes.
612 </div>
614 <p>Determining the relevant edges of the exclusion depends on the <a
615 href="http://www.w3.org/TR/css3-writing-modes/#text-flow">writing mode</a>
616 <a href="#CSS3-WRITING-MODES"
617 rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a> of
618 the content wrapping around the <a href="#exclusion-area">exclusion
619 area</a>.
621 <p>An <a href="#exclusion-element">exclusion element</a> establishes a new
622 <a href="">block formatting context</a> (see <a href="#CSS21"
623 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>) for its content.
625 <div class=figure> <img
626 alt="General illustration showing how exclusions combine"
627 src="images/exclusions-illustration.png" width="70%">
628 <p class=caption>Combining exclusions
629 </div>
631 <p> The above figure illustrates how exclusions are combined. The outermost
632 box represents an element's content box. The A, B, C and D darker gray
633 boxes represent exclusions in the element's <a
634 href="#wrapping-context">wrapping context</a>. A, B, C and D have their
635 respective ‘<a href="#wrap-flow"><code
636 class=property>wrap-flow</code></a>’ computed to ‘<code
637 class=property>both</code>’, ‘<code class=property>start</code>’,
638 ‘<code class=property>end</code>’ and ‘<code
639 class=property>clear</code>’ respectively. The lighter gray areas show
640 the additional areas that are excluded for inline layout as a result of
641 the ‘<a href="#wrap-flow"><code
642 class=property>wrap-flow</code></a>’value. For example, the area to the
643 right of ‘<code class=property>B</code>’ cannot be used for inline
644 layout of left-to-right writing mode content because the ‘<a
645 href="#wrap-flow"><code class=property>wrap-flow</code></a>’ for
646 ‘<code class=property>B</code>’ is ‘<code
647 class=property>start</code>’.
649 <p> The background ‘<code class=property>blue</code>’ area shows what
650 areas are available for a left-to-right writing mode element's inline
651 content layout. All areas represented with a light or dark shade of gray
652 are not available for (left-to-right writing mode) inline content layout.
654 <div class="issue-marker wrapper">
655 <div class=issue-marker data-bug_id=15084 data-bug_status=NEW> <a
656 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15084">Issue-15084</a>
658 <div class=issue-details>
659 <p class=short-desc>Fluidity of the layout with respect to different
660 amounts of content
661 </div>
662 </div>
663 </div>
665 <div class=example>
666 <p> The ‘<a href="#wrap-flow"><code
667 class=property>wrap-flow</code></a>’ property values applied to
668 exclusions as grid items.</p>
669 <code class=html></code>
670 <pre>
672 <div id="grid">
673 <div id="top-right" class="exclusion"></div>
674 <div id="bottom-left" class="exclusion"></div>
675 <div id="content">Lorem ipsum…</div>
676 </div>
678 <style type="text/css">
679 #grid {
680 width: 30em;
681 height: 30em;
682 display: grid;
683 grid-columns: 25% 25% 25% 25%;
684 grid-rows: 25% 25% 25% 25%;
686 #top-right {
687 grid-column: 3;
688 grid-row: 2;
689 }
691 #bottom-left {
692 grid-column: 2;
693 grid-row: 3;
694 }
696 .exclusion {
697 wrap-flow: <see below>
698 }
700 #content {
701 grid-row: 1;
702 grid-row-span: 4;
703 grid-column: 1;
704 grid-column-span: 4;
705 }
706 </style>
707 </pre>
709 <p>The following figures illustrate the visual rendering for different
710 values of the ‘<a href="#wrap-flow"><code
711 class=property>wrap-flow</code></a>’ property. The gray grid lines are
712 marking the grid cells. and the blue area is the exclusion box
713 (positioned by the grid).
715 <table class=example-table>
716 <tbody>
717 <tr>
718 <td><code class=html>.exclusion{ wrap-flow: auto; }</code>
720 <td><code class=html>.exclusion{ wrap-flow: both; }</code>
722 <tr>
723 <td><img alt="Example rendering for wrap-side: auto"
724 src="images/exclusion_wrap_side_auto.png">
726 <td><img alt="Example rendering for wrap-side: both"
727 src="images/exclusion_wrap_side_both.png">
729 <tr>
730 <td><code class=html>.exclusion{ wrap-flow: start; }</code>
732 <td><code class=html>.exclusion{ wrap-flow: end; }</code>
734 <tr>
735 <td><img alt="Example rendering for wrap-side: start"
736 src="images/exclusion_wrap_side_left.png">
738 <td><img alt="Example rendering for wrap-side: end"
739 src="images/exclusion_wrap_side_right.png">
741 <tr>
742 <td><code class=html>.exclusion{ wrap-flow: minimum; }</code>
744 <td><code class=html>.exclusion{ wrap-flow: maximum; }</code>
746 <tr>
747 <td><img alt="Example rendering for wrap-side: minimum"
748 src="images/exclusion_wrap_side_minimum.png">
750 <td><img alt="Example rendering for wrap-side: maximum"
751 src="images/exclusion_wrap_side_maximum.png">
753 <tr>
754 <td><code class=html>.exclusion{ wrap-flow: clear; }</code>
756 <td>
758 <tr>
759 <td><img alt="Example rendering for wrap-side: clear"
760 src="images/exclusion_wrap_side_clear.png">
762 <td>
763 </table>
764 </div>
765 <!-- End section "wrap-flow Property" -->
766 <!-- End section "Declaring Exclusions" -->
768 <h3 id=scope-and-effect-of-exclusions><span class=secno>3.2. </span>Scope
769 and effect of exclusions</h3>
771 <p> An <span>exclusion</span> affects the inline flow content descended
772 from the exclusion's containing block (defined in <a
773 href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">
774 CSS 2.1 10.1</a>) and that of all descendant elements of the same
775 containing block. All inline flow content inside the containing block of
776 the exclusions is affected. To stop the effect of exclusions defined
777 outside an element, the ‘<a href="#wrap-through"><code
778 class=property>wrap-through</code></a>’ property can be used (see the <a
779 href="#propagation-of-exclusions">propagation of exclusions</a> section
780 below).
782 <p> As a reminder, for exclusions with ‘<code
783 class=css>position:fixed</code>’, the containing block is that of the
784 root element.</p>
785 <!-- End section "Scope and Effect of Exclusions" -->
787 <h3 id=propagation-of-exclusions><span class=secno>3.3. </span>Propagation
788 of Exclusions</h3>
790 <p> By default, an element inherits its parent <a
791 href="#wrapping-context">wrapping context</a>. In other words it is
792 subject to the exclusions defined <a href="#outside-and-inside"
793 title=outside-inside>outside the element. </a>
795 <p>Setting the ‘<a href="#wrap-through"><code
796 class=property>wrap-through</code></a>’ property to ‘<code
797 class=property>none</code>’ prevents an element from inheriting its
798 parent <a href="#wrapping-context">wrapping context</a>. In other words,
799 exclusions defined ‘<code class=property>outside</code>’ the element,
800 have not effect on the element's children layout.
802 <div class=note> Exclusions defined by an element's descendants still
803 contribute to their containing block's <a
804 href="#wrapping-context">wrapping context</a>. If that containing block is
805 a child of an element with ‘<a href="#wrap-through"><code
806 class=property>wrap-through</code></a>’ computes to none, or the element
807 itself, then exclusion still have an effect on the children of that
808 containing block element.</div>
810 <h4 id=wrap-through-property><span class=secno>3.3.1. </span>The ‘<a
811 href="#wrap-through"><code class=property>wrap-through</code></a>’
812 Property</h4>
814 <table class=propdef>
815 <tbody>
816 <tr>
817 <th>Name:
819 <td><dfn id=wrap-through title="'wrap-through'">wrap-through</dfn>
821 <tr>
822 <th>Value:
824 <td><var>wrap</var> | <var>none</var>
826 <tr>
827 <th>Initial:
829 <td>wrap
831 <tr>
832 <th>Applies to:
834 <td>block-level elements
836 <tr>
837 <th>Inherited:
839 <td>no
841 <tr>
842 <th>Percentages:
844 <td>N/A
846 <tr>
847 <th>Media:
849 <td>visual
851 <tr>
852 <th>Computed value:
854 <td>as specified
855 </table>
857 <p>The values of this property have the following meanings:
859 <dl>
860 <dt><dfn id=wrap title="'wrap-through'!!'wrap'">wrap</dfn>
862 <dd> The element inherits its parent node's <a
863 href="#wrapping-context">wrapping context</a>. Its descendant inline
864 content wraps around exclusions defined <a href="#outside-and-inside"
865 title=outside-inside>outside</a> the element.
866 </dl>
868 <dl>
869 <dt><dfn id=none title="'wrap-through'!!'none'">none</dfn>
871 <dd> The element does not inherit its parent node's <a
872 href="#wrapping-context">wrapping context</a>. Its descendants are only
873 subject to exclusion shapes defined <a href="#outside-and-inside"
874 title=outside-inside>inside</a> the element.
875 </dl>
877 <div class=example>
878 <p> Using the ‘<a href="#wrap-through"><code
879 class=property>wrap-through</code></a>’ property to control the effect
880 of exclusions.
882 <pre><code class=html>
884 <style type="text/css">
885 #grid {
886 display: grid;
887 grid-columns: 25% 50% 25%;
888 grid-rows: 25% 25% 25% 25%;
889 }
891 #exclusion {
892 grid-row: 2;
893 grid-row-span: 2;
894 grid-column: 2;
895 wrap-flow: <see below>
896 }
898 #rowA, #rowB {
899 grid-row-span: 2;
900 grid-column: 1;
901 grid-column-span: 3;
902 }
904 #rowA {
905 grid-row: 1;
906 }
908 #rowB {
909 grid-row: 3;
910 }
911 </style>
913 <style type="text/css">
914 .exclusion {
915 wrap-flow: both;
916 position: absolute;
917 left: 20%;
918 top: 20%;
919 width: 50%;
920 height: 50%;
921 background-color: rgba(220, 230, 242, 0.5);
922 }
923 </style>
925 <div id="grid">
926 <div class=”exclusion”></div>
927 <div id="rowA" style=”wrap-through: wrap;”> Lorem ipsum dolor sit amet...</div>
928 <div id="rowB" style=”wrap-through: none;”> Lorem ipsum dolor sit amet...</div>
929 </div>
930 </code></pre>
931 <img alt="Example rendering of wrap-through: wrap | none"
932 class=singleImgExample src="images/exclusion_wrap_through.png"
933 style="max-width:40%"></div>
934 <!-- End section "wrap-through property" -->
935 <!-- removed as wrap-margin and wrap-padding changed to shape-margin and shape-padding
937 <h4 id="wrap-shorthand-property">The 'wrap' Shorthand Property</h4>
938 <table class="propdef">
939 <tr>
940 <th>Name:</th>
941 <td><dfn title="'wrap'">wrap</dfn></td>
942 </tr>
943 <tr>
944 <th>Value:</th>
945 <td><var><wrap-flow></var> || <var><wrap-margin></var> [ / <var><wrap-padding></var>]</td>
946 </tr>
947 <tr>
948 <th>Initial:</th>
949 <td>see individual properties</td>
950 </tr>
951 <tr>
952 <th>Applies to:</th>
953 <td>block-level elements</td>
954 </tr>
955 <tr>
956 <th>Inherited:</th>
957 <td>no</td>
958 </tr>
959 <tr>
960 <th>Percentages:</th>
961 <td>N/A</td>
962 </tr>
963 <tr>
964 <th>Media:</th>
965 <td>visual</td>
966 </tr>
967 <tr>
968 <th>Computed value:</th>
969 <td>see individual properties</td>
970 </tr>
971 </table>
972 <p>
973 The 'wrap' property is a shorthand property for setting the exclusions properties
974 at the same place in the style sheet.
975 </p>
976 -->
977 <!-- End section "wrap shorthand property" -->
978 <!-- End section "Propagation of Exclusions" -->
980 <h3 id=exclusions-order><span class=secno>3.4. </span>Exclusions order</h3>
982 <p> Exclusions follow the painting order (See <a href="#CSS21"
983 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> Appendix E). Exclusions are
984 applied in reverse to the document order in which they are defined. The
985 last exclusion appears on top of all other exclusion, thus it affects the
986 inline flow content of all other preceding exclusions or elements
987 descendant of the same containing block. The ‘<code
988 class=property>z-index</code>’ property can be used to change the
989 ordering of <a
990 href="http://www.w3.org/TR/CSS2/visuren.html#choose-position">positioned</a>
991 exclusion boxes (see <a href="#CSS21"
992 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>). Statically positioned
993 exclusions are not affected by the ‘<code
994 class=property>z-index</code>’ property and thus follow the painting
995 order.
997 <div class=issue-marker data-bug_id=16474 data-bug_status=NEW> <a
998 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16474">Issue-16474</a>
1000 <div class=issue-details>
1001 <p class=short-desc>Improve Example 3 about exclusion order
1002 </div>
1003 </div>
1005 <div class=example>
1006 <p>Ordering of exclusions.
1008 <pre><code class=html>
1009 <style type="text/css">
1010 .exclusion {
1011 wrap-flow: both;
1012 position: absolute;
1013 width: 50%;
1014 height: auto;
1015 }
1016 </style>
1018 <div class=”exclusion” style=”top: 0px; left: 0px;”>
1019 Lorem ipsum dolor sit amet...
1020 </div>
1021 <div id="orderedExclusion" class=”exclusion” style=”top: 25%; left: 25%;”>
1022 Lorem ipsum dolor sit amet...
1023 </div>
1024 <div class=”exclusion” style=”top: 50%; left: 50%;”>
1025 Lorem ipsum dolor sit amet...
1026 </div>
1027 </code></pre>
1029 <table class=example-table>
1030 <tbody>
1031 <tr>
1032 <td style="width:50%"><code class=html>#orderedExclusion{ z-index:
1033 auto; }</code>
1035 <td style="width:50%"><code class=html>#orderedExclusion{ z-index: 1;
1036 }</code>
1038 <tr>
1039 <td><img alt="Example rendering of default exclusion ordering."
1040 class=singleImgExample src="images/exclusion_ordering.png">
1042 <td><img alt="Example rendering of default exclusion ordering."
1043 class=singleImgExample src="images/exclusion_ordering_z_order.png">
1044 </table>
1045 </div>
1046 <!-- End section "Order of Exclusions" -->
1048 <div class="issue-marker wrapper">
1049 <div class=issue-marker data-bug_id=15183 data-bug_status=NEW> <a
1050 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15183">Issue-15183</a>
1052 <div class=issue-details>
1053 <p class=short-desc>Is the CSS exclusions processing model incorrect?
1054 </div>
1055 </div>
1056 </div>
1058 <div class=issue>
1059 <p>The current draft provides a model for exclusions without a
1060 collision-avoidance model. The existing exclusion model in CSS uses
1061 floats, which have both exclusion and collision-avoidance behavior.
1062 Concerns have been raised that allowing exclusions without collision
1063 avoidance could be harmful, particularly with absolutely-positioned
1064 elements. Three options should be considered:
1066 <p>
1068 <ol>
1069 <li>Allow exclusions in positioning schemes with no collision avoidance.
1071 <li>Disallow exclusions in positioning schemes with no collision
1072 avoidance.
1074 <li>Define collision-avoidance behavior for positioning schemes without
1075 it, and use this behavior by default with exclusions.
1076 </ol>
1078 <ol></ol>
1079 </div>
1081 <h3 id=exclusions-processing-model><span class=secno>3.5. </span>Processing
1082 model</h3>
1084 <h4 id=exclusions-processing-model-description><span class=secno>3.5.1.
1085 </span>Description</h4>
1087 <p>Applying exclusions is a two-step process:
1089 <ul>
1090 <li><strong>Step 1</strong>: resolve exclusion boxes belonging to each <a
1091 href="#wrapping-context">wrapping context</a>
1093 <li><strong>Step 2</strong>: resolve <a href="#wrapping-context">wrapping
1094 context</a>s and lay out each containing block in turn:
1095 <ul>
1096 <li><strong>Step 2-A</strong>: resolve the position and size of
1097 exclusion boxes
1099 <li><strong>Step 2-B</strong>: lay out containing block, wrapping around
1100 <a href="#exclusion-area">exclusion areas</a>
1101 </ul>
1102 </ul>
1104 <h4
1105 id=step-1-resolve-exclusion-boxes-belonging-to-each-wrapping-context><span
1106 class=secno>3.5.2. </span>Step 1: resolve exclusion boxes belonging to
1107 each <a href="#wrapping-context">wrapping context</a></h4>
1109 <p>In this step, the user agent determines which <a
1110 href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">containing
1111 block</a> each <a href="#exclusion-area">exclusion area</a> belongs to.
1112 This is a simple step, based on the definition of containing blocks and
1113 elements with a computed value for ‘<a href="#wrap-flow"><code
1114 class=property>wrap-flow</code></a>’ that is not <code
1115 class=css>auto</code>.
1117 <h4 id=step-2-resolve-wrapping-contexts-layout-containing-blocks><span
1118 class=secno>3.5.3. </span>Step 2: resolve wrapping contexts and lay out
1119 containing blocks</h4>
1121 <p>In this step, starting from the top of the <a
1122 href="http://www.w3.org/TR/CSS2/visuren.html#z-index">rendering tree</a>
1123 (see <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>), the
1124 the agent processes each containing block in two sub-steps.
1126 <h4 id=step-2-A-resolve-exclusions-position-and-size><span
1127 class=secno>3.5.4. </span>Step 2-A: resolve the position and size of
1128 exclusion boxes</h4>
1130 <p>Resolving the position and size of <a href="#exclusion-box">exclusion
1131 boxes</a> in the <a href="#wrapping-context">wrapping context</a> may or
1132 may not require a layout. For example, if an <a
1133 href="#exclusion-box">exclusion box</a> is absolutely positioned and
1134 sized, a layout may not be needed to resolve its position and size. In
1135 other situations, laying out the containing block's content is required.
1137 <p>When a layout is required, it is carried out without applying any <a
1138 href="#exclusion-area">exclusion area</a>. In other words, the containing
1139 block is laid out without a <a href="#wrapping-context">wrapping
1140 context</a>.
1142 <p>Step 2-A yields a position and size for all <a
1143 href="#exclusion-box">exclusion boxes</a> in the <a
1144 href="#wrapping-context">wrapping context</a>. Each exclusion box is
1145 processed in turn, starting from the top-most, and each <a
1146 href="#exclusion-area">exclusion area</a> is computed and contributed to
1147 the <a
1148 href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">containing
1149 block's</a> <a href="#wrapping-context">wrapping context</a>.
1151 <p>Scrolling is ignored in this step when resolving the position and size
1152 of ‘<code class=css>position:fixed</code>’ <a
1153 href="#exclusion-box">exclusion boxes</a>.
1155 <p>Once the <a
1156 href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">containing
1157 block's</a> <a href="#wrapping-context">wrapping context</a> is computed,
1158 all <a href="#exclusion-box">exclusion boxes</a> in that <a
1159 href="#wrapping-context">wrapping context</a> are removed from the normal
1160 flow.
1162 <h4 id=step-2-B-layout-containing-block-applying-wrapping><span
1163 class=secno>3.5.5. </span>Step 2-B: lay out containing block applying
1164 wrapping</h4>
1166 <p>Finally, the content of the containing block is laid out, with the
1167 inline content wrapping around the <span>wrapping content</span>‘<code
1168 class=css>s <a href="#exclusion-area">exclusion areas</a> (which may be
1169 different from the <a href="#exclusion-box">exclusion box</a> because of
1170 the </code>’shape-outside' property).
1172 <p>When the containing block itself is an <a
1173 href="#exclusion-box">exclusion box</a>, then rules on <a
1174 href="#exclusions-order">exclusions order</a> define which exclusions
1175 affect the inline and descendant content of the box.
1177 <h4 id=exclusions-processing-model-example><span class=secno>3.5.6.
1178 </span>Example</h4>
1180 <p>This section illustrates the exclusions processing model with an
1181 example. It is meant to be simple. Yet, it contains enough complexity to
1182 address the issues of layout dependencies and re-layout.
1184 <p>The code snippet in the following example has two exclusions affecting
1185 the document's inline content.
1187 <div class=example>
1188 <pre class=html><html>
1189 <style>
1190 #d1 {
1191 position:relative;
1192 height: auto;
1193 color: #46A4E9;
1194 border: 1px solid gray;
1195 }
1197 #e1 {
1198 wrap-flow: both;
1199 position: absolute;
1200 left: 50%;
1201 top: 50%;
1202 width: 40%;
1203 height: 40%;
1204 border: 1px solid red;
1205 margin-left: -20%;
1206 margin-top: -20%;
1207 }
1209 #d2 {
1210 position: static;
1211 width: 100%;
1212 height: auto;
1213 color: #808080;
1214 }
1216 #e2 {
1217 wrap-flow: both;
1218 position: absolute;
1219 right: 5ex;
1220 top: 1em;
1221 width: 12ex;
1222 height: 10em;
1223 border: 1px solid lime;
1224 }
1225 </style>
1226 <body>
1227 <div id="d1">
1228 Lorem ipsusm ...
1229 <p id="e1"></p>
1230 </div>
1231 <div id="d2">
1232 Lorem ipsusm ...
1233 <p id="e2" ></p>
1234 </div>
1235 </body>
1236 </html></pre>
1237 </div>
1239 <p>The following figures illustrate:
1241 <ul>
1242 <li>the document's DOM tree
1244 <li>the layout tree of generated block boxes
1245 </ul>
1247 <div class=figure> <img alt="DOM tree nodes"
1248 src="images/processing-model-example-dom.svg" width=200>
1249 <p class=caption>DOM tree
1250 </div>
1252 <div class=figure> <img alt="Layout tree boxes"
1253 src="images/processing-model-example-layout-tree.svg" width=350>
1254 <p class=caption>Layout tree of generated block boxes
1255 </div>
1257 <h5 id=step-1-resolve-exclusion-boxes-belonging><span class=secno>3.5.6.1.
1258 </span>Step 1: resolve exclusion boxes belonging to each <a
1259 href="#wrapping-context">wrapping context</a></h5>
1261 <p>The figures illustrate how the boxes corresponding to the element
1262 sometimes have a different containment hierarchy in the layout tree than
1263 in the DOM tree. For example, the box generated by <code
1264 class=idl>e1</code> is positioned in its containing block's box, which is
1265 the <code class=idl>d1-box</code>, because <code class=idl>e1</code> is
1266 absolutely positioned and <code class=idl>d1</code> is relatively
1267 positioned. However, while <code class=idl>e2</code> is also absolutely
1268 positioned, its containing block is the initial containing block (ICB).
1269 See the section 10.1 of the CSS 2.1 specification (<a href="#CSS21"
1270 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>) for details.
1272 <p>As a result of the computation of containing blocks for the tree, the
1273 boxes belonging to the <a href="#wrapping-context">wrapping context</a>s
1274 of all the elements can be determined:
1276 <ul>
1277 <li>The <a href="#wrapping-context">wrapping context</a> for the html
1278 element contains the <code class=idl>e2</code> box: WC-1 (Wrapping
1279 Context 1)
1281 <li>The <a href="#wrapping-context">wrapping context</a> for the body
1282 element inherits the html element's <a href="#wrapping-context">wrapping
1283 context</a>: WC-1
1285 <li>The <a href="#wrapping-context">wrapping context</a> for <code
1286 class=idl>d1</code> inherits the body element's <a
1287 href="#wrapping-context">wrapping context</a> and adds the <code
1288 class=idl>e1-box</code> to it. So the wrapping context is made of both
1289 the <code class=idl>e1-box</code> and the <code class=idl>e2-box</code>:
1290 WC-2
1292 <li>The <a href="#wrapping-context">wrapping context</a> for <code
1293 class=idl>d2</code> inherits the body element's <a
1294 href="#wrapping-context">wrapping context</a>: WC-1
1295 </ul>
1297 <h5 id=step-2-resolve-wrapping-contexts-and-lay><span class=secno>3.5.6.2.
1298 </span>Step 2: resolve wrapping contexts and lay out containing blocks</h5>
1300 <p>In this step, each containing block is processed in turn. For each
1301 containing block, we (conceptually) go through two phases:
1303 <ol>
1304 <li>resolve the <a href="#wrapping-context">wrapping context</a>: resolve
1305 the position and size of its exclusions
1307 <li>lay out the containing block
1308 </ol>
1310 <p>In our example, this breaks down to:
1312 <ol>
1313 <li>resolve the position and size of the exclusions belonging to WC-1:
1314 RWC-1 (Resolved Wrapping Context 1).
1316 <li>lay out the initial containing block (i.e., lay out its content):
1317 <ol>
1318 <li>resolve the html element's <a href="#wrapping-context">wrapping
1319 context</a>: RWC-1
1321 <li>lay out the html element:
1322 <ol>
1323 <li>resolve the body element's <a href="#wrapping-context">wrapping
1324 context</a>: RWC-1
1326 <li>lay out the body element:
1327 <ol>
1328 <li>resolve the <code class=idl>d1</code> element's <a
1329 href="#wrapping-context">wrapping context</a>: RWC-2
1331 <li>lay out the <code class=idl>d1</code> element
1333 <li>resolve the <code class=idl>d2</code> element's <a
1334 href="#wrapping-context">wrapping context</a>: RWC-1
1336 <li>lay out the <code class=idl>d2</code> element
1337 </ol>
1338 </ol>
1339 </ol>
1340 </ol>
1342 <h6 id=resolving-rwc-1><span class=secno>3.5.6.2.1. </span>Resolving RWC-1</h6>
1344 <p>The top-most <a href="#wrapping-context">wrapping context</a> in the
1345 layout tree contains the <code class=idl>e2</code> exclusion. Its position
1346 and size needs to be resolved. In general, computing an exclusion's
1347 position and size may or may not require laying out other content. In our
1348 example, no content needs to be laid out to resolve the <code
1349 class=idl>e2</code> exclusion's position because it is absolutely
1350 positioned and its size can be resolved without layout either. At this
1351 point, RWC-1 is resolved and can be used when laying inline content out.
1353 <h6 id=resolving-rwc-2><span class=secno>3.5.6.2.2. </span>Resolving RWC-2</h6>
1355 <p>The process is similar: the position of the <code class=idl>e1</code>
1356 exclusion needs to be resolved. Again, resolving the exclusion's position
1357 and size may require processing the containing block (d1 here). It is the
1358 case here because the size and position of <code class=idl>e1</code>
1359 depend on resolving the percentage lengths. The percentages are relative
1360 to the size of <code class=idl>d1</code>‘<code class=css>s box. As a
1361 result, in order to resolve a size for <code
1362 class=idl>d1</code></code>’s box, a first layout of <code
1363 class=idl>d1</code> is done without any <a
1364 href="#wrapping-context">wrapping context</a> (i.e., no exclusions
1365 applied). The layout yields a position and size for <code
1366 class=idl>e1</code>‘<code class=css>s box. </code>
1368 <p>At this point, RWC-2 is resolved because the position and size of both
1369 e1 and e2 are resolved.
1371 <p class=note>The important aspect of the above processing example is that
1372 once an element’s <a href="#wrapping-context">wrapping context</a> is
1373 resolved (by resolving its exclusions' position and size), the position
1374 and size of the exclusions are not re-processed if the element's size
1375 changes between the layout that may be done without considering any <a
1376 href="#wrapping-context">wrapping context</a> (as for RWC-2) and the
1377 layout done with the resolved <a href="#wrapping-context">wrapping
1378 context</a>. This is what breaks the possible circular dependency between
1379 the resolution of <a href="#wrapping-context">wrapping context</a>s and
1380 the layout of containing blocks.
1382 <h3 id=floats-and-exclusions><span class=secno>3.6. </span>Floats and
1383 exclusions</h3>
1385 <h4 id=floats-and-exclusions-similarities><span class=secno>3.6.1.
1386 </span>Similarities</h4>
1388 <p>There are similarities between floats and exclusions in that inline
1389 content wraps around floats and also wraps around <a
1390 href="#exclusion-area">exclusion areas</a>. However, there are very
1391 significant differences.
1393 <h4 id=floats-and-exclusions-differences><span class=secno>3.6.2.
1394 </span>Differences</h4>
1396 <ul>
1397 <li><strong>scope</strong>. While floats apply to content that follows in
1398 the document, exclusions apply to content in their containing block.
1400 <li><strong>positioning</strong>. Floats are part of the inline flow and
1401 ‘<code class=property>float</code>’ on the line box. Authors can
1402 control how the floats move on the line box, to the right or to the left.
1403 By contrast, exclusions can be positioned using any positioning scheme
1404 such as grid layout (<a href="#CSS3-GRID-LAYOUT"
1405 rel=biblioentry>[CSS3-GRID-LAYOUT]<!--{{CSS3-GRID-LAYOUT}}--></a>),
1406 flexible box (<a href="#CSS3-FLEXBOX"
1407 rel=biblioentry>[CSS3-FLEXBOX]<!--{{CSS3-FLEXBOX}}--></a>) or any other
1408 CSS positioning scheme.
1410 <li><strong>separation of concerns</strong>. Making an element a float
1411 determines both its positioning scheme and its effect on inline content.
1412 Making an element an exclusion only determines its impact on inline
1413 content and does not impose constraints on its positioning method.
1414 </ul>
1416 <h4 id=floats-and-exclusions-interoperability><span class=secno>3.6.3.
1417 </span>Interoperability</h4>
1419 <h5 id=effect-of-floats-on-exclusions><span class=secno>3.6.3.1.
1420 </span>Effect of floats on exclusions</h5>
1422 <p>Floats have an effect on the positioning of exclusions and the layout of
1423 their inline content. For example, if an exclusion is an inline-box which
1424 happens to be on the same line as a float, its' position, as computed in
1425 <a href="#step-2-A-resolve-exclusions-position-and-size">Step 2-A</a> will
1426 be impacted by the float, as is any other inline content.
1428 <h5 id=effect-of-exclusions-on-floats><span class=secno>3.6.3.2.
1429 </span>Effect of exclusions on floats</h5>
1431 <p>Exclusions have an effect on the positioning of floats as they have an
1432 effect on inline content. Therefore, in <a
1433 href="#step-2-B-layout-containing-block-applying-wrapping">Step 2-B</a>,
1434 floats will avoid <a href="#exclusion-area">exclusion areas</a>.</p>
1435 <!-- End section "Exclusions" -->
1437 <h2 id=shapes><span class=secno>4. </span>Shapes</h2>
1439 <div class="issue-marker wrapper">
1440 <div class=issue-marker data-bug_id=15091 data-bug_status=NEW> <a
1441 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15091">Issue-15091</a><br>
1443 <div class=issue-details>
1444 <p class=short-desc>Simplify the syntax for shapes
1445 </div>
1446 </div>
1448 <div class=issue-marker data-bug_id=16716 data-bug_status=NEW> <a
1449 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16716">Issue-16716</a>
1451 <div class=issue-details>
1452 <p class=short-desc>Handling visible content as a shape for Exclusions
1453 </div>
1454 </div>
1455 </div>
1457 <p> Shapes define arbitrary geometric contours around which or into which
1458 inline flow content flows. There are two different types of shapes –
1459 ‘<code class=property>outside</code>’ and ‘<code
1460 class=property>inside</code>’. The outside shape defines the <a
1461 href="#exclusion-area">exclusion area</a> for an <a
1462 href="#exclusion-element">exclusion element</a> or the <a
1463 href="#float-area">float area</a> for a float. The inside shape defines an
1464 element's <span>content shape</span> and the element's inline content will
1465 flow within that shape.
1467 <p class=note>It is important to note that while outside shapes only apply
1468 to <span>exclusions</span> and floats, inside shapes apply to all
1469 block-level elements.
1471 <h3 id=relation-to-box-model-and-float-behavior><span class=secno>4.1.
1472 </span>Relation to the box model and float behavior</h3>
1474 <p> While the boundaries used for wrapping inline flow content outside and
1475 inside an element can be defined using shapes, the actual box model does
1476 not change. If the element has specified margins, borders or paddings they
1477 will be computed and rendered according to the <a href="#CSS3BOX"
1478 rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a> module.
1480 <p> However, floats are an exception. If a float has an outside shape, its
1481 positioning is resolved as <a
1482 href="http://www.w3.org/TR/CSS2/visuren.html#float-position">defined</a>
1483 in <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> but using
1484 the outside shape's bounding box is used in lieu of the float's margin
1485 box.
1487 <div class=example>
1488 <p>CSS ‘<a href="#shape-outside"><code
1489 class=property>shape-outside</code></a>’ and CSS box model relation:
1490 the red box illustrates the exclusion element's content box, which is
1491 unmodified and subject to normal CSS positioning (here absolute
1492 positioning).
1494 <pre><code class=html>
1495 <style type="text/css">
1496 .exclusion {
1497 wrap-flow: both;
1498 position: absolute;
1499 top: 25%;
1500 left: 25%;
1501 width: 50%;
1502 height: 50%;
1503 shape-outside: circle(50%, 50%, 50%);
1504 border: 1px solid red;
1505 }
1506 </style>
1508 <div style=”position: relative;”>
1509 <div class=”exclusion”></div>
1510 Lorem ipsum dolor sit amet...
1511 </div>
1512 </code></pre>
1513 <img alt="Example rendering of circle shape and box model."
1514 class=singleImgExample src="images/shapes_CSS2.1_MBP.png"
1515 style="max-width:40%"></div>
1517 <div class=example>
1518 <p>In the following example the left and right floating <code
1519 class=html>div</code> elements specify a triangular shape using the ‘<a
1520 href="#shape-outside"><code class=property>shape-outside</code></a>’
1521 property.
1523 <pre><code class=html>
1524 <div style="text-align:center;">
1525 <div id="float-left"></div>
1526 <div id="float-right"></div>
1527 <div>
1528 Sometimes a web page's text content appears to be
1529 funneling your attention towards a spot on the page
1530 to drive you to follow a particular link. Sometimes
1531 you don't notice.
1532 </div>
1533 </div>
1535 <style type="text/css">
1536 #float-left {
1537 shape-outside: polygon(0,0 100%,100% 0,100%);
1538 float: left;
1539 width: 40%;
1540 height: 12ex;
1541 }
1543 #float-right {
1544 shape-outside: polygon(100%,0 100%,100% 0,100%);
1545 float: right;
1546 width: 40%;
1547 height: 12ex;
1548 }
1549 </style>
1550 </div></code></pre>
1551 <img alt="Using the shape-outside property with a float"
1552 class=singleImgExample src="images/float-shape-outside.png"></div>
1554 <h3 id=basic-shapes-from-svg-syntax><span class=secno>4.2. </span>Basic
1555 Shapes</h3>
1557 <p> Shapes can be specified using syntax similar to SVG's <a
1558 href="http://www.w3.org/TR/SVG/shapes.html">basic shapes</a>. The
1559 definitions use <code><a
1560 href="http://www.w3.org/TR/css3-values/#lengths"><length></a></code>
1561 type and the <code><a href=""><percentage></a></code> types (see <a
1562 href="#CSS3VAL" rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>).
1563 Percentages are resolved from the computed value of the <a
1564 href="http://www.w3.org/TR/css3-ui/#box-sizing">‘<code
1565 class=property>box-sizing</code>’</a> property <a href="#CSS3UI"
1566 rel=biblioentry>[CSS3UI]<!--{{!CSS3UI}}--></a> on the element to which the
1567 property applies. For the radius <code>r</code> of the <a
1568 href="#circle"><code>circle</code></a> shape, a percentage value is
1569 resolved as <a
1570 href="http://www.w3.org/TR/SVG/coords.html#Units">specified</a> in the SVG
1571 recommendation (see <a href="#SVG11"
1572 rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>). Path styling like stroking
1573 is not considered part of the specified shape.
1575 <h4 id=supported-basic-shapes><span class=secno>4.2.1. </span>Supported
1576 Shapes</h4>
1578 <p> The following basic shapes are supported.
1580 <dl>
1581 <dt><dfn
1582 id=rectangle>rectangle</dfn>([<length>|<percentage>]{4} [
1583 curve [<length>|<percentage>]{1,2} ]? )
1585 <dd>
1586 <ul>
1587 <li> The four values represent <strong>x, y, width</strong> and
1588 <strong>height</strong>. They define the bounding box of the rectangle.
1589 Negative values for width and height are invalid.
1591 <li> The two ‘<code class=property>curve</code>’ values represent
1592 <strong> rx</strong> and <strong>ry</strong>. For rounded rectangles
1593 they define the x-axis radius and y-axis radius of the ellipse used to
1594 round off the corners of the rectangle. Negative values for rx and ry
1595 are invalid.
1596 </ul>
1598 <dt><dfn
1599 id=inset-rectangle>inset-rectangle</dfn>([<length>|<percentage>]{4}
1600 [ curve [<length>|<percentage>]{1,2} ]? )
1602 <dd>
1603 <ul>
1604 <li> The four values represent the <strong>top, right, bottom</strong>
1605 and <strong>left</strong> insets that define the bounding box of the
1606 inset rectangle. Negative values for any of these insets are invalid.
1608 <li> The two ‘<code class=property>curve</code>’ values represent
1609 <strong> rx</strong> and <strong>ry</strong>. For rounded inset
1610 rectangles they define the x-axis radius and y-axis radius of the
1611 ellipse used to round off the corners of the inset rectangle. Negative
1612 values for rx and ry are invalid.
1613 </ul>
1615 <dt><dfn id=circle>circle</dfn>([<length>|<percentage>]{3})
1617 <dd>
1618 <ul>
1619 <li> The three values values represent <strong>cx</strong>,
1620 <strong>cy</strong>, and <strong>r</strong>. They define the x-axis and
1621 y-axis coordinates of the center of the circle and the radius of the
1622 circle. A negative value for r is invalid.
1623 </ul>
1625 <dt><dfn id=ellipse>ellipse</dfn>([<length>|<percentage>]{4})
1627 <dd>
1628 <ul>
1629 <li> The four values represent <strong>cx</strong>, <strong>cy</strong>,
1630 <strong>rx</strong>, and <strong>ry</strong>. They define the x-axis
1631 and y-axis coordinates of the center of the ellipse and the x-axis and
1632 y-axis radius of the ellipse. Negative values for rx and ry are
1633 invalid.
1634 </ul>
1636 <dt><dfn id=polygon>polygon</dfn>([<fill-rule>,]?
1637 [<length>|<percentage>]{2}#)
1639 <dd>
1640 <ul>
1641 <li><strong>fill-rule</strong> - The filling rule used to determine the
1642 interior of the polygon. See <a
1643 href="http://www.w3.org/TR/SVG/painting.html#FillRuleProperty">fill-rule</a>
1644 property in SVG for details. Possible values are nonzero or evenodd.
1645 Default value when omitted is nonzero.
1647 <li> The two length values represent <strong>xi</strong> and
1648 <strong>yi</strong> - the <strong>x</strong> and <strong>y</strong>
1649 axis coordinates of the i-th vertex of the polygon.
1650 </ul>
1652 <p>The UA will close a polygon by connecting the last vertex with the
1653 first vertex of the list.</p>
1654 <br>
1655 </dl>
1657 <h4 id=referencing-svg-shapes><span class=secno>4.2.2. </span>Referencing
1658 SVG shapes</h4>
1660 <p>An SVG shape can be referenced using the <code>url()</code> syntax. The
1661 shape can be any of the <a href="http://www.w3.org/TR/SVG/shapes.html">SVG
1662 basic shapes</a> or a <a href="http://www.w3.org/TR/SVG/paths.html">path
1663 element</a>.
1665 <div class=example>
1666 <div style="float:right"> <img alt="results of referencing SVG shapes"
1667 src="images/svg-shape-reference.png"></div>
1668 <code class=html></code>
1669 <pre>
1670 <style>
1671 div {
1672 height: 400px;
1673 width: 400px;
1674 }
1675 .in-a-circle {
1676 shape-inside: url(#circle_shape);
1677 }
1679 .in-a-path {
1680 shape-inside: url(#path-shape);
1681 }
1683 </style>
1685 <svg ...>
1686 <circle id="circle_shape" cx="50%" cy="50%" r="50%" />
1687 <path id="path-shape" d="M 100 100 L 300 100 L 200 300 z" />
1688 </svg>
1690 <div class="in-a-circle">...</div>
1691 <div class="in-a-path">...</div>
1692 </pre>
1693 </div>
1695 <p> When using the SVG syntax or referencing SVG elements to define shapes,
1696 the relevant box is determined by the computed value of the <a
1697 href="http://www.w3.org/TR/css3-ui/#box-sizing">‘<code
1698 class=property>box-sizing</code>’</a> property. All the lengths
1699 expressed in percentages are resolved from the relevant box. The
1700 coordinate system for the shape has its origin on the top-left corner of
1701 the relevant box with the x-axis running to the right and the y-axis
1702 running downwards. If the SVG element uses unitless coordinate values,
1703 they are equivalent to using ‘<code class=property>px</code>’ units.
1704 If the relevant box of the element is dependent on auto sizing (i.e., the
1705 element's ‘<code class=property>width</code>’ or ‘<code
1706 class=property>height</code>’ property is ‘<code
1707 class=property>auto</code>’), then the percentage values resolve to 0.
1709 <h4 id=basic-shape-interpolation><span class=secno>4.2.3.
1710 </span>Interpolation of Basic Shapes</h4>
1712 <p>For interpolating between one basic shape and a second, the rules
1713 described below are applied.
1715 <ul>
1716 <li>If both basic shapes are of the same type and not of type polygon:
1717 <ul>
1718 <li>Interpolate between each value.
1719 </ul>
1721 <li>If one basic shape is of type rectangle and the second of type circle
1722 or ellipse:
1723 <ul>
1724 <li>Replace the circle/ellipse with a temporary rectangle of equal
1725 dimension.
1727 <li>Set the values for rx and ry on the temporary rectangle to
1728 ‘50%’.
1730 <li>Interpolate between the two rectangles as above.
1731 </ul>
1733 <li>If one basic shape is an inset-rectangle and the second is of type
1734 rectangle, circle or ellipse:
1735 <ul>
1736 <li>Replace the inset-rectangle with a temporary rectangle of equal
1737 dimension.
1739 <li>Interpolate between the basic shapes as above.
1740 </ul>
1742 <li>If both basic shapes are of type polygon and if both polygons have the
1743 same number of vertices:
1744 <ul>
1745 <li>Interpolate between each value.
1746 </ul>
1748 <li>In all other cases:
1749 <ul>
1750 <li>No interpolation is specified.
1751 </ul>
1752 </ul>
1753 <!-- End section "Shapes from SVG Syntax -->
1755 <h3 id=shapes-from-image><span class=secno>4.3. </span>Shapes from Image</h3>
1757 <div class="issue-marker wrapper">
1758 <div class=issue-marker data-bug_id=15093 data-bug_status=NEW> <a
1759 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15093">Issue-15093</a><br>
1761 <div class=issue-details>
1762 <p class=short-desc>Do we need to provide properties to repeat exclusion
1763 images as for the background-image property?
1764 </div>
1765 </div>
1767 <div class=issue-marker data-bug_id=15090 data-bug_status=NEW> <a
1768 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15090">Issue-15090</a>
1770 <div class=issue-details>
1771 <p class=short-desc>Use the contour keyword in shape-outside property?
1772 </div>
1773 </div>
1775 <div class=issue-marker data-bug_id=16112 data-bug_status=NEW> <a
1776 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16112">Issue-16112</a>
1778 <div class=issue-details>
1779 <p class=short-desc>Address security concern with automatic shape
1780 extractions for images
1781 </div>
1782 </div>
1783 </div>
1785 <p> Another way of defining shapes is by specifying a source image whose
1786 alpha channel is used to compute the inside or outside shape. The shape is
1787 computed to be the path that encloses the area where the opacity of the
1788 specified image is greater than the ‘<a
1789 href="#shape-image-threshold"><code
1790 class=property>shape-image-threshold</code></a>’ value. If the ‘<a
1791 href="#shape-image-threshold"><code
1792 class=property>shape-image-threshold</code></a>’ is not specified, the
1793 initial value to be considered is 0.5.
1795 <p class=note> Note, images can define cavities and inline flow content
1796 should wrap inside them. In order to avoid that, another exclusion element
1797 can be overlaid.
1799 <p>For animated raster image formats (such as <a
1800 href="http://www.w3.org/Graphics/GIF/spec-gif89a.txt">GIF</a>), the first
1801 frame of the animation sequence is used. For <a
1802 href="http://www.w3.org/TR/2002/WD-SVG2Reqs-20020422/">SVG</a> images (<a
1803 href="#SVG11" rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>), the image is
1804 rendered without animations applied.
1806 <div class=example>
1807 <p>An image is floating to the left of a paragraph. The image shows the 3D
1808 version of the CSS logo over a transparent background. The logo has a
1809 shadow using an alpha-channel.
1811 <p>The image defines its <a href="#float-area">float area</a> through the
1812 ‘<a href="#shape-outside"><code
1813 class=property>shape-outside</code></a>’ property and specifies a value
1814 of 35 pixels for the ‘<a href="#shape-margin"><code
1815 class=property>shape-margin</code></a>’ property.
1817 <pre><code class=html>
1818 <p>
1819 <img id="CSSlogo" src="CSS-logo1s.png"/>
1820 blah blah blah blah...
1821 </p>
1823 <style>
1824 #CSSlogo {
1825 float: left;
1826 shape-outside: url("CSS-logo1s.png");
1827 shape-image-threshold: 0.1;
1828 shape-margin: 35px;
1829 }
1830 </style></code></pre>
1832 <p>The image needs two references to the image because this example uses
1833 the same image
1835 <ol>
1836 <li>to render it
1838 <li>as a shape defining the <a href="#float-area">float area</a> of the
1839 image
1840 </ol>
1842 <p>It is perfectly possible to display an image and use a different image
1843 for its float area.
1845 <p>In the figure below, the alpha-channel threshold is represented by the
1846 dotted line around the CSS logo and the 35px shape-margin is visible
1847 between that line and the edges of each individual line of the paragraph.
1849 <p>It's then possible to affect where the lines of the paragraph start in
1850 three ways:
1852 <ol>
1853 <li>Changing the value of the ‘<a href="#shape-margin"><code
1854 class=property>shape-margin</code></a>’ property
1856 <li>Changing the value of the ‘<a href="#shape-image-threshold"><code
1857 class=property>shape-image-threshold</code></a>’ property
1859 <li>Modifying the alpha channel in the image
1860 </ol>
1862 <div class=figure> <img
1863 alt="A float shape around an image using its alpha-channel with a 35 pixels shape-margin"
1864 src="images/shape-outside-image.png" width="70%">
1865 <p class=caption>A float shape around an image using its alpha-channel
1866 with a 35 pixels shape-margin
1867 </div>
1868 </div>
1869 <!-- End section "Shapes from image" -->
1871 <h3 id=declaring-shapes><span class=secno>4.4. </span>Declaring Shapes</h3>
1873 <p> Shapes are declared with the ‘<a href="#shape-outside"><code
1874 class=property>shape-outside</code></a>’ or ‘<a
1875 href="#shape-inside"><code class=property>shape-inside</code></a>’
1876 properties, with possible modifications from the ‘<a
1877 href="#shape-margin"><code class=property>shape-margin</code></a>’ and
1878 ‘<a href="#shape-padding"><code
1879 class=property>shape-padding</code></a>’ properties. The shape defined
1880 by the ‘<a href="#shape-outside"><code
1881 class=property>shape-outside</code></a>’ and ‘<a
1882 href="#shape-margin"><code class=property>shape-margin</code></a>’
1883 properties changes the geometry of an <a
1884 href="#exclusion-element">exclusion element</a>‘<code class=css>s <a
1885 href="#exclusion-area">exclusion area</a> or a float element</code>’s <a
1886 href="#float-area">float area</a>. If the element is not an <a
1887 href="#exclusion-element">exclusion element</a> (see the ‘<a
1888 href="#wrap-flow"><code class=property>wrap-flow</code></a>’ property)
1889 or a float, then the ‘<a href="#shape-outside"><code
1890 class=property>shape-outside</code></a>’ property has no effect.
1892 <p> The shape defined by the ‘<a href="#shape-inside"><code
1893 class=property>shape-inside</code></a>’ and ‘<a
1894 href="#shape-padding"><code class=property>shape-padding</code></a>’
1895 properties defines an <a href="#exclusion-area">exclusion area</a> that
1896 contributes to the element's <a href="#wrapping-context">wrapping
1897 context</a>. The ‘<a href="#shape-inside"><code
1898 class=property>shape-inside</code></a>’ property applies to all
1899 block-level elements.
1901 <h4 id=shape-outside-property><span class=secno>4.4.1. </span>The ‘<a
1902 href="#shape-outside"><code class=property>shape-outside</code></a>’
1903 Property</h4>
1905 <table class=propdef>
1906 <tbody>
1907 <tr>
1908 <th>Name:
1910 <td><dfn id=shape-outside title="'shape-outside'">shape-outside</dfn>
1912 <tr>
1913 <th>Value:
1915 <td><var>auto</var> | <var><basic-shape></var> |
1916 <var><uri></var>
1918 <tr>
1919 <th>Initial:
1921 <td>auto
1923 <tr>
1924 <th>Applies to:
1926 <td>exclusion elements and floats
1928 <tr>
1929 <th>Inherited:
1931 <td>no
1933 <tr>
1934 <th>Percentages:
1936 <td>N/A
1938 <tr>
1939 <th>Media:
1941 <td>visual
1943 <tr>
1944 <th>Computed value:
1946 <td>computed lengths for <basic-shape>, the absolute URI for
1947 <uri>, otherwise as specified
1948 </table>
1950 <p>The values of this property have the following meanings:
1952 <dl>
1953 <dt><dfn id=auto0 title="'shape-outside'!!'auto'">auto</dfn>
1955 <dd>The shape is computed based on the border box of the element for
1956 exclusions, or computed based on the margin box for floats.
1957 </dl>
1959 <dl>
1960 <dt><dfn id=ltbasic-shapegt
1961 title="'shape-outside'!!'<basic-shape>'"><basic-shape></dfn>
1963 <dd> The shape is computed based on the values of one of ‘<a
1964 href="#rectangle"><code class=property>rectangle</code></a>’, ‘<a
1965 href="#inset-rectangle"><code
1966 class=property>inset-rectangle</code></a>’, ‘<a href="#circle"><code
1967 class=property>circle</code></a>’, ‘<a href="#ellipse"><code
1968 class=property>ellipse</code></a>’ or ‘<a href="#polygon"><code
1969 class=property>polygon</code></a>’.
1970 </dl>
1972 <dl>
1973 <dt><dfn id=lturigt
1974 title="'shape-outside'!!'<uri>'"><uri></dfn>
1976 <dd> If the <uri> references an SVG shape element, that element
1977 defines the shape. Otherwise, if the <uri> references an image, the
1978 shape is extracted and computed based on the alpha channel of the
1979 specified image. If the <uri> does not reference an SVG shape
1980 element or an image, the effect is as if the value ‘<code
1981 class=property>auto</code>’ had been specified.
1982 </dl>
1984 <div class=figure> <img
1985 alt="arbitrary shapes for exclusions. Illustrates how content flows around shapes"
1986 src="images/shapes-exclusions.png" width="70%">
1987 <p class=caption>Arbitrary shapes for exclusions
1988 </div>
1990 <div>
1991 <p>The above figure shows how ‘<a href="#shape-outside"><code
1992 class=property>shape-outside</code></a>’ shapes impact the <a
1993 href="#exclusion-area">exclusion areas</a>. The red box represents an
1994 element's content box and ‘<code class=property>A</code>’, ‘<code
1995 class=property>B</code>’, ‘<code class=property>C</code>’ and
1996 ‘<code class=property>C</code>’ represent exclusions with a complex
1997 shape and their ‘<a href="#wrap-flow"><code
1998 class=property>wrap-flow</code></a>’ property computes to ‘<code
1999 class=property>both</code>’, ‘<code class=property>start</code>’,
2000 ‘<code class=property>end</code>’ and ‘<code
2001 class=property>clear</code>’, respectively.
2003 <p>As illustrated in the picture, when an exclusion allows wrapping on all
2004 sides, text can flow inside ‘<code class=property>holes</code>’ in
2005 the exclusion (as for exclusion ‘<code class=property>A</code>’).
2006 Otherwise, the exclusion clears the area on the side(s) defined by ‘<a
2007 href="#wrap-flow"><code class=property>wrap-flow</code></a>’, as
2008 illustrated for ‘<code class=property>B</code>’, ‘<code
2009 class=property>C</code>’ and ‘<code class=property>D</code>’ above.
2010 </div>
2011 <!-- End section "The shape-outside Property" -->
2013 <h4 id=shape-inside-property><span class=secno>4.4.2. </span>The ‘<a
2014 href="#shape-inside"><code class=property>shape-inside</code></a>’
2015 Property</h4>
2017 <p> The ‘<a href="#shape-inside"><code
2018 class=property>shape-inside</code></a>’ property adds one or more
2019 exclusion areas to the element's wrapping context. This modifies the
2020 normal rectangular shape of the content area to a possibly non-rectangular
2021 wrapping area. The exclusion areas are defined by subtracting the shape
2022 from the element's content area. Any part of the shape outside the
2023 element's content area has no effect.
2025 <table class=propdef>
2026 <tbody>
2027 <tr>
2028 <th>Name:
2030 <td><dfn id=shape-inside title="'shape-inside'">shape-inside</dfn>
2032 <tr>
2033 <th>Value:
2035 <td><var>outside-shape</var> | <var>auto</var> |
2036 <var><basic-shape></var> | <var><uri></var>
2038 <tr>
2039 <th>Initial:
2041 <td>outside-shape
2043 <tr>
2044 <th>Applies to:
2046 <td>block-level elements
2048 <tr>
2049 <th>Inherited:
2051 <td>no
2053 <tr>
2054 <th>Percentages:
2056 <td>N/A
2058 <tr>
2059 <th>Media:
2061 <td>visual
2063 <tr>
2064 <th>Computed value:
2066 <td>computed lengths for <basic-shape>, the absolute URI for
2067 <uri>, otherwise as specified
2068 </table>
2070 <div class="issue-marker wrapper">
2071 <div class=issue-marker data-bug_id=16448 data-bug_status=ASSIGNED> <a
2072 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16448">Issue-16448</a>
2074 <div class=issue-details>
2075 <p class=short-desc>Should we revisit the decision to not allow SVG path
2076 syntax in the shape-inside, shape-outside properties
2077 </div>
2078 </div>
2079 </div>
2081 <p>The values of this property have the following meanings:
2083 <dl>
2084 <dt><dfn id=outside-shape
2085 title="'shape-inside'!!'outside-shape'">outside-shape</dfn>
2087 <dd> The shape is computed based on the computed value of the ‘<a
2088 href="#shape-outside"><code class=property>shape-outside</code></a>’
2089 property. E.g., when shape-outside computes to ‘<code
2090 class=property>auto</code>’, use the meaning of ‘<code
2091 class=property>auto</code>’ below to compute the shape.
2092 </dl>
2094 <dl>
2095 <dt><dfn id=auto1 title="'shape-inside'!!'auto'">auto</dfn>
2097 <dd> The shape is computed based on the content box of the element.
2098 </dl>
2100 <dl>
2101 <dt><dfn id=ltbasic-shapegt0
2102 title="'shape-inside'!!'<basic-shape>'"><basic-shape></dfn>
2104 <dd> The shape is computed based on the values of one of ‘<a
2105 href="#rectangle"><code class=property>rectangle</code></a>’, ‘<a
2106 href="#inset-rectangle"><code
2107 class=property>inset-rectangle</code></a>’, ‘<a href="#circle"><code
2108 class=property>circle</code></a>’, ‘<a href="#ellipse"><code
2109 class=property>ellipse</code></a>’ or ‘<a href="#polygon"><code
2110 class=property>polygon</code></a>’.
2111 </dl>
2113 <dl>
2114 <dt><dfn id=lturigt0
2115 title="'shape-inside'!!'<uri>'"><uri></dfn>
2117 <dd> If the <uri> references an SVG shape element, that element
2118 defines the shape. Otherwise, if the <uri> references an image, the
2119 shape is extracted and computed based on the alpha channel of the
2120 specified image. If the <uri> does not reference an SVG shape
2121 element or an image, the effect is as if the value ‘<code
2122 class=property>auto</code>’ had been specified.
2123 </dl>
2125 <p>The ‘<a href="#shape-inside"><code
2126 class=property>shape-inside</code></a>’ property applies to floats.
2128 <p>The ‘<a href="#shape-inside"><code
2129 class=property>shape-inside</code></a>’ property may not apply on some
2130 elements such as elements with a computed ‘<code
2131 class=property>display</code>’ value of ‘<code
2132 class=property>table</code>’.
2134 <div class=figure> <img
2135 alt="Content flowing with and without a shape-inside"
2136 src="images/shape-inside-content.png">
2137 <p class=caption>Effect of shape-inside on inline content.
2138 </div>
2140 <p>Overflow content avoids the exclusion area(s) added by ‘<a
2141 href="#shape-inside"><code class=property>shape-inside</code></a>’ and
2142 ‘<a href="#shape-padding"><code
2143 class=property>shape-padding</code></a>’ (as well as any other exclusion
2144 areas in the element's wrapping context).
2146 <div class=figure> <img alt="Overflow interacting with rounded rect"
2147 src="images/rounded-rect-overflow.png"
2148 style="display:inline-block;vertical-align:top"> <img
2149 alt="Overflow interacting with ellipse" src="images/ellipse-overflow.png"
2150 style="display:inline-block;vertical-align:top">
2151 <p class=caption>Overflow interacting with exclusion areas defined by
2152 ‘<a href="#shape-inside"><code
2153 class=property>shape-inside</code></a>’ and ‘<a
2154 href="#shape-padding"><code class=property>shape-padding</code></a>’.
2155 </div>
2156 <!-- End section "The shape-inside property" -->
2158 <h4 id=shape-image-threshold-property><span class=secno>4.4.3. </span>The
2159 ‘<a href="#shape-image-threshold"><code
2160 class=property>shape-image-threshold</code></a>’ Property</h4>
2162 <p> The ‘<a href="#shape-image-threshold"><code
2163 class=property>shape-image-threshold</code></a>’ defines the alpha
2164 channel threshold used to extract the shape using an image. A value of 0.5
2165 means that all the pixels that are more than 50% transparent define the
2166 path of the exclusion shape. The ‘<a href="#shape-image-threshold"><code
2167 class=property>shape-image-threshold</code></a>’ applies to both ‘<a
2168 href="#shape-outside"><code class=property>shape-outside</code></a>’ and
2169 ‘<a href="#shape-inside"><code
2170 class=property>shape-inside</code></a>’.
2172 <p class=note> The specified value of ‘<a
2173 href="#shape-image-threshold"><code
2174 class=property>shape-image-threshold</code></a>’ is applied to both
2175 images used for ‘<a href="#shape-outside"><code
2176 class=property>shape-outside</code></a>’ and ‘<a
2177 href="#shape-inside"><code class=property>shape-inside</code></a>’.
2179 <table class=propdef>
2180 <tbody>
2181 <tr>
2182 <th>Name:
2184 <td><dfn id=shape-image-threshold
2185 title="'shape-image-threshold'">shape-image-threshold</dfn>
2187 <tr>
2188 <th>Value:
2190 <td><var><alphavalue></var>
2192 <tr>
2193 <th>Initial:
2195 <td>0.5
2197 <tr>
2198 <th>Applies to:
2200 <td>block-level elements
2202 <tr>
2203 <th>Inherited:
2205 <td>no
2207 <tr>
2208 <th>Percentages:
2210 <td>alpha channel of the image specified by <uri>
2212 <tr>
2213 <th>Media:
2215 <td>visual
2217 <tr>
2218 <th>Computed value:
2220 <td>The same as the specified value after clipping the
2221 <alphavalue> to the range [0.0,1.0].
2222 </table>
2224 <p>The values of this property have the following meanings:
2226 <dl>
2227 <dt><dfn id=ltalphavaluegt
2228 title="'shape-image-threshold'!!'<alphavalue>'"><alphavalue></dfn>
2230 <dd> A <number> value used to set the threshold used for extracting
2231 a shape from an image. Any values outside the range 0.0 (fully
2232 transparent) to 1.0 (fully opaque) will be clamped to this range.
2233 </dl>
2234 <!-- End section "The shape-image-threshold property" -->
2235 <!--
2236 <h4 id="shape-shorthand-property">The 'shape' Shorthand Property</h4>
2238 <table class="propdef">
2239 <tr>
2240 <th>Name:</th>
2241 <td><dfn title="'shape'">shape</dfn></td>
2242 </tr>
2243 <tr>
2244 <th>Value:</th>
2245 <td><var><shape-outside></var> [ / <var><shape-inside></var> ] || <var><shape-image-threshold></var></td>
2246 </tr>
2247 <tr>
2248 <th>Initial:</th>
2249 <td>see individual properties</td>
2250 </tr>
2251 <tr>
2252 <th>Applies to:</th>
2253 <td>block-level elements</td>
2254 </tr>
2255 <tr>
2256 <th>Inherited:</th>
2257 <td>no</td>
2258 </tr>
2259 <tr>
2260 <th>Percentages:</th>
2261 <td>N/A</td>
2262 </tr>
2263 <tr>
2264 <th>Media:</th>
2265 <td>visual</td>
2266 </tr>
2267 <tr>
2268 <th>Computed value:</th>
2269 <td>see individual properties</td>
2270 </tr>
2271 </table>
2272 <p>
2273 The 'shape' property is a shorthand property for setting the individual shape properties
2274 at the same place in a style sheet.
2275 </p>
2277 <div class="example">
2278 <p>Style declaration using the 'shape' shorthand property.</p>
2279 <pre><code class="html">
2280 <style type="text/css">
2281 .shape {
2282 shape: rectangle(50px, 50px, 200px, 100px) / url("shape_image.png") 0.7;
2283 }
2284 </style>
2285 </code></pre>
2286 </div>
2287 <p class="issue">The example above must be finished.</p>
2289 -->
2290 <!-- End section "Shape Shorthand property -->
2291 <!-- End section "Declaring Shapes" -->
2293 <h4 id=shape-margin-property><span class=secno>4.4.4. </span>The ‘<a
2294 href="#shape-margin"><code class=property>shape-margin</code></a>’
2295 property</h4>
2297 <p> The ‘<a href="#shape-margin"><code
2298 class=property>shape-margin</code></a>’ property adds a margin to a
2299 shape-outside. This defines a new shape where every point is the specified
2300 distance from the shape-outside. This property takes on positive values
2301 only.
2303 <table class=propdef>
2304 <tbody>
2305 <tr>
2306 <th>Name:
2308 <td><dfn id=shape-margin title="'shape-margin'">shape-margin</dfn>
2310 <tr>
2311 <th>Value:
2313 <td><var><length></var>
2315 <tr>
2316 <th>Initial:
2318 <td>0
2320 <tr>
2321 <th>Applies to:
2323 <td>exclusion elements and floats
2325 <tr>
2326 <th>Inherited:
2328 <td>no
2330 <tr>
2331 <th>Percentages:
2333 <td>N/A
2335 <tr>
2336 <th>Media:
2338 <td>visual
2340 <tr>
2341 <th>Computed value:
2343 <td>the absolute length
2344 </table>
2346 <div class=example>
2347 <p>A ‘<a href="#shape-margin"><code
2348 class=property>shape-margin</code></a>’ creating an offset from a
2349 circlular shape-outside. The blue rectangles represent inline content
2350 affected by the shape created by the margin.</p>
2351 <img alt="Example of a shape-margin offset" src="images/wrap-margin.png"></div>
2352 <!-- End secion "shape-margin property" -->
2354 <h4 id=shape-padding-property><span class=secno>4.4.5. </span>The ‘<a
2355 href="#shape-padding"><code class=property>shape-padding</code></a>’
2356 Property</h4>
2358 <p> The ‘<a href="#shape-padding"><code
2359 class=property>shape-padding</code></a>’ property adds padding to a
2360 shape-inside. This defines a new shape where every point is the specified
2361 distance from the shape-inside. This property takes on positive values
2362 only.
2364 <table class=propdef>
2365 <tbody>
2366 <tr>
2367 <th>Name:
2369 <td><dfn id=shape-padding title="'shape-padding'">shape-padding</dfn>
2371 <tr>
2372 <th>Value:
2374 <td><var><length></var>
2376 <tr>
2377 <th>Initial:
2379 <td>0
2381 <tr>
2382 <th>Applies to:
2384 <td>block-level elements
2386 <tr>
2387 <th>Inherited:
2389 <td>no
2391 <tr>
2392 <th>Percentages:
2394 <td>N/A
2396 <tr>
2397 <th>Media:
2399 <td>visual
2401 <tr>
2402 <th>Computed value:
2404 <td>the absolute length
2405 </table>
2407 <div class=example>
2408 <p>A ‘<a href="#shape-padding"><code
2409 class=property>shape-padding</code></a>’ creating an offset from a
2410 circlular shape-inside. The light blue rectangles represent inline
2411 content affected by the shape created by the padding.</p>
2412 <img alt="Example of a shape-padding offset"
2413 src="images/shape-padding.png"></div>
2414 <!-- End section "shape-padding property" -->
2416 <div class=note>Note that the ‘<a href="#shape-padding"><code
2417 class=property>shape-padding</code></a>’ property only affects layout of
2418 content inside the element it applies to while the ‘<a
2419 href="#shape-margin"><code class=property>shape-margin</code></a>’
2420 property only affects layout of content outside the element.</div>
2421 <!-- End section "Shapes" -->
2423 <h2 id=conformance><span class=secno>5. </span>Conformance</h2>
2424 <!--begin-conformance-->
2426 <h3 class=no-ref id=conventions> Document conventions</h3>
2428 <p>Conformance requirements are expressed with a combination of descriptive
2429 assertions and RFC 2119 terminology. The key words “MUST”, “MUST
2430 NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
2431 “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
2432 normative parts of this document are to be interpreted as described in RFC
2433 2119. However, for readability, these words do not appear in all uppercase
2434 letters in this specification.
2436 <p>All of the text of this specification is normative except sections
2437 explicitly marked as non-normative, examples, and notes. <a
2438 href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
2440 <p>Examples in this specification are introduced with the words “for
2441 example” or are set apart from the normative text with
2442 <code>class="example"</code>, like this:
2444 <div class=example>
2445 <p>This is an example of an informative example.
2446 </div>
2448 <p>Informative notes begin with the word “Note” and are set apart from
2449 the normative text with <code>class="note"</code>, like this:
2451 <p class=note>Note, this is an informative note.
2453 <h3 class=no-ref id=conformance-classes> Conformance classes</h3>
2455 <p>Conformance to this specification is defined for three conformance
2456 classes:
2458 <dl>
2459 <dt><dfn id=style-sheet title="style sheet!!as conformance class">style
2460 sheet</dfn>
2462 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
2463 style sheet</a>.
2465 <dt><dfn id=renderer>renderer</dfn>
2467 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
2468 that interprets the semantics of a style sheet and renders documents that
2469 use them.
2471 <dt><dfn id=authoring-tool>authoring tool</dfn>
2473 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
2474 that writes a style sheet.
2475 </dl>
2477 <p>A style sheet is conformant to this specification if all of its
2478 statements that use syntax defined in this module are valid according to
2479 the generic CSS grammar and the individual grammars of each feature
2480 defined in this module.
2482 <p>A renderer is conformant to this specification if, in addition to
2483 interpreting the style sheet as defined by the appropriate specifications,
2484 it supports all the features defined by this specification by parsing them
2485 correctly and rendering the document accordingly. However, the inability
2486 of a UA to correctly render a document due to limitations of the device
2487 does not make the UA non-conformant. (For example, a UA is not required to
2488 render color on a monochrome monitor.)
2490 <p>An authoring tool is conformant to this specification if it writes style
2491 sheets that are syntactically correct according to the generic CSS grammar
2492 and the individual grammars of each feature in this module, and meet all
2493 other conformance requirements of style sheets as described in this
2494 module.
2496 <h3 class=no-ref id=partial> Partial implementations</h3>
2498 <p>So that authors can exploit the forward-compatible parsing rules to
2499 assign fallback values, CSS renderers <strong>must</strong> treat as
2500 invalid (and <a
2501 href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as
2502 appropriate</a>) any at-rules, properties, property values, keywords, and
2503 other syntactic constructs for which they have no usable level of support.
2504 In particular, user agents <strong>must not</strong> selectively ignore
2505 unsupported component values and honor supported values in a single
2506 multi-value property declaration: if any value is considered invalid (as
2507 unsupported values must be), CSS requires that the entire declaration be
2508 ignored.
2510 <h3 class=no-ref id=experimental> Experimental implementations</h3>
2512 <p>To avoid clashes with future CSS features, the CSS 2.1 specification
2513 reserves a <a
2514 href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
2515 syntax</a> for proprietary and experimental extensions to CSS.
2517 <p>Prior to a specification reaching the Candidate Recommendation stage in
2518 the W3C process, all implementations of a CSS feature are considered
2519 experimental. The CSS Working Group recommends that implementations use a
2520 vendor-prefixed syntax for such features, including those in W3C Working
2521 Drafts. This avoids incompatibilities with future changes in the draft.
2523 <h3 class=no-ref id=testing> Non-experimental implementations</h3>
2525 <p>Once a specification reaches the Candidate Recommendation stage,
2526 non-experimental implementations are possible, and implementors should
2527 release an unprefixed implementation of any CR-level feature they can
2528 demonstrate to be correctly implemented according to spec.
2530 <p>To establish and maintain the interoperability of CSS across
2531 implementations, the CSS Working Group requests that non-experimental CSS
2532 renderers submit an implementation report (and, if necessary, the
2533 testcases used for that implementation report) to the W3C before releasing
2534 an unprefixed implementation of any CSS features. Testcases submitted to
2535 W3C are subject to review and correction by the CSS Working Group.
2537 <p>Further information on submitting testcases and implementation reports
2538 can be found from on the CSS Working Group's website at <a
2539 href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
2540 Questions should be directed to the <a
2541 href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
2542 mailing list. <!--end-conformance-->
2544 <h2 class=no-num id=acknowledgments>Acknowledgments</h2>
2546 <p>This specification is made possible by input from Andrei Bucur,
2547 Alexandru Chiculita, Arron Eicholz, Daniel Glazman, Arno Gourdol, Chris
2548 Jones, Bem Jones-Bey, Marcus Mielke, Alex Mogilevsky, Hans Muller, Mihnea
2549 Ovidenie, Virgil Palanciuc, Peter Sorotokin, Bear Travis, Eugene Veselov,
2550 Stephen Zilles and the CSS Working Group members.
2552 <h2 class=no-num id=references>References</h2>
2554 <h3 class=no-num id=normative-references>Normative references</h3>
2555 <!--begin-normative-->
2556 <!-- Sorted by label -->
2558 <dl class=bibliography>
2559 <dd style="display: none"><!-- keeps the doc valid if the DL is empty -->
2560 <!---->
2562 <dt id=CSS21>[CSS21]
2564 <dd>Bert Bos; et al. <a
2565 href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
2566 Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
2567 2011. W3C Recommendation. URL: <a
2568 href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
2569 </dd>
2570 <!---->
2572 <dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES]
2574 <dd>Elika J. Etemad; Koji Ishii. <a
2575 href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/"><cite>CSS
2576 Writing Modes Module Level 3.</cite></a> 15 November 2012. W3C Working
2577 Draft. (Work in progress.) URL: <a
2578 href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/">http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/</a>
2579 </dd>
2580 <!---->
2582 <dt id=CSS3BOX>[CSS3BOX]
2584 <dd>Bert Bos. <a
2585 href="http://www.w3.org/TR/2007/WD-css3-box-20070809"><cite>CSS basic box
2586 model.</cite></a> 9 August 2007. W3C Working Draft. (Work in progress.)
2587 URL: <a
2588 href="http://www.w3.org/TR/2007/WD-css3-box-20070809">http://www.w3.org/TR/2007/WD-css3-box-20070809</a>
2589 </dd>
2590 <!---->
2592 <dt id=CSS3UI>[CSS3UI]
2594 <dd>Tantek Çelik. <a
2595 href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/"><cite>CSS Basic
2596 User Interface Module Level 3 (CSS3 UI).</cite></a> 17 January 2012. W3C
2597 Working Draft. (Work in progress.) URL: <a
2598 href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/">http://www.w3.org/TR/2012/WD-css3-ui-20120117/</a>
2599 </dd>
2600 <!---->
2602 <dt id=CSS3VAL>[CSS3VAL]
2604 <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a
2605 href="http://www.w3.org/TR/2012/CR-css3-values-20120828/"><cite>CSS
2606 Values and Units Module Level 3.</cite></a> 28 August 2012. W3C Candidate
2607 Recommendation. (Work in progress.) URL: <a
2608 href="http://www.w3.org/TR/2012/CR-css3-values-20120828/">http://www.w3.org/TR/2012/CR-css3-values-20120828/</a>
2609 </dd>
2610 <!---->
2612 <dt id=RFC2119>[RFC2119]
2614 <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
2615 words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
2616 RFC 2119. URL: <a
2617 href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
2618 </dd>
2619 <!---->
2621 <dt id=SVG11>[SVG11]
2623 <dd>Erik Dahlström; et al. <a
2624 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/"><cite>Scalable
2625 Vector Graphics (SVG) 1.1 (Second Edition).</cite></a> 16 August 2011.
2626 W3C Recommendation. URL: <a
2627 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">http://www.w3.org/TR/2011/REC-SVG11-20110816/</a>
2628 </dd>
2629 <!---->
2630 </dl>
2631 <!--end-normative-->
2633 <h3 class=no-num id=other-references>Other references</h3>
2634 <!--begin-informative-->
2635 <!-- Sorted by label -->
2637 <dl class=bibliography>
2638 <dd style="display: none"><!-- keeps the doc valid if the DL is empty -->
2639 <!---->
2641 <dt id=CSS3-FLEXBOX>[CSS3-FLEXBOX]
2643 <dd>Tab Atkins Jr.; Elika J. Etemad; Alex Mogilevsky. <a
2644 href="http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/"><cite>CSS
2645 Flexible Box Layout Module.</cite></a> 18 September 2012. W3C Candidate
2646 Recommendation. (Work in progress.) URL: <a
2647 href="http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/">http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/</a>
2648 </dd>
2649 <!---->
2651 <dt id=CSS3-GRID-LAYOUT>[CSS3-GRID-LAYOUT]
2653 <dd>Alex Mogilevsky; et al. <a
2654 href="http://www.w3.org/TR/2012/WD-css3-grid-layout-20121106/"><cite>CSS
2655 Grid Layout.</cite></a> 6 November 2012. W3C Working Draft. (Work in
2656 progress.) URL: <a
2657 href="http://www.w3.org/TR/2012/WD-css3-grid-layout-20121106/">http://www.w3.org/TR/2012/WD-css3-grid-layout-20121106/</a>
2658 </dd>
2659 <!---->
2660 </dl>
2661 <!--end-informative-->
2663 <h2 class=no-num id=index>Index</h2>
2664 <!--begin-index-->
2666 <ul class=indexlist>
2667 <li>authoring tool, <a href="#authoring-tool"
2668 title="section 5."><strong>5.</strong></a>
2670 <li>circle, <a href="#circle"
2671 title="section 4.2.1."><strong>4.2.1.</strong></a>
2673 <li>Content area, <a href="#content-area"
2674 title="section 2."><strong>2.</strong></a>
2676 <li>ellipse, <a href="#ellipse"
2677 title="section 4.2.1."><strong>4.2.1.</strong></a>
2679 <li>Exclusion area, <a href="#exclusion-area"
2680 title="section 2."><strong>2.</strong></a>
2682 <li>Exclusion box, <a href="#exclusion-box"
2683 title="section 2."><strong>2.</strong></a>
2685 <li>Exclusion element, <a href="#exclusion-element"
2686 title="section 2."><strong>2.</strong></a>
2688 <li>Float area, <a href="#float-area"
2689 title="section 2."><strong>2.</strong></a>
2691 <li>inset-rectangle, <a href="#inset-rectangle"
2692 title="section 4.2.1."><strong>4.2.1.</strong></a>
2694 <li>outside-inside, <a href="#outside-and-inside"
2695 title="section 2."><strong>2.</strong></a>
2697 <li>polygon, <a href="#polygon"
2698 title="section 4.2.1."><strong>4.2.1.</strong></a>
2700 <li>rectangle, <a href="#rectangle"
2701 title="section 4.2.1."><strong>4.2.1.</strong></a>
2703 <li>renderer, <a href="#renderer"
2704 title="section 5."><strong>5.</strong></a>
2706 <li>'shape-image-threshold', <a href="#shape-image-threshold"
2707 title="section 4.4.3."><strong>4.4.3.</strong></a>
2708 <ul>
2709 <li>'<alphavalue>', <a href="#ltalphavaluegt"
2710 title="section 4.4.3."><strong>4.4.3.</strong></a>
2711 </ul>
2713 <li>'shape-inside', <a href="#shape-inside"
2714 title="section 4.4.2."><strong>4.4.2.</strong></a>
2715 <ul>
2716 <li>'auto', <a href="#auto1"
2717 title="section 4.4.2."><strong>4.4.2.</strong></a>
2719 <li>'<basic-shape>', <a href="#ltbasic-shapegt0"
2720 title="section 4.4.2."><strong>4.4.2.</strong></a>
2722 <li>'outside-shape', <a href="#outside-shape"
2723 title="section 4.4.2."><strong>4.4.2.</strong></a>
2725 <li>'<uri>', <a href="#lturigt0"
2726 title="section 4.4.2."><strong>4.4.2.</strong></a>
2727 </ul>
2729 <li>'shape-margin', <a href="#shape-margin"
2730 title="section 4.4.4."><strong>4.4.4.</strong></a>
2732 <li>'shape-outside', <a href="#shape-outside"
2733 title="section 4.4.1."><strong>4.4.1.</strong></a>
2734 <ul>
2735 <li>'auto', <a href="#auto0"
2736 title="section 4.4.1."><strong>4.4.1.</strong></a>
2738 <li>'<basic-shape>', <a href="#ltbasic-shapegt"
2739 title="section 4.4.1."><strong>4.4.1.</strong></a>
2741 <li>'<uri>', <a href="#lturigt"
2742 title="section 4.4.1."><strong>4.4.1.</strong></a>
2743 </ul>
2745 <li>'shape-padding', <a href="#shape-padding"
2746 title="section 4.4.5."><strong>4.4.5.</strong></a>
2748 <li>style sheet
2749 <ul>
2750 <li>as conformance class, <a href="#style-sheet"
2751 title="section 5."><strong>5.</strong></a>
2752 </ul>
2754 <li>'wrap-flow', <a href="#wrap-flow"
2755 title="section 3.1.1."><strong>3.1.1.</strong></a>
2756 <ul>
2757 <li>'auto', <a href="#auto"
2758 title="section 3.1.1."><strong>3.1.1.</strong></a>
2760 <li>'both', <a href="#both"
2761 title="section 3.1.1."><strong>3.1.1.</strong></a>
2763 <li>'clear', <a href="#clear"
2764 title="section 3.1.1."><strong>3.1.1.</strong></a>
2766 <li>'end', <a href="#end"
2767 title="section 3.1.1."><strong>3.1.1.</strong></a>
2769 <li>'maximum', <a href="#maximum"
2770 title="section 3.1.1."><strong>3.1.1.</strong></a>
2772 <li>'minimum', <a href="#minimum"
2773 title="section 3.1.1."><strong>3.1.1.</strong></a>
2775 <li>'start', <a href="#start"
2776 title="section 3.1.1."><strong>3.1.1.</strong></a>
2777 </ul>
2779 <li>Wrapping area, <a href="#wrapping-area"
2780 title="section 2."><strong>2.</strong></a>
2782 <li>Wrapping context, <a href="#wrapping-context"
2783 title="section 2."><strong>2.</strong></a>
2785 <li>'wrap-through', <a href="#wrap-through"
2786 title="section 3.3.1."><strong>3.3.1.</strong></a>
2787 <ul>
2788 <li>'none', <a href="#none"
2789 title="section 3.3.1."><strong>3.3.1.</strong></a>
2791 <li>'wrap', <a href="#wrap"
2792 title="section 3.3.1."><strong>3.3.1.</strong></a>
2793 </ul>
2794 </ul>
2795 <!--end-index-->
2797 <h2 class=no-num id=property-index>Property index</h2>
2798 <!--begin-properties-->
2800 <table class=proptable>
2801 <thead>
2802 <tr>
2803 <th>Property
2805 <th>Values
2807 <th>Initial
2809 <th>Applies to
2811 <th>Inh.
2813 <th>Percentages
2815 <th>Media
2817 <tbody>
2818 <tr>
2819 <th><a class=property
2820 href="#shape-image-threshold">shape-image-threshold</a>
2822 <td><alphavalue>
2824 <td>0.5
2826 <td>block-level elements
2828 <td>no
2830 <td>alpha channel of the image specified by <uri>
2832 <td>visual
2834 <tr>
2835 <th><a class=property href="#shape-inside">shape-inside</a>
2837 <td>outside-shape | auto | <basic-shape> | <uri>
2839 <td>outside-shape
2841 <td>block-level elements
2843 <td>no
2845 <td>N/A
2847 <td>visual
2849 <tr>
2850 <th><a class=property href="#shape-margin">shape-margin</a>
2852 <td><length>
2854 <td>0
2856 <td>exclusion elements and floats
2858 <td>no
2860 <td>N/A
2862 <td>visual
2864 <tr>
2865 <th><a class=property href="#shape-outside">shape-outside</a>
2867 <td>auto | <basic-shape> | <uri>
2869 <td>auto
2871 <td>exclusion elements and floats
2873 <td>no
2875 <td>N/A
2877 <td>visual
2879 <tr>
2880 <th><a class=property href="#shape-padding">shape-padding</a>
2882 <td><length>
2884 <td>0
2886 <td>block-level elements
2888 <td>no
2890 <td>N/A
2892 <td>visual
2894 <tr>
2895 <th><a class=property href="#wrap-flow">wrap-flow</a>
2897 <td>auto | both | start | end | minimum | maximum | clear
2899 <td>auto
2901 <td>block-level elements.
2903 <td>no
2905 <td>N/A
2907 <td>visual
2909 <tr>
2910 <th><a class=property href="#wrap-through">wrap-through</a>
2912 <td>wrap | none
2914 <td>wrap
2916 <td>block-level elements
2918 <td>no
2920 <td>N/A
2922 <td>visual
2923 </table>
2924 <!--end-properties-->
2925 <!-- template markup for issues pulled from Bugzilla -->
2927 <script id=issue-template type="text/template">
2928 </script>
2929 <div class=issue-marker data-bug_id="{{bug_id}}"
2930 data-bug_status="{{bug_status}}"> <a
2931 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id={{bug_id}}">Issue-{{bug_id}}</a>
2933 <div class=issue-details>
2934 <p class=short-desc>{{short_desc}}
2935 </div>
2936 </div>
2938 <script src="../shared/scripts/BugzillaTrackerUtil.js"
2939 type="text/javascript"></script>
2940 <script src="../shared/scripts/BugzillaTracker.js" type="text/javascript"></script>
2941 <script type="text/javascript">
2942 checkSpecificationIssues(‘</script>
2943 <p><code class=property>CSS</code>’, ‘<code
2944 class=property>Exclusions</code>’);
2946 <h2 class=no-num id=change-log>Change Log</h2>
2948 <h3 class=no-num id=since-may-3rd-2012>Since <a
2949 href="http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/">May 3rd
2950 2012</a></h3>
2952 <ul>
2953 <li>added inset-rectangle() to basic shapes
2955 <li>Changed shape-inside overflow diagrams to show exclusion behavior
2957 <li>Changed shape-inside to contribute to the wrapping context
2959 <li>Defined exclusion edges relative to wrapping content's writing mode
2961 <li>Made use of start, end, before and after consistent
2963 <li>Added interpolation for basic shapes
2965 <li>Changed basic shapes to depend on box specified with box-sizing
2967 <li>Added overflow behavior for shape-inside.
2969 <li>Added wrap-flow:minimum.
2971 <li>Clarified processing model.
2973 <li>Changed wrap-margin and wrap-padding to shape-margin and
2974 shape-padding.
2976 <li>Removed wrap shorthand.
2977 </ul>
2979 <h3 class=no-num id=since-december-13th-2011>Since <a
2980 href="http://www.w3.org/TR/2011/WD-css3-exclusions-20111213/">December
2981 13th 2011</a></h3>
2983 <ul>
2984 <li>Clarified processing model.
2986 <li>Clarified interaction with floats.
2988 <li>Clarified that an exclusion element establishes a new block formatting
2989 context.
2990 </ul>
2991 </html>
2992 <!-- Keep this comment at the end of the file
2993 Local variables:
2994 mode: sgml
2995 sgml-declaration:"~/SGML/HTML4.decl"
2996 sgml-default-doctype-name:"html"
2997 sgml-minimize-attributes:t
2998 sgml-nofill-elements:("pre" "style" "br")
2999 sgml-live-element-indicator:t
3000 sgml-omittag:nil
3001 sgml-shorttag:nil
3002 sgml-namecase-general:t
3003 sgml-general-insert-case:lower
3004 sgml-always-quote-attributes:t
3005 sgml-indent-step:nil
3006 sgml-indent-data:t
3007 sgml-parent-document:nil
3008 sgml-exposed-tags:nil
3009 sgml-local-catalogs:nil
3010 sgml-local-ecat-files:nil
3011 End:
3012 -->
