Mon, 21 Jan 2013 17:02:00 -0800
[css-exclusions] start/end consistency (bug 16437)
rossen@4115 | 1 | <!DOCTYPE html public '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'> |
rossen@3643 | 2 | <html lang="en"> |
rossen@3643 | 3 | <head profile="http://www.w3.org/2006/03/hcard"> |
rossen@3643 | 4 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
vhardy@4057 | 5 | <title>CSS Exclusions and Shapes Module Level 3</title> |
vhardy@5555 | 6 | <link rel="stylesheet" type="text/css" href="../shared/style/default.css" /> |
stearns@7040 | 7 | <script src='http://test.csswg.org/harness/annotate.js#CSS3-EXCLUSIONS_DEV' type='text/javascript' defer></script> |
vhardy@2780 | 8 | |
vhardy@3659 | 9 | |
rossen@3643 | 10 | <style type="text/css"> |
rossen@3643 | 11 | .singleImgExample { |
rossen@3643 | 12 | display: block; |
rossen@3643 | 13 | margin: auto; |
rossen@3643 | 14 | } |
rossen@3643 | 15 | |
rossen@3643 | 16 | .example-table { |
rossen@3643 | 17 | table-layout: fixed; |
rossen@3643 | 18 | width: 100%; |
rossen@3643 | 19 | } |
rossen@3643 | 20 | |
rossen@3643 | 21 | .example-table tr td img { |
rossen@3643 | 22 | width: 90%; |
rossen@3643 | 23 | } |
vhardy@5555 | 24 | </style> |
vhardy@5555 | 25 | |
vhardy@5555 | 26 | <link rel="stylesheet" type="text/css" |
vhardy@5555 | 27 | href="http://www.w3.org/StyleSheets/TR/W3C-ED.css"> |
vhardy@5555 | 28 | |
vhardy@5555 | 29 | <link rel="stylesheet" type="text/css" |
vhardy@5555 | 30 | href="../shared/style/issues.css"> |
vhardy@2780 | 31 | |
vhardy@5555 | 32 | <link id="st" href="../shared/style/alternate-spec-style.css" rel="stylesheet" |
vhardy@5555 | 33 | type="text/css" title="alternate spec style"> |
vhardy@5555 | 34 | |
vhardy@4045 | 35 | |
vhardy@2780 | 36 | </head> |
rossen@3643 | 37 | <body> |
vhardy@3659 | 38 | <div id="div-head" class="head"> |
vhardy@4680 | 39 | <p><a href="http://www.w3.org/"><img id="mobile-logo" alt="W3C" height="53" src= |
vhardy@4680 | 40 | "http://www.w3.org/2008/site/images/logo-w3c-mobile-lg" width="90"></a> |
vhardy@4680 | 41 | |
vhardy@4680 | 42 | |
vhardy@4680 | 43 | <!--begin-logo--> |
vhardy@4680 | 44 | |
vhardy@4680 | 45 | <p><a href="http://www.w3.org/"><img id="logo" alt="W3C" height="48" src= |
vhardy@4680 | 46 | "http://www.w3.org/Icons/w3c_home" width="72"></a> <!--end-logo--></p> |
bert@4110 | 47 | <h1 id="css-exclusions-module">CSS Exclusions and Shapes Module Level 3</h1> |
rossen@3643 | 48 | <h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2> |
rossen@3643 | 49 | <dl> |
rossen@3643 | 50 | <dt>This version:</dt> |
bert@4110 | 51 | <dd><a href="http://dev.w3.org/csswg/css3-exclusions/">http://dev.w3.org/csswg/css3-exclusions/</a></dd> |
bert@4110 | 52 | <!--<dd><a href="[VERSION]">http://www.w3.org/TR/[YEAR]/WD-css3-exclusions-[CDATE]/</a></dd>--> |
rossen@4263 | 53 | |
rossen@3643 | 54 | <dt>Latest version:</dt> |
bert@4110 | 55 | <dd><a href="http://www.w3.org/TR/[SHORTNAME]/">http://www.w3.org/TR/[SHORTNAME]/</a></dd> |
rossen@4263 | 56 | |
rossen@4263 | 57 | <dt>Editor's Draft:</dt> |
rossen@4263 | 58 | <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a> |
rossen@4263 | 59 | |
rossen@3643 | 60 | <dt>Previous version:</dt> |
rossen@3643 | 61 | <dd>None</dd> |
rossen@4263 | 62 | |
rossen@3643 | 63 | <dt>Editors:</dt> |
rossen@3643 | 64 | <dd class="vcard"><span class="fn">Vincent Hardy</span>, <span class="org">Adobe Systems, Inc.</span>, <span class="email">vhardy@adobe.com</span></dd> |
rossen@3643 | 65 | <dd class="vcard"><span class="fn">Rossen Atanassov</span>, <span class="org">Microsoft Corporation</span>, <span class="email">ratan@microsoft.com</span></dd> |
stearns@5629 | 66 | <dd class="vcard"><span class="fn">Alan Stearns</span>, <span class="org">Adobe Systems, Inc.</span>, <span class="email">stearns@adobe.com</span></dd> |
rossen@4263 | 67 | |
rossen@4263 | 68 | <dt>Issues List:</dt> |
stearns@5632 | 69 | <dd><a href="https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&product=CSS&component=Exclusions&resolution=---&cmdtype=doit">in Bugzilla</a></dd> |
rossen@4263 | 70 | |
rossen@4263 | 71 | <dt>Discussion:</dt> |
vhardy@4680 | 72 | <dd><a href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> with subject line "<code>[css3-exclusions] message topic</code>" |
rossen@4263 | 73 | |
rossen@3643 | 74 | </dl> |
rossen@3643 | 75 | <!--copyright--> |
rossen@3643 | 76 | <hr title="Separator for header"> |
rossen@3643 | 77 | </div> |
vhardy@2780 | 78 | |
rossen@3643 | 79 | <h2 class="no-num no-toc" id="abstract">Abstract</h2> |
rossen@3734 | 80 | |
vhardy@5214 | 81 | |
rossen@3643 | 82 | <p> |
vhardy@5457 | 83 | CSS Exclusions define arbitrary areas around which <a href="http://www.w3.org/TR/CSS2/visuren.html#inline-boxes">inline content</a> ([[!CSS21]]) content can flow. |
vhardy@5214 | 84 | CSS Exclusions can be defined on any CSS block-level elements. CSS |
vhardy@5214 | 85 | Exclusions extend the notion of content wrapping previously limited to |
vhardy@5214 | 86 | floats.</p> |
vhardy@5214 | 87 | |
vhardy@5214 | 88 | <p>CSS Shapes control the geometric shapes used for wrapping inline flow |
vhardy@5214 | 89 | content outside or inside an element. CSS Shapes can be applied to any |
vhardy@5214 | 90 | element. A circle shape on a float will cause inline content to wrap around |
vhardy@5214 | 91 | the circle shape instead of the float's bounding box.</p> |
vhardy@5214 | 92 | |
vhardy@5214 | 93 | <p>Combining CSS Exclusions and CSS Shapes allows sophisticated layouts, |
vhardy@5214 | 94 | allowing interactions between shapes in complex positioning schemes.</p> |
vhardy@5214 | 95 | |
rossen@3643 | 96 | <h2 class="no-num no-toc" id="status">Status of this document</h2> |
rossen@3643 | 97 | <!--status--> |
rossen@3643 | 98 | |
rossen@3643 | 99 | <h2 class="no-num no-toc" id="contents">Table of contents</h2> |
rossen@3643 | 100 | <!--toc--> |
vhardy@2780 | 101 | |
rossen@3643 | 102 | <h2 id="intro">Introduction</h2> |
rossen@3643 | 103 | <p><em>This section is not normative.</em></p> |
rossen@3643 | 104 | <p> |
vhardy@3659 | 105 | The exclusions section of this specification defines features that allow inline flow |
vhardy@3659 | 106 | content to wrap around outside the <span>exclusion area</span> of elements. |
rossen@3643 | 107 | </p> |
rossen@3643 | 108 | <p> |
vhardy@3659 | 109 | The shapes section of the specification defines properties to control the geometry of |
vhardy@3659 | 110 | an element's <span>exclusion area</span> as well as the geometry used for wrapping |
vhardy@3659 | 111 | an element's inline flow content. |
rossen@3643 | 112 | </p> |
vhardy@2780 | 113 | |
vhardy@3659 | 114 | <h2 id="definitions">Definitions</h2> |
vhardy@3659 | 115 | |
vhardy@5125 | 116 | <dfn>Exclusion box</dfn> |
vhardy@3659 | 117 | |
rossen@3643 | 118 | <p> |
vhardy@5214 | 119 | A <a href="http://www.w3.org/TR/css3-box/">box</a> ([[!CSS3BOX]]) that defines an <span>exclusion area</span> for other boxes. The 'wrap-flow' |
vhardy@5125 | 120 | property is used to make an element's generated box an exclusion box. An exclusion box contributes |
rossen@3716 | 121 | its <span>exclusion area</span> to its <a href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details"> |
vhardy@5412 | 122 | containing block's</a> <span>wrapping context</span>. An element with a 'float' |
vhardy@5412 | 123 | computed value other than 'none' does not become an exclusion. |
vhardy@3659 | 124 | </p> |
vhardy@3659 | 125 | |
vhardy@3659 | 126 | <dfn>Exclusion area</dfn> |
stearns@7180 | 127 | |
rossen@3643 | 128 | <p> |
ratan@5922 | 129 | The area used for excluding inline flow content around an exclusion box. The |
stearns@6339 | 130 | <span>exclusion area</span> is equivalent to the <a href="http://www.w3.org/TR/CSS2/box.html#box-dimensions"> |
vhardy@5412 | 131 | border box</a>. |
vhardy@5214 | 132 | This specification's |
stearns@6341 | 133 | 'shape-outside' property |
stearns@6341 | 134 | can be used to define arbitrary, |
stearns@6341 | 135 | non-rectangular <span>exclusion areas</span>. |
vhardy@3659 | 136 | </p> |
vhardy@3659 | 137 | |
vhardy@5412 | 138 | <dfn>Float area</dfn> |
vhardy@5412 | 139 | |
vhardy@5412 | 140 | <p> |
vhardy@5412 | 141 | The area used for excluding inline flow content around a float element. By default, the |
vhardy@5488 | 142 | float area is the float element's |
vhardy@5488 | 143 | <a href="http://www.w3.org/TR/CSS2/box.html#box-dimensions">margin box</a>. |
vhardy@5412 | 144 | This specification's |
vhardy@5412 | 145 | 'shape-outside' property can be used to define arbitrary, non-rectangular float |
vhardy@5412 | 146 | areas. |
vhardy@5412 | 147 | </p> |
vhardy@5412 | 148 | |
vhardy@5488 | 149 | <dfn>Exclusion element</dfn> |
vhardy@5488 | 150 | |
vhardy@5488 | 151 | <p>An block-level element which is not a float and generates an <span>exclusion box</span>. |
vhardy@5488 | 152 | An element generates an exclusion box when its 'wrap-flow' property's computed value is not 'auto'. |
vhardy@5488 | 153 | </p> |
vhardy@5488 | 154 | |
vhardy@5412 | 155 | |
vhardy@3659 | 156 | <dfn>Wrapping context</dfn> |
rossen@4463 | 157 | <div class="issue-marker" data-bug_id="15086" data-bug_status="NEW"> |
vhardy@5750 | 158 | <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15086">Issue-15086</a> |
rossen@4463 | 159 | <div class="issue-details"> |
rossen@4463 | 160 | <p class="short-desc">should the wrapping context be generic and include floats?</p> |
rossen@4463 | 161 | </div> |
rossen@4463 | 162 | </div> |
vhardy@3659 | 163 | |
vhardy@3659 | 164 | <p> |
vhardy@5488 | 165 | The <span>wrapping context</span> of a box is a collection of <span>exclusion areas</span> |
vhardy@5488 | 166 | contributed by its associated <span>exclusion boxes</span>. During layout, |
vhardy@5412 | 167 | a box wraps its inline flow content in the area that corresponds to the subtraction of |
vhardy@5488 | 168 | its <span>wrapping context</span> from its own <span>content area</span>. |
vhardy@3659 | 169 | </p> |
vhardy@3659 | 170 | |
vhardy@3659 | 171 | <p> |
vhardy@5125 | 172 | A box inherits its |
vhardy@3707 | 173 | <a href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">containing block's</a> |
vhardy@5488 | 174 | <span>wrapping context</span> unless it specifically |
vhardy@3659 | 175 | resets it using the 'wrap-through' property. |
vhardy@3659 | 176 | </p> |
vhardy@3659 | 177 | |
vhardy@3659 | 178 | <dfn>Content area</dfn> |
vhardy@3659 | 179 | <p> |
vhardy@5125 | 180 | The area used for layout of the inline flow content of a box. By default the |
vhardy@3659 | 181 | area is equivalent to the <a href="http://www.w3.org/TR/CSS2/box.html#box-dimensions">content box</a>. |
vhardy@3659 | 182 | This specification's 'shape-inside' property can define arbitrary, non-rectangular content areas. |
vhardy@3659 | 183 | </p> |
stearns@5636 | 184 | |
stearns@5636 | 185 | <div class="issue-marker" data-bug_id="15089" data-bug_status="NEW"> |
vhardy@5750 | 186 | <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15089">Issue-15089</a> |
stearns@5636 | 187 | <div class="issue-details"> |
stearns@5636 | 188 | <p class="short-desc">shrink-to-fit circle / shape</p> |
stearns@5636 | 189 | </div> |
stearns@5636 | 190 | </div> |
vhardy@3659 | 191 | |
vhardy@3659 | 192 | <dfn title="outside-inside">Outside and inside</dfn> |
vhardy@3659 | 193 | |
vhardy@3659 | 194 | <p> |
rossen@3716 | 195 | In this specification, 'outside' refers to DOM content that is not a descendant of an element |
rossen@3716 | 196 | while 'inside' refers to the element's descendants. |
vhardy@3659 | 197 | </p> |
vhardy@3659 | 198 | |
vhardy@3659 | 199 | <h2 id="exclusions">Exclusions</h2> |
vhardy@3659 | 200 | <p> |
stearns@6339 | 201 | Exclusion elements define <span>exclusion areas</span> that contribute to their containing block's |
vhardy@5412 | 202 | <span>wrapping context</span>. As a consequence, exclusions impact the layout of their |
vhardy@5412 | 203 | containing block's descendants. |
vhardy@3659 | 204 | <p> |
vhardy@5412 | 205 | |
vhardy@3659 | 206 | <p> |
vhardy@5412 | 207 | Elements layout their inline content in their <span>content area</span> and wrap around the |
stearns@6339 | 208 | <span>exclusion areas</span> in their associated <span>wrapping context</span>. If the element is itself an exclusion, it |
vhardy@3659 | 209 | does not wrap around its own exclusion shape and the impact of other exclusions on other |
vhardy@3659 | 210 | exclusions is controlled by the 'z-index' property as explained in the |
vhardy@3659 | 211 | <a href="#exclusions-order">exclusions order</a> section. |
vhardy@3659 | 212 | </p> |
vhardy@5412 | 213 | The <a href="#shapes">shape properties</a> can be used to change the shape of |
vhardy@5412 | 214 | <span>exclusion areas</span>. |
rossen@3643 | 215 | </p> |
vhardy@2780 | 216 | |
vhardy@3659 | 217 | <h3 id="declaring-exclusions">Declaring exclusions</h3> |
rossen@3655 | 218 | <p> |
vhardy@3659 | 219 | An element becomes an exclusion when its 'wrap-flow' property has a computed value other than |
vhardy@3659 | 220 | 'auto'. |
rossen@3655 | 221 | </p> |
rossen@3655 | 222 | |
vhardy@3659 | 223 | <h4 id="wrap-flow-property">The 'wrap-flow' property</h4> |
rossen@3643 | 224 | <table class="propdef"> |
rossen@3643 | 225 | <tr> |
rossen@3643 | 226 | <th>Name:</th> |
rossen@3643 | 227 | <td><dfn title="'wrap-flow'">wrap-flow</dfn></td> |
rossen@3643 | 228 | </tr> |
rossen@3643 | 229 | <tr> |
rossen@3643 | 230 | <th>Value:</th> |
ratan@5884 | 231 | <td><var>auto</var> | <var>both</var> | <var>start</var> | <var>end</var> | <var>minimum</var> | <var>maximum</var> | <var>clear</var></td> |
rossen@3643 | 232 | </tr> |
rossen@3643 | 233 | <tr> |
rossen@3643 | 234 | <th>Initial:</th> |
rossen@3643 | 235 | <td>auto</td> |
rossen@3643 | 236 | </tr> |
rossen@3643 | 237 | <tr> |
rossen@3643 | 238 | <th>Applies to:</th> |
vhardy@5488 | 239 | <td>block-level elements.</td> |
rossen@3643 | 240 | </tr> |
rossen@3643 | 241 | <tr> |
rossen@3643 | 242 | <th>Inherited:</th> |
rossen@3643 | 243 | <td>no</td> |
rossen@3643 | 244 | </tr> |
rossen@3643 | 245 | <tr> |
rossen@3643 | 246 | <th>Percentages:</th> |
rossen@3643 | 247 | <td>N/A</td> |
rossen@3643 | 248 | </tr> |
rossen@3643 | 249 | <tr> |
rossen@3643 | 250 | <th>Media:</th> |
rossen@3643 | 251 | <td>visual</td> |
rossen@3643 | 252 | </tr> |
rossen@3643 | 253 | <tr> |
rossen@3643 | 254 | <th>Computed value:</th> |
vhardy@5488 | 255 | <td>as specified except for element's whose 'float' computed value is not |
vhardy@5488 | 256 | <code class="css">none</code>, in which case the computed value is 'auto'.</td> |
rossen@3643 | 257 | </tr> |
rossen@3643 | 258 | </table> |
stearns@5636 | 259 | |
rossen@3643 | 260 | <p>The values of this property have the following meanings:</p> |
rossen@3643 | 261 | <dl> |
rossen@3643 | 262 | <dt><dfn title="'wrap-flow'!!'auto'">auto</dfn></dt> |
rossen@3643 | 263 | <dd> |
vhardy@5214 | 264 | No exclusion is created. Inline flow content interacts with the element as usual. |
vhardy@5488 | 265 | In particular, if the element is a |
vhardy@5488 | 266 | <a href="http://www.w3.org/TR/CSS2/visuren.html#floats">float</a> (see [[CSS21]]), the |
vhardy@5488 | 267 | behavior is unchanged. |
rossen@3643 | 268 | </dd> |
rossen@3643 | 269 | <dt><dfn title="'wrap-flow'!!'both'">both</dfn></dt> |
rossen@3643 | 270 | <dd> |
vhardy@3659 | 271 | Inline flow content can flow on all sides of the exclusion. |
rossen@3643 | 272 | </dd> |
rossen@3884 | 273 | <dt><dfn title="'wrap-flow'!!'start'">start</dfn></dt> |
rossen@3643 | 274 | <dd> |
stearns@7201 | 275 | Inline flow content can flow |
stearns@7201 | 276 | around the start edge |
stearns@7201 | 277 | of the <span>exclusion area</span> |
stearns@7201 | 278 | but must leave the area |
stearns@7201 | 279 | next to the end edge |
stearns@7201 | 280 | of the exclusion empty. |
rossen@3643 | 281 | </dd> |
rossen@3884 | 282 | <dt><dfn title="'wrap-flow'!!'end'">end</dfn></dt> |
rossen@3643 | 283 | <dd> |
stearns@7201 | 284 | Inline flow content can flow |
stearns@7201 | 285 | around the end edge |
stearns@7201 | 286 | of the <span>exclusion area</span> |
stearns@7201 | 287 | but must leave the area |
stearns@7201 | 288 | next to the start edge |
stearns@7201 | 289 | of the exclusion empty. |
rossen@3643 | 290 | </dd> |
ratan@5884 | 291 | <dt><dfn title="'wrap-flow'!!'minimum'">minimum</dfn></dt> |
ratan@5884 | 292 | <dd> |
stearns@7201 | 293 | Inline flow content can flow |
stearns@7201 | 294 | around the edge of the exclusion |
stearns@7201 | 295 | with the smallest available space |
stearns@7201 | 296 | within the flow content's containing block, |
stearns@7201 | 297 | and must leave the other edge |
ratan@5884 | 298 | of the exclusion empty. |
ratan@5884 | 299 | </dd> |
rossen@3643 | 300 | <dt><dfn title="'wrap-flow'!!'maximum'">maximum</dfn></dt> |
rossen@3643 | 301 | <dd> |
stearns@7201 | 302 | Inline flow content can flow |
stearns@7201 | 303 | around the edge of the exclusion |
stearns@7201 | 304 | with the largest available space |
stearns@7201 | 305 | within the flow content's containing block, |
stearns@7201 | 306 | and must leave the other edge |
ratan@5884 | 307 | of the exclusion empty. |
rossen@3643 | 308 | </dd> |
rossen@3643 | 309 | <dt><dfn title="'wrap-flow'!!'clear'">clear</dfn></dt> |
rossen@3643 | 310 | <dd> |
stearns@7201 | 311 | Inline flow content can only flow |
stearns@7201 | 312 | before and after the exclusion |
stearns@7201 | 313 | in the flow content's block direction |
stearns@7201 | 314 | and must leave the areas |
stearns@7201 | 315 | next to the start and end edges |
stearns@7201 | 316 | of the exclusion empty. |
rossen@3643 | 317 | </dd> |
rossen@3643 | 318 | </dl> |
rossen@3655 | 319 | |
vhardy@3659 | 320 | <p> |
vhardy@5412 | 321 | If the property's computed value is 'auto', the element does not become an |
vhardy@5412 | 322 | <span>exclusion</span>. |
vhardy@3659 | 323 | </p> |
vhardy@3659 | 324 | <p> |
ratan@5884 | 325 | Otherwise, a computed 'wrap-flow' property value of 'both', 'start', 'end', 'minimum', |
ratan@5884 | 326 | 'maximum' or 'clear' on an element makes that element an <span>exclusion element</a>. |
ratan@5884 | 327 | It's <span>exclusion shape</span> is contributed to its containing block's |
ratan@5884 | 328 | <span>wrapping context</span>, causing the containing block's descendants to wrap around |
stearns@6339 | 329 | its <span>exclusion area</span>. |
vhardy@3659 | 330 | </p> |
stearns@7201 | 331 | |
stearns@7201 | 332 | <div class="figure"> |
stearns@7201 | 333 | <img alt="LTR text wrapping on left edge, RTL text wrapping on right edge, and vertical text wrapping on top edge." src="images/exclusion-writing-modes.png" width="70%" /> |
stearns@7201 | 334 | <p class="caption">Exclusion with 'wrap-flow: start' interacting with various writing modes.</p> |
stearns@7201 | 335 | </div> |
stearns@7201 | 336 | |
stearns@7201 | 337 | <p>Determining the relevant edges of the exclusion depends on the <a href="http://www.w3.org/TR/css3-writing-modes/#text-flow">writing mode</a> [[!CSS3-WRITING-MODES]] of the content wrapping around the <span>exclusion area</span>. |
vhardy@5495 | 338 | |
vhardy@5495 | 339 | <p>An <span>exclusion element</span> establishes a |
vhardy@5495 | 340 | new <a href="">block formatting context</a> (see [[!CSS21]]) for its content.</p> |
rossen@3655 | 341 | |
vhardy@3707 | 342 | <div class="figure"> |
vhardy@4057 | 343 | <img alt="General illustration showing how exclusions combine" src="images/exclusions-illustration.png" width="70%" /> |
vhardy@3707 | 344 | <p class="caption">Combining exclusions</p> |
vhardy@3707 | 345 | </div> |
vhardy@3707 | 346 | |
rossen@4463 | 347 | <p> |
stearns@7201 | 348 | The above figure illustrates how exclusions are combined. |
stearns@7201 | 349 | The outermost box represents an element's content box. |
stearns@7201 | 350 | The A, B, C and D darker gray boxes represent exclusions |
stearns@7201 | 351 | in the element's <span>wrapping context</span>. |
stearns@7201 | 352 | A, B, C and D have their respective 'wrap-flow' |
stearns@7201 | 353 | computed to 'both', 'start', 'end' and 'clear' respectively. |
stearns@7201 | 354 | The lighter gray areas show the additional areas |
stearns@7201 | 355 | that are excluded for inline layout |
stearns@7201 | 356 | as a result of the 'wrap-flow'value. |
stearns@7201 | 357 | For example, the area to the right of 'B' |
stearns@7201 | 358 | cannot be used for inline layout |
stearns@7201 | 359 | of left-to-right writing mode content |
rossen@4463 | 360 | because the 'wrap-flow' for 'B' is 'start'. |
rossen@4463 | 361 | </p> |
rossen@4463 | 362 | <p> |
stearns@7201 | 363 | The background 'blue' area shows what areas are available |
stearns@7201 | 364 | for a left-to-right writing mode element's inline content layout. |
stearns@7201 | 365 | All areas represented with a light or dark shade of gray |
stearns@7201 | 366 | are not available for (left-to-right writing mode) inline content layout. |
rossen@4463 | 367 | </p> |
rossen@4463 | 368 | |
stearns@5636 | 369 | <div class="issue-marker wrapper"> |
rossen@4463 | 370 | <div class="issue-marker" data-bug_id="15084" data-bug_status="NEW"> |
vhardy@5750 | 371 | <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15084">Issue-15084</a> |
rossen@4463 | 372 | <div class="issue-details"> |
rossen@4463 | 373 | <p class="short-desc">Fluidity of the layout with respect to different amounts of content</p> |
rossen@4463 | 374 | </div> |
rossen@4463 | 375 | </div> |
stearns@5636 | 376 | </div> |
vhardy@4045 | 377 | |
rossen@3643 | 378 | <div class="example"> |
rossen@3643 | 379 | <p> |
stearns@6358 | 380 | The 'wrap-flow' property values applied to exclusions as grid items. |
rossen@3643 | 381 | </p> |
vhardy@3659 | 382 | <code class="html"><pre> |
vhardy@5412 | 383 | |
vhardy@5412 | 384 | <div id="grid"> |
stearns@6358 | 385 | <div id="top-right" class="exclusion"></div> |
stearns@6358 | 386 | <div id="bottom-left" class="exclusion"></div> |
vhardy@5412 | 387 | <div id="content">Lorem ipsum…</div> |
vhardy@5412 | 388 | </div> |
vhardy@5412 | 389 | |
rossen@3643 | 390 | <style type="text/css"> |
vhardy@5412 | 391 | #grid { |
vhardy@5622 | 392 | width: 30em; |
vhardy@5622 | 393 | height: 30em; |
vhardy@5412 | 394 | display: grid; |
stearns@6358 | 395 | grid-columns: 25% 25% 25% 25%; |
stearns@6358 | 396 | grid-rows: 25% 25% 25% 25%; |
stearns@6358 | 397 | |
stearns@6358 | 398 | #top-right { |
stearns@6358 | 399 | grid-column: 3; |
stearns@6358 | 400 | grid-row: 2; |
vhardy@5412 | 401 | } |
vhardy@5412 | 402 | |
stearns@6358 | 403 | #bottom-left { |
vhardy@5412 | 404 | grid-column: 2; |
stearns@6358 | 405 | grid-row: 3; |
stearns@6358 | 406 | } |
stearns@6358 | 407 | |
stearns@6358 | 408 | .exclusion { |
vhardy@5412 | 409 | wrap-flow: <see below> |
vhardy@5412 | 410 | } |
vhardy@5412 | 411 | |
vhardy@5412 | 412 | #content { |
vhardy@5412 | 413 | grid-row: 1; |
stearns@6358 | 414 | grid-row-span: 4; |
vhardy@5412 | 415 | grid-column: 1; |
stearns@6358 | 416 | grid-column-span: 4; |
vhardy@5412 | 417 | } |
rossen@3643 | 418 | </style> |
vhardy@3659 | 419 | </pre></code> |
vhardy@5622 | 420 | <p>The following figures illustrate the visual rendering for different values |
vhardy@5622 | 421 | of the 'wrap-flow' property. The gray grid lines are marking the grid cells. and the |
vhardy@5622 | 422 | blue area is the exclusion box (positioned by the grid).</p> |
rossen@3643 | 423 | <table class="example-table"> |
rossen@3643 | 424 | <tr> |
stearns@6359 | 425 | <td><code class="html">.exclusion{ wrap-flow: auto; }</code></td> |
stearns@6359 | 426 | <td><code class="html">.exclusion{ wrap-flow: both; }</code></td> |
rossen@3643 | 427 | </tr> |
rossen@3643 | 428 | <tr> |
rossen@3643 | 429 | <td><img src="images/exclusion_wrap_side_auto.png" alt="Example rendering for wrap-side: auto" /></td> |
rossen@3643 | 430 | <td><img src="images/exclusion_wrap_side_both.png" alt="Example rendering for wrap-side: both" /></td> |
rossen@3643 | 431 | </tr> |
rossen@3643 | 432 | <tr> |
stearns@6359 | 433 | <td><code class="html">.exclusion{ wrap-flow: start; }</code></td> |
stearns@6359 | 434 | <td><code class="html">.exclusion{ wrap-flow: end; }</code></td> |
rossen@3643 | 435 | </tr> |
rossen@3643 | 436 | <tr> |
rossen@3884 | 437 | <td><img src="images/exclusion_wrap_side_left.png" alt="Example rendering for wrap-side: start" /></td> |
rossen@3884 | 438 | <td><img src="images/exclusion_wrap_side_right.png" alt="Example rendering for wrap-side: end" /></td> |
rossen@3643 | 439 | </tr> |
rossen@3643 | 440 | <tr> |
stearns@6359 | 441 | <td><code class="html">.exclusion{ wrap-flow: minimum; }</code></td> |
stearns@6359 | 442 | <td><code class="html">.exclusion{ wrap-flow: maximum; }</code></td> |
rossen@3643 | 443 | </tr> |
rossen@3643 | 444 | <tr> |
ratan@5886 | 445 | <td><img src="images/exclusion_wrap_side_minimum.png" alt="Example rendering for wrap-side: minimum" /></td> |
vhardy@5622 | 446 | <td><img src="images/exclusion_wrap_side_maximum.png" alt="Example rendering for wrap-side: maximum" /></td> |
ratan@5886 | 447 | </tr> |
ratan@5886 | 448 | <tr> |
stearns@6359 | 449 | <td><code class="html">.exclusion{ wrap-flow: clear; }</code></td> |
ratan@5886 | 450 | <td></td> |
ratan@5886 | 451 | </tr> |
ratan@5886 | 452 | <tr> |
ratan@5886 | 453 | <td><img src="images/exclusion_wrap_side_clear.png" alt="Example rendering for wrap-side: clear" /></td> |
ratan@5886 | 454 | <td></td> |
rossen@3643 | 455 | </tr> |
rossen@3643 | 456 | </table> |
rossen@3643 | 457 | </div> |
vhardy@5622 | 458 | |
rossen@3643 | 459 | <!-- End section "wrap-flow Property" --> |
rossen@3643 | 460 | <!-- End section "Declaring Exclusions" --> |
vhardy@3659 | 461 | |
vhardy@5412 | 462 | <h3 id="scope-and-effect-of-exclusions">Scope and effect of exclusions</h3> |
rossen@3643 | 463 | <p> |
stearns@6341 | 464 | An <span>exclusion</span> affects |
stearns@6341 | 465 | the inline flow content descended |
stearns@6341 | 466 | from the exclusion's containing block |
stearns@6341 | 467 | (defined in <a href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details"> |
stearns@6341 | 468 | CSS 2.1 10.1</a>) |
stearns@6341 | 469 | and that of all descendant elements |
stearns@6341 | 470 | of the same containing block. |
stearns@6341 | 471 | All inline flow content |
stearns@6341 | 472 | inside the containing block |
stearns@6341 | 473 | of the exclusions is affected. |
stearns@6341 | 474 | To stop the effect of exclusions |
stearns@6341 | 475 | defined outside an element, |
stearns@6341 | 476 | the 'wrap-through' property can be used |
stearns@6341 | 477 | (see the <a href="#propagation-of-exclusions">propagation of exclusions</a> |
vhardy@5412 | 478 | section below). |
vhardy@5412 | 479 | </p> |
vhardy@5412 | 480 | |
vhardy@5412 | 481 | <p> |
stearns@6341 | 482 | As a reminder, |
stearns@6341 | 483 | for exclusions with 'position:fixed', |
stearns@6341 | 484 | the containing block is that |
stearns@6341 | 485 | of the root element. |
rossen@3643 | 486 | </p> |
vhardy@3731 | 487 | |
vhardy@3731 | 488 | <!-- End section "Scope and Effect of Exclusions" --> |
rossen@3643 | 489 | |
rossen@3643 | 490 | <h3 id="propagation-of-exclusions">Propagation of Exclusions</h3> |
rossen@3643 | 491 | <p> |
vhardy@3659 | 492 | By default, an element inherits its parent <span>wrapping context</span>. In other words |
vhardy@3659 | 493 | it is subject to the exclusions defined <span title="outside-inside">outside</sapn> the element. |
rossen@3643 | 494 | </p> |
vhardy@3659 | 495 | <p>Setting the 'wrap-through' property to 'none' prevents an element from inheriting its parent |
vhardy@5488 | 496 | <span>wrapping context</span>. In other words, exclusions defined 'outside' the element, have not effect |
vhardy@3659 | 497 | on the element's children layout. |
vhardy@3659 | 498 | </p> |
vhardy@3659 | 499 | <div class="note"> |
vhardy@3659 | 500 | Exclusions defined by an element's descendants still contribute to their containing block's |
vhardy@3659 | 501 | <span>wrapping context</span>. If that containing block is a child of an element with 'wrap-through' |
stearns@6905 | 502 | computes to none, or the element itself, then exclusion still have an effect on the children of that |
vhardy@3659 | 503 | containing block element. |
vhardy@3659 | 504 | </div> |
vhardy@2780 | 505 | |
rossen@3643 | 506 | <h4 id="wrap-through-property">The 'wrap-through' Property</h4> |
vhardy@4045 | 507 | |
rossen@3643 | 508 | <table class="propdef"> |
rossen@3643 | 509 | <tr> |
rossen@3643 | 510 | <th>Name:</th> |
rossen@3643 | 511 | <td><dfn title="'wrap-through'">wrap-through</dfn></td> |
rossen@3643 | 512 | </tr> |
rossen@3643 | 513 | <tr> |
rossen@3643 | 514 | <th>Value:</th> |
rossen@3643 | 515 | <td><var>wrap</var> | <var>none</var></td> |
rossen@3643 | 516 | </tr> |
rossen@3643 | 517 | <tr> |
rossen@3643 | 518 | <th>Initial:</th> |
rossen@3643 | 519 | <td>wrap</td> |
rossen@3643 | 520 | </tr> |
rossen@3643 | 521 | <tr> |
rossen@3643 | 522 | <th>Applies to:</th> |
rossen@3643 | 523 | <td>block-level elements</td> |
rossen@3643 | 524 | </tr> |
rossen@3643 | 525 | <tr> |
rossen@3643 | 526 | <th>Inherited:</th> |
rossen@3643 | 527 | <td>no</td> |
rossen@3643 | 528 | </tr> |
rossen@3643 | 529 | <tr> |
rossen@3643 | 530 | <th>Percentages:</th> |
rossen@3643 | 531 | <td>N/A</td> |
rossen@3643 | 532 | </tr> |
rossen@3643 | 533 | <tr> |
rossen@3643 | 534 | <th>Media:</th> |
rossen@3643 | 535 | <td>visual</td> |
rossen@3643 | 536 | </tr> |
rossen@3643 | 537 | <tr> |
rossen@3643 | 538 | <th>Computed value:</th> |
rossen@3643 | 539 | <td>as specified</td> |
rossen@3643 | 540 | </tr> |
rossen@3643 | 541 | </table> |
vhardy@2780 | 542 | |
rossen@3643 | 543 | <p>The values of this property have the following meanings:</p> |
rossen@3643 | 544 | <dl> |
rossen@3643 | 545 | <dt><dfn title="'wrap-through'!!'wrap'">wrap</dfn></dt> |
rossen@3643 | 546 | <dd> |
vhardy@3659 | 547 | The element inherits its parent node's <span>wrapping context</span>. Its descendant |
vhardy@3659 | 548 | inline content wraps around exclusions defined <span title="outside-inside">outside</span> |
vhardy@3659 | 549 | the element. |
rossen@3643 | 550 | </dd> |
rossen@3643 | 551 | </dl> |
rossen@3643 | 552 | <dl> |
rossen@3643 | 553 | <dt><dfn title="'wrap-through'!!'none'">none</dfn></dt> |
rossen@3643 | 554 | <dd> |
vhardy@3659 | 555 | The element does not inherit its parent node's <span>wrapping context</span>. Its |
vhardy@3659 | 556 | descendants are only subject to exclusion shapes defined <span title="outside-inside">inside</span> |
vhardy@3659 | 557 | the element. |
rossen@3643 | 558 | </dd> |
rossen@3643 | 559 | </dl> |
rossen@3643 | 560 | <div class="example"> |
rossen@3643 | 561 | <p> |
rossen@3655 | 562 | Using the 'wrap-through' property to control the effect of exclusions. |
rossen@3643 | 563 | </p> |
rossen@3643 | 564 | <pre><code class="html"> |
vhardy@5412 | 565 | |
vhardy@5412 | 566 | <style type="text/css"> |
vhardy@5412 | 567 | #grid { |
vhardy@5412 | 568 | display: grid; |
vhardy@5412 | 569 | grid-columns: 25% 50% 25%; |
vhardy@5412 | 570 | grid-rows: 25% 25% 25% 25%; |
vhardy@5412 | 571 | } |
vhardy@5412 | 572 | |
vhardy@5412 | 573 | #exclusion { |
vhardy@5412 | 574 | grid-row: 2; |
vhardy@5412 | 575 | grid-row-span: 2; |
vhardy@5412 | 576 | grid-column: 2; |
vhardy@5412 | 577 | wrap-flow: <see below> |
vhardy@5412 | 578 | } |
vhardy@5412 | 579 | |
vhardy@5412 | 580 | #rowA, #rowB { |
vhardy@5412 | 581 | grid-row-span: 2; |
vhardy@5412 | 582 | grid-column: 1; |
vhardy@5412 | 583 | grid-column-span: 3; |
vhardy@5412 | 584 | } |
vhardy@5412 | 585 | |
vhardy@5412 | 586 | #rowA { |
vhardy@5412 | 587 | grid-row: 1; |
vhardy@5412 | 588 | } |
vhardy@5412 | 589 | |
vhardy@5412 | 590 | #rowB { |
vhardy@5412 | 591 | grid-row: 3; |
vhardy@5412 | 592 | } |
vhardy@5412 | 593 | </style> |
vhardy@5412 | 594 | |
rossen@3643 | 595 | <style type="text/css"> |
rossen@3643 | 596 | .exclusion { |
rossen@3643 | 597 | wrap-flow: both; |
rossen@3643 | 598 | position: absolute; |
vhardy@5412 | 599 | left: 20%; |
vhardy@5412 | 600 | top: 20%; |
vhardy@5412 | 601 | width: 50%; |
vhardy@5412 | 602 | height: 50%; |
rossen@3643 | 603 | background-color: rgba(220, 230, 242, 0.5); |
rossen@3643 | 604 | } |
rossen@3643 | 605 | </style> |
vhardy@2780 | 606 | |
vhardy@5412 | 607 | <div id="grid"> |
rossen@3643 | 608 | <div class=”exclusion”></div> |
vhardy@5412 | 609 | <div id="rowA" style=”wrap-through: wrap;”> Lorem ipsum dolor sit amet...</div> |
vhardy@5412 | 610 | <div id="rowB" style=”wrap-through: none;”> Lorem ipsum dolor sit amet...</div> |
rossen@3643 | 611 | </div> |
rossen@3643 | 612 | </code></pre> |
vhardy@2780 | 613 | |
rossen@3716 | 614 | <img class="singleImgExample" src="images/exclusion_wrap_through.png" alt="Example rendering of wrap-through: wrap | none" style="max-width:40%"/> |
rossen@3643 | 615 | </div> |
rossen@3643 | 616 | <!-- End section "wrap-through property" --> |
vhardy@3707 | 617 | |
stearns@6601 | 618 | <!-- removed as wrap-margin and wrap-padding changed to shape-margin and shape-padding |
vhardy@3707 | 619 | |
rossen@3643 | 620 | <h4 id="wrap-shorthand-property">The 'wrap' Shorthand Property</h4> |
rossen@3643 | 621 | <table class="propdef"> |
rossen@3643 | 622 | <tr> |
rossen@3643 | 623 | <th>Name:</th> |
rossen@3643 | 624 | <td><dfn title="'wrap'">wrap</dfn></td> |
rossen@3643 | 625 | </tr> |
rossen@3643 | 626 | <tr> |
rossen@3643 | 627 | <th>Value:</th> |
rossen@3643 | 628 | <td><var><wrap-flow></var> || <var><wrap-margin></var> [ / <var><wrap-padding></var>]</td> |
rossen@3643 | 629 | </tr> |
rossen@3643 | 630 | <tr> |
rossen@3643 | 631 | <th>Initial:</th> |
rossen@3643 | 632 | <td>see individual properties</td> |
rossen@3643 | 633 | </tr> |
rossen@3643 | 634 | <tr> |
rossen@3643 | 635 | <th>Applies to:</th> |
rossen@3643 | 636 | <td>block-level elements</td> |
rossen@3643 | 637 | </tr> |
rossen@3643 | 638 | <tr> |
rossen@3643 | 639 | <th>Inherited:</th> |
rossen@3643 | 640 | <td>no</td> |
rossen@3643 | 641 | </tr> |
rossen@3643 | 642 | <tr> |
rossen@3643 | 643 | <th>Percentages:</th> |
rossen@3643 | 644 | <td>N/A</td> |
rossen@3643 | 645 | </tr> |
rossen@3643 | 646 | <tr> |
rossen@3643 | 647 | <th>Media:</th> |
rossen@3643 | 648 | <td>visual</td> |
rossen@3643 | 649 | </tr> |
rossen@3643 | 650 | <tr> |
rossen@3643 | 651 | <th>Computed value:</th> |
rossen@3643 | 652 | <td>see individual properties</td> |
rossen@3643 | 653 | </tr> |
rossen@3643 | 654 | </table> |
rossen@3643 | 655 | <p> |
rossen@3655 | 656 | The 'wrap' property is a shorthand property for setting the exclusions properties |
rossen@3643 | 657 | at the same place in the style sheet. |
rossen@3643 | 658 | </p> |
stearns@6601 | 659 | --> |
rossen@3643 | 660 | <!-- End section "wrap shorthand property" --> |
rossen@3643 | 661 | <!-- End section "Propagation of Exclusions" --> |
rossen@3643 | 662 | |
vhardy@3659 | 663 | <h3 id="exclusions-order">Exclusions order</h3> |
rossen@3643 | 664 | <p> |
rossen@3716 | 665 | Exclusions follow the painting order (See [[!CSS21]] Appendix E). Exclusions are |
rossen@3716 | 666 | applied in reverse to the document order in which they are defined. The last exclusion |
rossen@3716 | 667 | appears on top of all other exclusion, thus it affects the inline flow content of |
rossen@3716 | 668 | all other preceding exclusions or elements descendant of the same containing block. |
vhardy@5488 | 669 | The 'z-index' property can be used to change the ordering of |
vhardy@5622 | 670 | <a href="http://www.w3.org/TR/CSS2/visuren.html#choose-position">positioned</a> exclusion |
vhardy@5488 | 671 | boxes (see [[!CSS21]]). Statically positioned exclusions are not affected by the |
vhardy@5488 | 672 | 'z-index' property and thus follow the painting order. |
rossen@3643 | 673 | </p> |
stearns@5636 | 674 | |
stearns@5636 | 675 | <div class="issue-marker" data-bug_id="16474" data-bug_status="NEW"> |
vhardy@5750 | 676 | <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16474">Issue-16474</a> |
stearns@5636 | 677 | <div class="issue-details"> |
stearns@5636 | 678 | <p class="short-desc">Improve Example 3 about exclusion order</p> |
stearns@5636 | 679 | </div> |
stearns@5636 | 680 | </div> |
stearns@5636 | 681 | |
rossen@3643 | 682 | <div class="example"> |
rossen@3655 | 683 | <p>Ordering of exclusions.</p> |
rossen@3643 | 684 | <pre><code class="html"> |
rossen@3643 | 685 | <style type="text/css"> |
rossen@3643 | 686 | .exclusion { |
rossen@3643 | 687 | wrap-flow: both; |
rossen@3643 | 688 | position: absolute; |
rossen@3643 | 689 | width: 50%; |
rossen@4361 | 690 | height: auto; |
rossen@3643 | 691 | } |
rossen@3643 | 692 | </style> |
vhardy@2780 | 693 | |
rossen@3643 | 694 | <div class=”exclusion” style=”top: 0px; left: 0px;”> |
rossen@3643 | 695 | Lorem ipsum dolor sit amet... |
rossen@3643 | 696 | </div> |
rossen@3643 | 697 | <div id="orderedExclusion" class=”exclusion” style=”top: 25%; left: 25%;”> |
rossen@3643 | 698 | Lorem ipsum dolor sit amet... |
rossen@3643 | 699 | </div> |
rossen@3643 | 700 | <div class=”exclusion” style=”top: 50%; left: 50%;”> |
rossen@3643 | 701 | Lorem ipsum dolor sit amet... |
rossen@3643 | 702 | </div> |
rossen@3643 | 703 | </code></pre> |
vhardy@2780 | 704 | |
rossen@3643 | 705 | <table class="example-table"> |
rossen@3643 | 706 | <tr> |
rossen@3643 | 707 | <td style="width:50%"><code class="html">#orderedExclusion{ z-index: auto; }</code></td> |
rossen@3643 | 708 | <td style="width:50%"><code class="html">#orderedExclusion{ z-index: 1; }</code></td> |
rossen@3643 | 709 | </tr> |
rossen@3643 | 710 | <tr> |
rossen@3643 | 711 | <td><img class="singleImgExample" src="images/exclusion_ordering.png" alt="Example rendering of default exclusion ordering." /></td> |
rossen@3643 | 712 | <td><img class="singleImgExample" src="images/exclusion_ordering_z_order.png" alt="Example rendering of default exclusion ordering." /></td> |
rossen@3643 | 713 | </tr> |
rossen@3643 | 714 | </table> |
vhardy@2780 | 715 | |
rossen@3643 | 716 | </div> |
rossen@3643 | 717 | <!-- End section "Order of Exclusions" --> |
rossen@4463 | 718 | |
stearns@5628 | 719 | <div class="issue-marker wrapper"> |
rossen@4463 | 720 | <div class="issue-marker" data-bug_id="15183" data-bug_status="NEW"> |
vhardy@5750 | 721 | <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15183">Issue-15183</a> |
rossen@4463 | 722 | <div class="issue-details"> |
rossen@4463 | 723 | <p class="short-desc">Is the CSS exclusions processing model incorrect?</p> |
rossen@4463 | 724 | </div> |
stearns@6708 | 725 | </div> |
stearns@6708 | 726 | </div> |
rossen@4116 | 727 | |
stearns@6708 | 728 | <div class="issue"> |
stearns@6708 | 729 | |
stearns@6708 | 730 | <p>The current draft provides a model for exclusions |
stearns@6708 | 731 | without a collision-avoidance model. |
stearns@6708 | 732 | The existing exclusion model in CSS uses floats, |
stearns@6708 | 733 | which have both exclusion and collision-avoidance behavior. |
stearns@6708 | 734 | Concerns have been raised that allowing exclusions |
stearns@6708 | 735 | without collision avoidance could be harmful, |
stearns@6708 | 736 | particularly with absolutely-positioned elements. |
stearns@6708 | 737 | Three options should be considered:<p> |
stearns@6708 | 738 | <ol> |
stearns@6708 | 739 | <li>Allow exclusions in positioning schemes |
stearns@6708 | 740 | with no collision avoidance.</li> |
stearns@6708 | 741 | <li>Disallow exclusions in positioning schemes |
stearns@6708 | 742 | with no collision avoidance.</li> |
stearns@6708 | 743 | <li>Define collision-avoidance behavior |
stearns@6708 | 744 | for positioning schemes without it, |
stearns@6708 | 745 | and use this behavior by default with exclusions.</li> |
stearns@6708 | 746 | <ol> |
stearns@6708 | 747 | </div> |
vhardy@3659 | 748 | |
vhardy@4473 | 749 | <h3 id="exclusions-processing-model">Processing model</h3> |
vhardy@5412 | 750 | |
vhardy@5412 | 751 | <h4 id="exclusions-processing-model-description">Description</h4> |
vhardy@5412 | 752 | |
vhardy@5412 | 753 | <p>Applying exclusions is a two-step process:</p> |
vhardy@5412 | 754 | |
vhardy@5412 | 755 | <ul> |
vhardy@5488 | 756 | <li><strong>Step 1</strong>: resolve exclusion boxes belonging to each <span>wrapping context</span></li> |
stearns@6097 | 757 | <li><strong>Step 2</strong>: resolve <span>wrapping context</span>s and lay out each containing block in turn: |
vhardy@5412 | 758 | <ul> |
vhardy@5488 | 759 | <li><strong>Step 2-A</strong>: resolve the position and size of exclusion boxes</li> |
stearns@6339 | 760 | <li><strong>Step 2-B</strong>: lay out containing block, wrapping around <span>exclusion areas</span></li> |
vhardy@5412 | 761 | </ul> |
vhardy@5412 | 762 | </li> |
vhardy@5412 | 763 | </ul> |
vhardy@5412 | 764 | |
vhardy@5488 | 765 | <h4 id="step-1-resolve-exclusion-boxes-belonging-to-each-wrapping-context">Step 1: resolve exclusion boxes belonging to each <span>wrapping context</span></h4> |
vhardy@5412 | 766 | |
vhardy@5412 | 767 | <p>In this step, the user agent determines which <a href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">containing block</a> each |
vhardy@5412 | 768 | <span>exclusion area</span> belongs to. This is a simple step, based on the |
vhardy@5412 | 769 | definition of containing blocks and elements with a computed value for 'wrap-flow' |
vhardy@5488 | 770 | that is not <code class="css">auto</code>.</p> |
vhardy@5412 | 771 | |
stearns@6097 | 772 | <h4 id="step-2-resolve-wrapping-contexts-layout-containing-blocks">Step 2: resolve wrapping contexts and lay out containing blocks</h4> |
vhardy@4473 | 773 | |
vhardy@5412 | 774 | <p>In this step, starting from the |
vhardy@5488 | 775 | top of the <a href="http://www.w3.org/TR/CSS2/visuren.html#z-index">rendering tree</a> (see [[!CSS21]]), |
vhardy@5488 | 776 | the the agent processes each containing block in two sub-steps.</p> |
vhardy@5412 | 777 | |
vhardy@5488 | 778 | <h4 id="step-2-A-resolve-exclusions-position-and-size">Step 2-A: resolve the position and size of exclusion boxes</h4> |
vhardy@5412 | 779 | |
stearns@6097 | 780 | <p>Resolving the position and size |
stearns@6097 | 781 | of <span>exclusion boxes</span> |
stearns@6097 | 782 | in the <span>wrapping context</span> |
stearns@6097 | 783 | may or may not require a layout. |
stearns@6097 | 784 | For example, |
stearns@6097 | 785 | if an <span>exclusion box</span> |
stearns@6097 | 786 | is absolutely positioned and sized, |
stearns@6097 | 787 | a layout may not be needed |
stearns@6097 | 788 | to resolve its position and size. |
stearns@6097 | 789 | In other situations, |
stearns@6097 | 790 | laying out the containing block's content is required.</p> |
vhardy@5412 | 791 | |
stearns@6097 | 792 | <p>When a layout is required, |
stearns@6097 | 793 | it is carried out |
stearns@6097 | 794 | without applying any <span>exclusion area</span>. |
stearns@6097 | 795 | In other words, |
stearns@6097 | 796 | the containing block is laid out |
stearns@6097 | 797 | without a <span>wrapping context</span>. </p> |
vhardy@5412 | 798 | |
vhardy@5412 | 799 | <p>Step 2-A yields a position and size |
stearns@6097 | 800 | for all <span>exclusion boxes</span> |
stearns@6097 | 801 | in the <span>wrapping context</span>. |
stearns@6097 | 802 | Each exclusion box is processed in turn, |
stearns@6097 | 803 | starting from the top-most, |
stearns@6097 | 804 | and each <span>exclusion area</span> |
stearns@6097 | 805 | is computed and contributed |
stearns@6097 | 806 | to the <a href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">containing block's</a> |
stearns@6097 | 807 | <span>wrapping context</span>. </p> |
vhardy@5412 | 808 | |
stearns@6097 | 809 | <p>Scrolling is ignored in this step |
stearns@6097 | 810 | when resolving the position and size |
stearns@6097 | 811 | of 'position:fixed' <span>exclusion boxes</span>.</p> |
stearns@6097 | 812 | |
stearns@6097 | 813 | <p>Once the <a href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">containing block's</a> |
stearns@6097 | 814 | <span>wrapping context</span> is computed, |
stearns@6097 | 815 | all <span>exclusion boxes</span> |
stearns@6097 | 816 | in that <span>wrapping context</span> |
stearns@6097 | 817 | are removed from the normal flow.</p> |
stearns@6097 | 818 | |
stearns@6097 | 819 | <h4 id="step-2-B-layout-containing-block-applying-wrapping">Step 2-B: lay out containing block applying wrapping</h4> |
vhardy@5412 | 820 | |
stearns@6097 | 821 | <p>Finally, the content |
stearns@6097 | 822 | of the containing block is laid out, |
stearns@6097 | 823 | with the inline content wrapping around |
stearns@6097 | 824 | the <span>wrapping content</span>'s |
stearns@6097 | 825 | <span>exclusion areas</span> |
stearns@6097 | 826 | (which may be different |
stearns@6097 | 827 | from the <span>exclusion box</span> |
vhardy@5488 | 828 | because of the 'shape-outside' property).</p> |
vhardy@5488 | 829 | |
vhardy@5488 | 830 | <p>When the containing block itself is an <span>exclusion box</span>, then |
stearns@5633 | 831 | rules on <a href="#exclusions-order">exclusions order</a> define which exclusions |
vhardy@5488 | 832 | affect the inline and descendant content of the box.</p> |
vhardy@5412 | 833 | |
vhardy@4473 | 834 | <h4 id="exclusions-processing-model-example">Example</h4> |
vhardy@4473 | 835 | |
vhardy@4473 | 836 | <p>This section illustrates the exclusions processing model with an example. It is meant |
vhardy@4473 | 837 | to be simple. Yet, it contains enough complexity to address the issues of |
vhardy@4473 | 838 | layout dependencies and re-layout.</p> |
vhardy@4473 | 839 | |
vhardy@4473 | 840 | |
vhardy@4473 | 841 | <p>The code snippet in the following example has two exclusions affecting |
vhardy@5125 | 842 | the document's inline content.</p> |
vhardy@4473 | 843 | |
vhardy@4473 | 844 | <div class="example"> |
vhardy@5488 | 845 | <pre class="html"><html> |
vhardy@5622 | 846 | <style> |
vhardy@5622 | 847 | #d1 { |
vhardy@5622 | 848 | position:relative; |
vhardy@5622 | 849 | height: auto; |
vhardy@5622 | 850 | color: #46A4E9; |
vhardy@5622 | 851 | border: 1px solid gray; |
vhardy@5622 | 852 | } |
vhardy@5622 | 853 | |
vhardy@5622 | 854 | #e1 { |
stearns@6450 | 855 | wrap-flow: both; |
vhardy@5622 | 856 | position: absolute; |
vhardy@5622 | 857 | left: 50%; |
vhardy@5622 | 858 | top: 50%; |
vhardy@5622 | 859 | width: 40%; |
vhardy@5622 | 860 | height: 40%; |
vhardy@5622 | 861 | border: 1px solid red; |
vhardy@5622 | 862 | margin-left: -20%; |
vhardy@5622 | 863 | margin-top: -20%; |
vhardy@5622 | 864 | } |
vhardy@5622 | 865 | |
vhardy@5622 | 866 | #d2 { |
vhardy@5622 | 867 | position: static; |
vhardy@5622 | 868 | width: 100%; |
vhardy@5622 | 869 | height: auto; |
vhardy@5622 | 870 | color: #808080; |
vhardy@5622 | 871 | } |
vhardy@5622 | 872 | |
vhardy@5622 | 873 | #e2 { |
stearns@6450 | 874 | wrap-flow: both; |
vhardy@5622 | 875 | position: absolute; |
vhardy@5622 | 876 | right: 5ex; |
vhardy@5622 | 877 | top: 1em; |
vhardy@5622 | 878 | width: 12ex; |
vhardy@5622 | 879 | height: 10em; |
vhardy@5622 | 880 | border: 1px solid lime; |
vhardy@5622 | 881 | } |
vhardy@5622 | 882 | </style> |
vhardy@5622 | 883 | <body> |
vhardy@5622 | 884 | <div id="d1"> |
vhardy@5622 | 885 | Lorem ipsusm ... |
vhardy@5622 | 886 | <p id="e1"></p> |
vhardy@5622 | 887 | </div> |
vhardy@5622 | 888 | <div id="d2"> |
vhardy@5622 | 889 | Lorem ipsusm ... |
vhardy@5622 | 890 | <p id="e2" ></p> |
vhardy@5622 | 891 | </div> |
vhardy@5622 | 892 | </body> |
vhardy@5488 | 893 | </html></pre> |
vhardy@4473 | 894 | </div> |
vhardy@5118 | 895 | <p>The following figures illustrate:</p> |
vhardy@5118 | 896 | |
vhardy@5118 | 897 | <ul> |
vhardy@5118 | 898 | <li>the document's DOM tree</li> |
vhardy@5125 | 899 | <li>the layout tree of generated block boxes</p> |
vhardy@5118 | 900 | </ul> |
vhardy@5118 | 901 | |
vhardy@4473 | 902 | <div class="figure"> |
stearns@5632 | 903 | <img src="images/processing-model-example-dom.svg" width="200" |
stearns@5632 | 904 | alt="DOM tree nodes"/> |
vhardy@5118 | 905 | <p class="caption">DOM tree</p> |
vhardy@4473 | 906 | </div> |
vhardy@4473 | 907 | |
vhardy@4473 | 908 | <div class="figure"> |
stearns@5632 | 909 | <img src="images/processing-model-example-layout-tree.svg" width="350" |
stearns@5632 | 910 | alt="Layout tree boxes"/> |
vhardy@5125 | 911 | <p class="caption">Layout tree of generated block boxes</p> |
vhardy@4473 | 912 | </div> |
vhardy@4473 | 913 | |
vhardy@5488 | 914 | <h5>Step 1: resolve exclusion boxes belonging to each <span>wrapping context</span></h5> |
vhardy@5412 | 915 | |
vhardy@4473 | 916 | <p>The figures illustrate how the boxes corresponding to the element sometimes |
vhardy@4473 | 917 | have a different containment hierarchy in the layout tree than in the DOM tree. |
vhardy@5118 | 918 | For example, the box generated by <code class="idl">e1</code> is positioned in |
vhardy@5488 | 919 | its containing block's box, which is the <code class="idl">d1-box</code>, because |
vhardy@4473 | 920 | <code class="idl">e1</code> is absolutely positioned and <code class="idl">d1</code> |
vhardy@4473 | 921 | is relatively positioned. However, while <code class="idl">e2</code> is also absolutely |
vhardy@4473 | 922 | positioned, its containing block is the initial containing block (ICB). See the |
vhardy@4473 | 923 | section 10.1 of the CSS 2.1 specification ([[!CSS21]]) for details.</p> |
vhardy@4473 | 924 | |
vhardy@5118 | 925 | <p>As a result of the computation of containing blocks for the tree, the boxes belonging |
vhardy@5488 | 926 | to the <span>wrapping context</span>s of all the elements can be determined:</p> |
vhardy@4473 | 927 | |
vhardy@4473 | 928 | <ul> |
vhardy@5488 | 929 | <li>The <span>wrapping context</span> for the html element contains the <code class="idl">e2</code> box: WC-1 (Wrapping Context 1)</li> |
vhardy@5488 | 930 | <li>The <span>wrapping context</span> for the body element inherits the html element's <span>wrapping context</span>: WC-1</li> |
vhardy@5488 | 931 | <li>The <span>wrapping context</span> for <code class="idl">d1</code> inherits the body element's |
vhardy@5488 | 932 | <span>wrapping context</span> and adds the <code class="idl">e1-box</code> to it. So the wrapping |
vhardy@5488 | 933 | context is made of both the <code class="idl">e1-box</code> and the |
vhardy@5488 | 934 | <code class="idl">e2-box</code>: WC-2</li> |
vhardy@5488 | 935 | <li>The <span>wrapping context</span> for <code class="idl">d2</code> inherits the body element's |
vhardy@5488 | 936 | <span>wrapping context</span>: WC-1</li> |
vhardy@4473 | 937 | </ul> |
vhardy@4473 | 938 | |
stearns@6097 | 939 | <h5>Step 2: resolve wrapping contexts and lay out containing blocks</h5> |
vhardy@5118 | 940 | |
vhardy@5118 | 941 | <p>In this step, each containing block is processed in turn. For each containing block, |
vhardy@5118 | 942 | we (conceptually) go through two phases:</p> |
vhardy@5118 | 943 | <ol> |
vhardy@5488 | 944 | <li>resolve the <span>wrapping context</span>: resolve the position and size of its exclusions</li> |
stearns@6097 | 945 | <li>lay out the containing block</li> |
vhardy@5118 | 946 | </ol> |
vhardy@5118 | 947 | |
vhardy@5118 | 948 | <p>In our example, this breaks down to:</p> |
vhardy@5118 | 949 | <ol> |
vhardy@5125 | 950 | <li>resolve the position and size of the exclusions belonging to WC-1: RWC-1 (Resolved Wrapping Context 1).</li> |
stearns@6097 | 951 | <li>lay out the initial containing block (i.e., lay out its content): |
vhardy@5118 | 952 | <ol> |
vhardy@5488 | 953 | <li>resolve the html element's <span>wrapping context</span>: RWC-1</li> |
stearns@6097 | 954 | <li>lay out the html element: |
vhardy@5118 | 955 | <ol> |
vhardy@5488 | 956 | <li>resolve the body element's <span>wrapping context</span>: RWC-1</li> |
stearns@6097 | 957 | <li>lay out the body element: |
vhardy@5118 | 958 | <ol> |
vhardy@5488 | 959 | <li>resolve the <code class="idl">d1</code> element's <span>wrapping context</span>: RWC-2</li> |
stearns@6097 | 960 | <li>lay out the <code class="idl">d1</code> element</li> |
vhardy@5488 | 961 | <li>resolve the <code class="idl">d2</code> element's <span>wrapping context</span>: RWC-1</li> |
stearns@6097 | 962 | <li>lay out the <code class="idl">d2</code> element</li> |
vhardy@5118 | 963 | </ol> |
vhardy@5118 | 964 | </li> |
vhardy@5118 | 965 | </ol> |
vhardy@5118 | 966 | </li> |
vhardy@5118 | 967 | </ol> |
vhardy@5118 | 968 | </li> |
vhardy@5118 | 969 | </ol> |
vhardy@5118 | 970 | |
vhardy@5125 | 971 | <h6>Resolving RWC-1</h6> |
vhardy@5118 | 972 | |
vhardy@5488 | 973 | <p>The top-most <span>wrapping context</span> in the layout tree contains the <code class="idl">e2</code> |
vhardy@5125 | 974 | exclusion. Its position and size needs to be resolved. In general, computing an |
vhardy@5118 | 975 | exclusion's position and size may or may not require laying out other content. |
vhardy@5125 | 976 | In our example, no content needs to be laid out to resolve the <code class="idl">e2</code> |
vhardy@5125 | 977 | exclusion's position because it is absolutely positioned and its size can be resolved |
vhardy@5125 | 978 | without layout either. At this point, RWC-1 is resolved and can be used when |
vhardy@5125 | 979 | laying inline content out.</p> |
vhardy@4473 | 980 | |
vhardy@5125 | 981 | <h6>Resolving RWC-2</h6> |
vhardy@5118 | 982 | |
vhardy@5118 | 983 | <p>The process is similar: the position of the |
vhardy@5459 | 984 | <code class="idl">e1</code> exclusion needs to be resolved. Again, resolving the exclusion's |
vhardy@5118 | 985 | position and size may require processing the containing block (d1 here). |
vhardy@5118 | 986 | It is the case here because the size and position of |
vhardy@5118 | 987 | <code class="idl">e1</code> depend on resolving the percentage lengths. The percentages are relative |
vhardy@5118 | 988 | to the size of |
vhardy@5125 | 989 | <code class="idl">d1</code>'s box. As a result, in order to resolve |
vhardy@5118 | 990 | a size for <code class="idl">d1</code>'s box, a first layout of <code class="idl">d1</code> |
vhardy@5488 | 991 | is done without any <span>wrapping context</span> (i.e., no exclusions applied). The layout yields a |
vhardy@5118 | 992 | position and size for <code class="idl">e1</code>'s box. |
vhardy@4473 | 993 | </p> |
vhardy@5118 | 994 | <p>At this point, RWC-2 is resolved because the position and size of both |
vhardy@5125 | 995 | e1 and e2 are resolved.</p> |
vhardy@4473 | 996 | |
vhardy@5488 | 997 | <p class="note">The important aspect of the above processing example is that once an element's <span>wrapping context</span> |
vhardy@5125 | 998 | is resolved (by resolving its exclusions' position and size), the position and size of the |
vhardy@5412 | 999 | exclusions are not re-processed if the element's size changes between the layout that may be done |
vhardy@5488 | 1000 | without considering any <span>wrapping context</span> (as for RWC-2) and the layout done with the resolved <span>wrapping context</span>. |
vhardy@5488 | 1001 | This is what breaks the possible circular dependency between the resolution of <span>wrapping context</span>s |
vhardy@5118 | 1002 | and the layout of containing blocks.</p> |
vhardy@4473 | 1003 | |
vhardy@5412 | 1004 | <h3 id="floats-and-exclusions">Floats and exclusions</h3> |
vhardy@5412 | 1005 | |
vhardy@5412 | 1006 | <h4 id="floats-and-exclusions-similarities">Similarities</h4> |
vhardy@5412 | 1007 | |
vhardy@5412 | 1008 | <p>There are similarities between floats an exclusions in that inline content wraps around floats |
stearns@6339 | 1009 | and also wraps around <span>exclusion areas</span>. However, there are very significant differences.</p> |
vhardy@5412 | 1010 | |
vhardy@5412 | 1011 | <h4 id="floats-and-exclusions-differences">Differences</h4> |
vhardy@5412 | 1012 | |
vhardy@5412 | 1013 | <ul> |
vhardy@5412 | 1014 | <li><strong>scope</strong>. While floats apply to content that follows in the |
vhardy@5412 | 1015 | document, exclusions apply to content in their containing block.</li> |
vhardy@5412 | 1016 | <li><strong>positioning</strong>. Floats are part of the inline flow and 'float' on the |
vhardy@5412 | 1017 | line box. Authors can control how the floats move on the line box, to the right or to the |
vhardy@5412 | 1018 | left. By contrast, exclusions can be positioned using any positioning scheme such |
vhardy@5412 | 1019 | as grid layout ([[CSS3-GRID-LAYOUT]]), flexible box ([[CSS3-FLEXBOX]]) or any other |
vhardy@5412 | 1020 | CSS positioning scheme.</li> |
vhardy@5412 | 1021 | <li><strong>separation of concerns</strong>. Making an element a float determines both |
vhardy@5412 | 1022 | its positioning scheme and its effect on inline content. Making an element an |
vhardy@5412 | 1023 | exclusion only determines its impact on inline content and does not impose constraints |
vhardy@5412 | 1024 | on its positioning method.</li> |
vhardy@5412 | 1025 | </ul> |
vhardy@5412 | 1026 | |
vhardy@5412 | 1027 | <h4 id="floats-and-exclusions-interoperability">Interoperability</h4> |
vhardy@5412 | 1028 | |
vhardy@5412 | 1029 | <h5 id="effect-of-floats-on-exclusions">Effect of floats on exclusions</h5> |
vhardy@5412 | 1030 | |
vhardy@5412 | 1031 | <p>Floats have an effect on the positioning of exclusions and the layout of their inline content. For |
vhardy@5412 | 1032 | example, if an exclusion is an inline-box which happens to be on the same line as a float, |
stearns@5633 | 1033 | its' position, as computed in <a href="#step-2-A-resolve-exclusions-position-and-size">Step 2-A</a> will be impacted by the float, as |
vhardy@5412 | 1034 | is any other inline content.</p> |
vhardy@5412 | 1035 | |
vhardy@5412 | 1036 | <h5 id="effect-of-exclusions-on-floats">Effect of exclusions on floats</h5> |
vhardy@5412 | 1037 | |
vhardy@5412 | 1038 | <p>Exclusions have an effect on the positioning of floats as they have an effect on inline content. |
stearns@5633 | 1039 | Therefore, in <a href="#step-2-B-layout-containing-block-applying-wrapping">Step 2-B</a>, floats will avoid <span>exclusion areas</span>.</p> |
vhardy@5412 | 1040 | |
rossen@3643 | 1041 | <!-- End section "Exclusions" --> |
vhardy@2780 | 1042 | |
rossen@3643 | 1043 | <h2 id="shapes">Shapes</h2> |
stearns@5636 | 1044 | |
stearns@5636 | 1045 | <div class="issue-marker wrapper"> |
rossen@4463 | 1046 | <div class="issue-marker" data-bug_id="15091" data-bug_status="NEW"> |
vhardy@5750 | 1047 | <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15091">Issue-15091</a><br /> |
rossen@4463 | 1048 | <div class="issue-details"> |
rossen@4463 | 1049 | <p class="short-desc">Simplify the syntax for shapes</p> |
rossen@4463 | 1050 | </div> |
vhardy@4045 | 1051 | </div> |
vhardy@4045 | 1052 | |
stearns@5636 | 1053 | <div class="issue-marker" data-bug_id="16716" data-bug_status="NEW"> |
vhardy@5750 | 1054 | <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16716">Issue-16716</a> |
stearns@5636 | 1055 | <div class="issue-details"> |
stearns@5636 | 1056 | <p class="short-desc">Handling visible content as a shape for Exclusions</p> |
stearns@5636 | 1057 | </div> |
stearns@5636 | 1058 | </div> |
stearns@5636 | 1059 | </div> |
stearns@5636 | 1060 | |
rossen@3643 | 1061 | <p> |
vhardy@3659 | 1062 | Shapes define arbitrary geometric contours around which or into which inline flow |
rossen@3643 | 1063 | content flows. There are two different types of shapes – 'outside' and 'inside'. |
vhardy@5412 | 1064 | The outside shape defines the <span>exclusion area</span> for an <span>exclusion element</span> |
vhardy@5412 | 1065 | or the <span>float area</span> for a float. |
vhardy@3659 | 1066 | The inside shape defines an element's <span>content shape</span> and the element's inline |
vhardy@3659 | 1067 | content will flow within that shape. |
rossen@3643 | 1068 | </p> |
vhardy@5412 | 1069 | |
vhardy@5412 | 1070 | <p class="note">It is important to note that while outside shapes only apply to |
vhardy@5412 | 1071 | <span>exclusions</span> and floats, inside shapes apply to all block-level elements.</p> |
vhardy@2780 | 1072 | |
vhardy@5412 | 1073 | <h3 id="relation-to-box-model-and-float-behavior">Relation to the box model and float behavior</h3> |
vhardy@5412 | 1074 | |
vhardy@5412 | 1075 | <p> |
vhardy@5412 | 1076 | While the boundaries used for wrapping inline flow content outside and inside |
rossen@3643 | 1077 | an element can be defined using shapes, the actual box model does not change. If |
rossen@3643 | 1078 | the element has specified margins, borders or paddings they will be computed and |
vhardy@5214 | 1079 | rendered according to the [[!CSS3BOX]] module. |
rossen@3643 | 1080 | </p> |
rossen@3643 | 1081 | |
vhardy@5412 | 1082 | <p> |
vhardy@5412 | 1083 | However, floats are an exception. If a float has an outside shape, its positioning |
vhardy@5412 | 1084 | is resolved as |
vhardy@5412 | 1085 | <a href="http://www.w3.org/TR/CSS2/visuren.html#float-position">defined</a> in |
vhardy@5412 | 1086 | [[!CSS21]] but using the |
vhardy@5412 | 1087 | outside shape's bounding box is used in lieu of the float's margin box. |
vhardy@5412 | 1088 | </p> |
vhardy@5412 | 1089 | |
rossen@3643 | 1090 | <div class="example"> |
vhardy@5622 | 1091 | <p>CSS 'shape-outside' and CSS box model relation: the red box illustrates the exclusion element's |
vhardy@5622 | 1092 | content box, which is unmodified and subject to normal CSS positioning (here absolute positioning).</p> |
rossen@3643 | 1093 | <pre><code class="html"> |
rossen@3643 | 1094 | <style type="text/css"> |
rossen@3643 | 1095 | .exclusion { |
rossen@3643 | 1096 | wrap-flow: both; |
rossen@3643 | 1097 | position: absolute; |
vhardy@5622 | 1098 | top: 25%; |
vhardy@5622 | 1099 | left: 25%; |
vhardy@5622 | 1100 | width: 50%; |
vhardy@5622 | 1101 | height: 50%; |
rossen@3762 | 1102 | shape-outside: circle(50%, 50%, 50%); |
vhardy@3659 | 1103 | border: 1px solid red; |
rossen@3643 | 1104 | } |
rossen@3643 | 1105 | </style> |
vhardy@2780 | 1106 | |
vhardy@5459 | 1107 | <div style=”position: relative;”> |
rossen@3643 | 1108 | <div class=”exclusion”></div> |
rossen@3643 | 1109 | Lorem ipsum dolor sit amet... |
rossen@3643 | 1110 | </div> |
rossen@3643 | 1111 | </code></pre> |
vhardy@3707 | 1112 | <img class="singleImgExample" src="images/shapes_CSS2.1_MBP.png" alt="Example rendering of circle shape and box model." style="max-width:40%"/> |
rossen@3643 | 1113 | </div> |
vhardy@5622 | 1114 | |
vhardy@5622 | 1115 | <div class="example"> |
vhardy@5622 | 1116 | <p>In the following example the left and right floating <code class="html">div</code> elements |
vhardy@5622 | 1117 | specify a triangular shape using the 'shape-outside' property.</p> |
vhardy@5622 | 1118 | |
vhardy@5622 | 1119 | <pre><code class="html"> |
vhardy@5622 | 1120 | <div style="text-align:center;"> |
vhardy@5622 | 1121 | <div id="float-left"></div> |
vhardy@5622 | 1122 | <div id="float-right"></div> |
vhardy@5622 | 1123 | <div> |
vhardy@5622 | 1124 | Sometimes a web page's text content appears to be |
vhardy@5622 | 1125 | funneling your attention towards a spot on the page |
vhardy@5622 | 1126 | to drive you to follow a particular link. Sometimes |
vhardy@5622 | 1127 | you don't notice. |
vhardy@5622 | 1128 | </div> |
vhardy@5622 | 1129 | </div> |
vhardy@5622 | 1130 | |
vhardy@5622 | 1131 | <style type="text/css"> |
vhardy@5622 | 1132 | #float-left { |
vhardy@5622 | 1133 | shape-outside: polygon(0,0 100%,100% 0,100%); |
vhardy@5622 | 1134 | float: left; |
vhardy@5622 | 1135 | width: 40%; |
vhardy@5622 | 1136 | height: 12ex; |
vhardy@5622 | 1137 | } |
vhardy@5622 | 1138 | |
vhardy@5622 | 1139 | #float-right { |
vhardy@5622 | 1140 | shape-outside: polygon(100%,0 100%,100% 0,100%); |
vhardy@5622 | 1141 | float: right; |
vhardy@5622 | 1142 | width: 40%; |
vhardy@5622 | 1143 | height: 12ex; |
vhardy@5622 | 1144 | } |
vhardy@5622 | 1145 | </style> |
vhardy@5622 | 1146 | </div></code></pre> |
rossen@3643 | 1147 | |
vhardy@5622 | 1148 | <img class="singleImgExample" src="images/float-shape-outside.png" alt="Using the shape-outside property with a float"/> |
vhardy@5622 | 1149 | </div> |
stearns@6587 | 1150 | <h3 id="basic-shapes-from-svg-syntax">Basic Shapes</h3> |
rossen@3643 | 1151 | <p> |
stearns@6587 | 1152 | Shapes can be specified using |
stearns@7074 | 1153 | syntax similar to SVG's <a href="http://www.w3.org/TR/SVG/shapes.html">basic shapes</a>. |
stearns@6587 | 1154 | The definitions use |
stearns@6587 | 1155 | <code><a href="http://www.w3.org/TR/css3-values/#lengths"><length></a></code> type |
stearns@6587 | 1156 | and the <code><a href=""><percentage></a></code> types (see [[!CSS3VAL]]). |
stearns@6587 | 1157 | Percentages are resolved |
stearns@7074 | 1158 | from the computed value of the |
stearns@7074 | 1159 | <a href="http://www.w3.org/TR/css3-ui/#box-sizing">'box-sizing'</a> |
stearns@7074 | 1160 | property [[!CSS3UI]] |
stearns@7074 | 1161 | on the element to which the property applies. |
stearns@6587 | 1162 | For the radius <code>r</code> of the <code>circle</code> shape, |
stearns@6587 | 1163 | a percentage value is resolved as |
stearns@6587 | 1164 | <a href="http://www.w3.org/TR/SVG/coords.html#Units">specified</a> |
stearns@6587 | 1165 | in the SVG recommendation (see [[!SVG11]]). |
stearns@7074 | 1166 | Path styling like stroking is not considered part of the specified shape. |
rossen@3643 | 1167 | </p> |
vhardy@3659 | 1168 | |
vhardy@3659 | 1169 | |
stearns@6587 | 1170 | <h4 id="supported-basic-shapes">Supported Shapes</h4> |
stearns@7074 | 1171 | The following basic shapes are supported. |
rossen@3643 | 1172 | <dl> |
stearns@6301 | 1173 | <dt><dfn id="rectangle">rectangle</dfn>([<length>|<percentage>]{4} [ curve [<length>|<percentage>]{1,2} ]? )</dt> |
rossen@3643 | 1174 | <dd> |
rossen@3643 | 1175 | <ul> |
rossen@4465 | 1176 | <li> |
stearns@6283 | 1177 | The four values represent |
stearns@6283 | 1178 | <strong>x, y, width</strong> and |
stearns@6283 | 1179 | <strong>height</strong>. |
stearns@6283 | 1180 | They define the bounding box |
stearns@6283 | 1181 | of the rectangle. |
stearns@6283 | 1182 | Negative values for width and height are invalid. |
stearns@6283 | 1183 | </li> |
stearns@6283 | 1184 | <li> |
stearns@6283 | 1185 | The two 'curve' values represent |
stearns@6283 | 1186 | <strong> rx</strong> and <strong>ry</strong>. |
stearns@6283 | 1187 | For rounded rectangles they define |
stearns@6283 | 1188 | the x-axis radius and y-axis radius |
stearns@6283 | 1189 | of the ellipse used to round off |
stearns@6283 | 1190 | the corners of the rectangle. |
stearns@6283 | 1191 | Negative values for rx and ry are invalid. |
rossen@4465 | 1192 | </li> |
rossen@3643 | 1193 | </ul> |
rossen@3643 | 1194 | </dd> |
stearns@6301 | 1195 | <dt><dfn id="circle">circle</dfn>([<length>|<percentage>]{3})</dt> |
rossen@3643 | 1196 | <dd> |
rossen@3643 | 1197 | <ul> |
rossen@4465 | 1198 | <li> |
stearns@6283 | 1199 | The three values values represent |
stearns@6283 | 1200 | <strong>cx</strong>, |
stearns@6283 | 1201 | <strong>cy</strong>, |
stearns@6283 | 1202 | and <strong>r</strong>. |
stearns@6283 | 1203 | They define the x-axis and y-axis coordinates |
stearns@6283 | 1204 | of the center of the circle |
stearns@6283 | 1205 | and the radius of the circle. |
stearns@6283 | 1206 | A negative value for r is invalid. |
rossen@4465 | 1207 | </li> |
rossen@3643 | 1208 | </ul> |
rossen@3643 | 1209 | </dd> |
stearns@6301 | 1210 | <dt><dfn id="ellipse">ellipse</dfn>([<length>|<percentage>]{4})</dt> |
rossen@3643 | 1211 | <dd> |
rossen@3643 | 1212 | <ul> |
stearns@6283 | 1213 | <li> |
stearns@6283 | 1214 | The four values represent |
stearns@6283 | 1215 | <strong>cx</strong>, |
stearns@6283 | 1216 | <strong>cy</strong>, |
stearns@6283 | 1217 | <strong>rx</strong>, and |
stearns@6283 | 1218 | <strong>ry</strong>. |
stearns@6283 | 1219 | They define the x-axis and y-axis coordinates |
stearns@6283 | 1220 | of the center of the ellipse |
stearns@6283 | 1221 | and the x-axis and y-axis radius |
stearns@6283 | 1222 | of the ellipse. |
stearns@6283 | 1223 | Negative values for rx and ry are invalid. |
rossen@4465 | 1224 | </li> |
rossen@3643 | 1225 | </ul> |
rossen@3643 | 1226 | </dd> |
stearns@6301 | 1227 | <dt><dfn id="polygon">polygon</dfn>([<fill-rule>,]? [<length>|<percentage>]{2}#)</dt> |
rossen@3643 | 1228 | <dd> |
rossen@3643 | 1229 | <ul> |
stearns@7074 | 1230 | <li><strong>fill-rule</strong> - The filling rule used to determine the interior of the |
stearns@6587 | 1231 | polygon. See <a href="http://www.w3.org/TR/SVG/painting.html#FillRuleProperty">fill-rule</a> property in SVG for details. Possible values are nonzero |
rossen@3643 | 1232 | or evenodd. Default value when omitted is nonzero.</li> |
rossen@4465 | 1233 | <li> |
rossen@4465 | 1234 | The two length values represent <strong>xi</strong> and <strong>yi</strong> - |
vhardy@5214 | 1235 | the <strong>x</strong> and <strong>y</strong> axis coordinates of the i-th vertex of the polygon. |
rossen@4465 | 1236 | </li> |
rossen@3643 | 1237 | </ul> |
stearns@7074 | 1238 | <p>The UA will close a polygon |
stearns@7074 | 1239 | by connecting the last vertex |
stearns@7074 | 1240 | with the first vertex of the list.</p> |
rossen@4463 | 1241 | <br/> |
rossen@3643 | 1242 | </dd> |
rossen@3643 | 1243 | </dl> |
vhardy@3659 | 1244 | |
vhardy@3659 | 1245 | <h4 id='referencing-svg-shapes'>Referencing SVG shapes</h4> |
vhardy@3659 | 1246 | |
vhardy@3659 | 1247 | <p>An SVG shape can be referenced using the <code>url()</code> syntax. The shape can be |
vhardy@3659 | 1248 | any of the <a href="http://www.w3.org/TR/SVG/shapes.html">SVG basic shapes</a> or a |
vhardy@3659 | 1249 | <a href="http://www.w3.org/TR/SVG/paths.html">path element</a>.</p> |
vhardy@5488 | 1250 | |
vhardy@3659 | 1251 | <div class="example"> |
stearns@6654 | 1252 | <div style="float:right"> |
stearns@6654 | 1253 | <img alt="results of referencing SVG shapes" src="images/svg-shape-reference.png"> |
stearns@6654 | 1254 | </div> |
vhardy@3659 | 1255 | <code class="html"><pre> |
vhardy@3659 | 1256 | <style> |
stearns@6654 | 1257 | div { |
stearns@6654 | 1258 | height: 400px; |
stearns@6654 | 1259 | width: 400px; |
stearns@6654 | 1260 | } |
vhardy@3659 | 1261 | .in-a-circle { |
vhardy@3659 | 1262 | shape-inside: url(#circle_shape); |
vhardy@3659 | 1263 | } |
vhardy@2780 | 1264 | |
vhardy@3659 | 1265 | .in-a-path { |
vhardy@3659 | 1266 | shape-inside: url(#path-shape); |
vhardy@3659 | 1267 | } |
vhardy@3659 | 1268 | |
vhardy@3659 | 1269 | </style> |
vhardy@3659 | 1270 | |
vhardy@3659 | 1271 | <svg ...> |
vhardy@5126 | 1272 | <circle id="circle_shape" cx="50%" cy="50%" r="50%" /> |
stearns@6654 | 1273 | <path id="path-shape" d="M 100 100 L 300 100 L 200 300 z" /> |
vhardy@3659 | 1274 | </svg> |
vhardy@3659 | 1275 | |
vhardy@3659 | 1276 | <div class="in-a-circle">...</div> |
vhardy@3659 | 1277 | <div class="in-a-path">...</div> |
vhardy@3659 | 1278 | </pre></code> |
vhardy@3659 | 1279 | </div> |
rossen@3716 | 1280 | <p> |
stearns@7074 | 1281 | When using the SVG syntax |
stearns@7074 | 1282 | or referencing SVG elements |
stearns@7074 | 1283 | to define shapes, |
stearns@7074 | 1284 | the relevant box is determined |
stearns@7074 | 1285 | by the computed value of the |
stearns@7074 | 1286 | <a href="http://www.w3.org/TR/css3-ui/#box-sizing">'box-sizing'</a> |
stearns@7074 | 1287 | property. |
stearns@7074 | 1288 | All the lengths expressed in percentages |
stearns@7074 | 1289 | are resolved from the relevant box. |
stearns@7074 | 1290 | The coordinate system for the shape |
stearns@7074 | 1291 | has its origin on the top-left corner of the |
stearns@7074 | 1292 | relevant box with the x-axis |
stearns@7074 | 1293 | running to the right |
stearns@7074 | 1294 | and the y-axis running downwards. |
stearns@7074 | 1295 | If the SVG element uses unitless coordinate values, |
stearns@7074 | 1296 | they are equivalent to using |
stearns@7074 | 1297 | 'px' units. |
stearns@7074 | 1298 | If the relevant box of the element |
stearns@7074 | 1299 | is dependent on auto sizing |
stearns@7074 | 1300 | (i.e., the element's 'width' or 'height' property is 'auto'), |
stearns@7074 | 1301 | then the percentage values |
vhardy@5126 | 1302 | resolve to 0. |
rossen@3716 | 1303 | </p> |
stearns@7074 | 1304 | |
stearns@7074 | 1305 | <h4 id='basic-shape-interpolation'>Interpolation of Basic Shapes</h4> |
stearns@7074 | 1306 | |
stearns@7074 | 1307 | <p>For interpolating between |
stearns@7074 | 1308 | one basic shape and a second, |
stearns@7074 | 1309 | the rules described below are applied. |
stearns@7074 | 1310 | </p> |
stearns@7074 | 1311 | <ul> |
stearns@7074 | 1312 | <li>If both basic shapes are of the same type and not of type polygon: |
stearns@7074 | 1313 | <ul><li>Interpolate between each value.</li></ul> |
stearns@7074 | 1314 | </li> |
stearns@7074 | 1315 | <li>If one basic shape is of type rectangle and the second of type circle or ellipse: |
stearns@7074 | 1316 | <ul><li>Replace the circle/ellipse with a temporary rectangle of equal dimension.</li> |
stearns@7074 | 1317 | <li>Set the values for rx and ry on the temporary rectangle to ‘50%’.</li> |
stearns@7074 | 1318 | <li>Interpolate between the two rectangles as above.</li></ul> |
stearns@7074 | 1319 | </li> |
stearns@7074 | 1320 | <li>If both basic shapes are of type polygon and if both polygons have the same number of vertices: |
stearns@7074 | 1321 | <ul><li>Interpolate between each value.</li></ul> |
stearns@7074 | 1322 | </li> |
stearns@7074 | 1323 | <li>In all other cases: |
stearns@7074 | 1324 | <ul><li>No interpolation is specified.</li></ul></li> |
stearns@7074 | 1325 | </ul> |
stearns@7074 | 1326 | |
rossen@3716 | 1327 | <!-- End section "Shapes from SVG Syntax --> |
rossen@3643 | 1328 | |
rossen@3643 | 1329 | <h3 id="shapes-from-image">Shapes from Image</h3> |
vhardy@3731 | 1330 | |
stearns@5636 | 1331 | <div class="issue-marker wrapper"> |
rossen@4463 | 1332 | <div class="issue-marker" data-bug_id="15093" data-bug_status="NEW"> |
vhardy@5750 | 1333 | <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15093">Issue-15093</a><br /> |
rossen@4463 | 1334 | <div class="issue-details"> |
stearns@5899 | 1335 | <p class="short-desc">Do we need to provide properties to repeat exclusion images as for the background-image property?</p> |
rossen@4463 | 1336 | </div> |
rossen@4463 | 1337 | </div> |
rossen@4463 | 1338 | <div class="issue-marker" data-bug_id="15090" data-bug_status="NEW"> |
stearns@5899 | 1339 | <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15090">Issue-15090</a> |
rossen@4463 | 1340 | <div class="issue-details"> |
stearns@5899 | 1341 | <p class="short-desc">Use the contour keyword in shape-outside property?</p> |
stearns@5899 | 1342 | </div> |
rossen@4463 | 1343 | </div> |
rossen@4463 | 1344 | |
rossen@4463 | 1345 | <div class="issue-marker" data-bug_id="15092" data-bug_status="NEW"> |
vhardy@5750 | 1346 | <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15092">Issue-15092</a> |
rossen@4463 | 1347 | <div class="issue-details"> |
rossen@4463 | 1348 | <p class="short-desc">Specify what happens with animated images</p> |
rossen@4463 | 1349 | </div> |
vhardy@4045 | 1350 | </div> |
stearns@5636 | 1351 | |
stearns@5636 | 1352 | <div class="issue-marker" data-bug_id="16112" data-bug_status="NEW"> |
vhardy@5750 | 1353 | <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16112">Issue-16112</a> |
stearns@5636 | 1354 | <div class="issue-details"> |
stearns@5636 | 1355 | <p class="short-desc">Address security concern with automatic shape extractions for images</p> |
stearns@5636 | 1356 | </div> |
stearns@5636 | 1357 | </div> |
stearns@5636 | 1358 | </div> |
vhardy@4045 | 1359 | |
rossen@3643 | 1360 | <p> |
rossen@3643 | 1361 | Another way of defining shapes is by specifying a source image whose alpha channel |
rossen@3716 | 1362 | is used to compute the inside or outside shape. The shape is computed to be the |
rossen@3716 | 1363 | path that encloses the area where the opacity of the specified image is greater |
rossen@3716 | 1364 | than the 'shape-image-threshold' value. If the 'shape-image-threshold' is not specified, |
rossen@3716 | 1365 | the initial value to be considered is 0.5. |
rossen@3643 | 1366 | </p> |
vhardy@3659 | 1367 | |
rossen@3643 | 1368 | <p class="note"> |
vhardy@3659 | 1369 | Note, images can define cavities and inline flow content should wrap inside |
rossen@3643 | 1370 | them. In order to avoid that, another exclusion element can be overlaid. |
rossen@3643 | 1371 | </p> |
vhardy@3659 | 1372 | |
vhardy@5468 | 1373 | <p>For animated raster image formats (such as <a href="http://www.w3.org/Graphics/GIF/spec-gif89a.txt">GIF</a>), the first frame of the animation |
vhardy@5468 | 1374 | sequence is used. For <a href="http://www.w3.org/TR/2002/WD-SVG2Reqs-20020422/">SVG</a> images |
vhardy@5468 | 1375 | ([[SVG11]]), the image is rendered without animations applied.</p> |
daniel@7050 | 1376 | |
daniel@7050 | 1377 | <div class="example"> |
daniel@7050 | 1378 | <p>An image is floating to the left of a paragraph. The image shows the 3D version of the |
daniel@7050 | 1379 | CSS logo over a transparent background. The logo has a shadow using an alpha-channel.</p> |
daniel@7051 | 1380 | <p>The image defines its <span>float area</span> through the 'shape-outside' property and |
daniel@7051 | 1381 | specifies a value of 35 pixels for the 'shape-margin' property.</p> |
daniel@7050 | 1382 | <pre><code class="html"> |
daniel@7051 | 1383 | <p> |
daniel@7050 | 1384 | <img id="CSSlogo" src="CSS-logo1s.png"/> |
daniel@7050 | 1385 | blah blah blah blah... |
daniel@7050 | 1386 | </p> |
daniel@7050 | 1387 | |
daniel@7050 | 1388 | <style> |
daniel@7051 | 1389 | #CSSlogo { |
daniel@7051 | 1390 | float: left; |
daniel@7051 | 1391 | shape-outside: url("CSS-logo1s.png"); |
daniel@7051 | 1392 | shape-image-threshold: 0.1; |
daniel@7051 | 1393 | shape-margin: 35px; |
daniel@7051 | 1394 | } |
daniel@7050 | 1395 | </style></code></pre> |
daniel@7050 | 1396 | |
daniel@7050 | 1397 | <p>The image needs two references to the image because this example uses the same image</p> |
daniel@7050 | 1398 | <ol> |
daniel@7050 | 1399 | <li>to render it</li> |
daniel@7050 | 1400 | <li>as a shape defining the <span>float area</span> of the image</li> |
daniel@7050 | 1401 | </ol> |
daniel@7050 | 1402 | <p>It is perfectly possible to display an image and use a different image for its |
daniel@7050 | 1403 | float area.</p> |
daniel@7050 | 1404 | |
daniel@7050 | 1405 | <p>In the figure below, the alpha-channel threshold is represented by the dotted line around |
daniel@7050 | 1406 | the CSS logo and the 35px shape-margin is visible between that line and the edges of |
daniel@7050 | 1407 | each individual line of the paragraph.</p> |
daniel@7050 | 1408 | <p>It's then possible to affect where the lines of the paragraph start in three ways:</p> |
daniel@7050 | 1409 | <ol> |
daniel@7051 | 1410 | <li>Changing the value of the 'shape-margin' property</li> |
daniel@7051 | 1411 | <li>Changing the value of the 'shape-image-threshold' property</li> |
daniel@7050 | 1412 | <li>Modifying the alpha channel in the image</li> |
daniel@7050 | 1413 | </ol> |
daniel@7050 | 1414 | <div class='figure'> |
daniel@7050 | 1415 | <img alt="A float shape around an image using its alpha-channel with a 35 pixels shape-margin" src="images/shape-outside-image.png" width="70%"/> |
daniel@7050 | 1416 | <p class="caption">A float shape around an image using its alpha-channel with a 35 pixels shape-margin</p> |
daniel@7050 | 1417 | </div> |
daniel@7050 | 1418 | </div> |
rossen@3643 | 1419 | <!-- End section "Shapes from image" --> |
vhardy@2780 | 1420 | |
rossen@3643 | 1421 | <h3 id="declaring-shapes">Declaring Shapes</h3> |
rossen@3643 | 1422 | <p> |
stearns@6905 | 1423 | Shapes are declared with |
stearns@6905 | 1424 | the 'shape-outside' |
stearns@6905 | 1425 | or 'shape-inside' properties, |
stearns@6905 | 1426 | with possible modifications |
stearns@6905 | 1427 | from the 'shape-margin' |
stearns@6905 | 1428 | and 'shape-padding' properties. |
stearns@6905 | 1429 | The shape defined by |
stearns@6905 | 1430 | the 'shape-outside' |
stearns@6905 | 1431 | and 'shape-margin' properties |
stearns@6905 | 1432 | changes the geometry |
stearns@6905 | 1433 | of an <span>exclusion element</span>'s |
stearns@6905 | 1434 | <span>exclusion area</span> |
stearns@6905 | 1435 | or a float element's |
stearns@6905 | 1436 | <span>float area</span>. |
stearns@6905 | 1437 | If the element is not |
stearns@6905 | 1438 | an <span>exclusion element</span> |
stearns@6905 | 1439 | (see the 'wrap-flow' property) |
stearns@6905 | 1440 | or a float, |
stearns@6905 | 1441 | then the 'shape-outside' property |
stearns@6905 | 1442 | has no effect. |
vhardy@3659 | 1443 | </p> |
vhardy@3659 | 1444 | <p> |
stearns@6905 | 1445 | The shape defined by the 'shape-inside' and 'shape-padding' properties defines an element's <span>content area</span> and |
vhardy@5412 | 1446 | the element's inline flow content wraps into that shape. The 'shape-inside' property |
vhardy@5412 | 1447 | applies to all block-level elements. |
rossen@3643 | 1448 | </p> |
vhardy@2780 | 1449 | |
rossen@3643 | 1450 | <h4 id="shape-outside-property">The 'shape-outside' Property</h4> |
vhardy@2780 | 1451 | |
rossen@3643 | 1452 | <table class="propdef"> |
rossen@3643 | 1453 | <tr> |
rossen@3643 | 1454 | <th>Name:</th> |
rossen@3643 | 1455 | <td><dfn title="'shape-outside'">shape-outside</dfn></td> |
rossen@3643 | 1456 | </tr> |
rossen@3643 | 1457 | <tr> |
rossen@3643 | 1458 | <th>Value:</th> |
vhardy@3659 | 1459 | <td><var>auto</var> | <var><shape></var> | <var><uri></var></td> |
rossen@3643 | 1460 | </tr> |
rossen@3643 | 1461 | <tr> |
rossen@3643 | 1462 | <th>Initial:</th> |
rossen@3643 | 1463 | <td>auto</td> |
rossen@3643 | 1464 | </tr> |
rossen@3643 | 1465 | <tr> |
rossen@3643 | 1466 | <th>Applies to:</th> |
vhardy@5412 | 1467 | <td>exclusion elements and floats</td> |
rossen@3643 | 1468 | </tr> |
rossen@3643 | 1469 | <tr> |
rossen@3643 | 1470 | <th>Inherited:</th> |
rossen@3643 | 1471 | <td>no</td> |
rossen@3643 | 1472 | </tr> |
rossen@3643 | 1473 | <tr> |
rossen@3643 | 1474 | <th>Percentages:</th> |
rossen@3643 | 1475 | <td>N/A</td> |
rossen@3643 | 1476 | </tr> |
rossen@3643 | 1477 | <tr> |
rossen@3643 | 1478 | <th>Media:</th> |
rossen@3643 | 1479 | <td>visual</td> |
rossen@3643 | 1480 | </tr> |
rossen@3643 | 1481 | <tr> |
rossen@3643 | 1482 | <th>Computed value:</th> |
vhardy@3659 | 1483 | <td>computed lengths for <shape>, the absolute URI for <uri>, otherwise as specified</td> |
rossen@3643 | 1484 | </tr> |
rossen@3643 | 1485 | </table> |
rossen@3643 | 1486 | |
rossen@3643 | 1487 | <p>The values of this property have the following meanings:</p> |
rossen@3643 | 1488 | <dl> |
rossen@3643 | 1489 | <dt><dfn title="'shape-outside'!!'auto'">auto</dfn></dt> |
stearns@7074 | 1490 | <dd>The shape is computed |
stearns@7074 | 1491 | based on the border box of the element for exclusions, |
stearns@7074 | 1492 | or computed based on the margin box for floats.</dd> |
rossen@3643 | 1493 | </dl> |
rossen@3643 | 1494 | <dl> |
rossen@3643 | 1495 | <dt><dfn title="'shape-outside'!!'<shape>'"><shape></dfn></dt> |
rossen@3643 | 1496 | <dd> |
vhardy@5466 | 1497 | The shape is computed based on the values of one of 'rectangle', 'circle', 'ellipse' |
rossen@3643 | 1498 | or 'polygon'. |
rossen@3643 | 1499 | </dd> |
rossen@3643 | 1500 | </dl> |
rossen@3643 | 1501 | <dl> |
vhardy@3659 | 1502 | <dt><dfn title="'shape-outside'!!'<uri>'"><uri></dfn></dt> |
rossen@3643 | 1503 | <dd> |
vhardy@3659 | 1504 | If the <uri> references an SVG shape element, that element defines the shape. |
vhardy@3659 | 1505 | Otherwise, if the <uri> references an image, the shape is extracted and computed |
vhardy@3659 | 1506 | based on the alpha channel of the specified image. |
vhardy@3659 | 1507 | |
vhardy@3659 | 1508 | If the <uri> does not reference an SVG shape element or an image, the |
vhardy@3659 | 1509 | effect is as if the value 'auto' had been specified. |
rossen@3643 | 1510 | </dd> |
rossen@3643 | 1511 | </dl> |
vhardy@3707 | 1512 | |
vhardy@3707 | 1513 | <div class='figure'> |
stearns@6654 | 1514 | <img alt="arbitrary shapes for exclusions. Illustrates how content flows around shapes" src="images/shapes-exclusions.png" width="70%"/> |
vhardy@3707 | 1515 | <p class="caption">Arbitrary shapes for exclusions</p> |
vhardy@3707 | 1516 | </div> |
vhardy@3707 | 1517 | |
vhardy@3707 | 1518 | <div> |
stearns@6339 | 1519 | <p>The above figure shows how |
stearns@6339 | 1520 | 'shape-outside' shapes |
stearns@6339 | 1521 | impact the <span>exclusion areas</span>. |
stearns@6339 | 1522 | The red box represents an element's content box |
stearns@6339 | 1523 | and 'A', 'B', 'C' and 'C' represent exclusions |
stearns@6339 | 1524 | with a complex shape |
stearns@6339 | 1525 | and their 'wrap-flow' property |
stearns@6905 | 1526 | computes to 'both', 'start', 'end' and 'clear', |
stearns@6339 | 1527 | respectively.</p> |
vhardy@3707 | 1528 | |
stearns@6339 | 1529 | <p>As illustrated in the picture, |
stearns@6339 | 1530 | when an exclusion allows wrapping |
stearns@6339 | 1531 | on all sides, |
stearns@6339 | 1532 | text can flow inside 'holes' |
stearns@6339 | 1533 | in the exclusion |
stearns@6339 | 1534 | (as for exclusion 'A'). |
stearns@6339 | 1535 | Otherwise, the exclusion clears |
stearns@6339 | 1536 | the area on the side(s) |
stearns@6339 | 1537 | defined by 'wrap-flow', |
stearns@6339 | 1538 | as illustrated |
stearns@6339 | 1539 | for 'B', 'C' and 'D' above.</p> |
vhardy@3707 | 1540 | </div> |
rossen@3643 | 1541 | <!-- End section "The shape-outside Property" --> |
vhardy@2780 | 1542 | |
rossen@3643 | 1543 | <h4 id="shape-inside-property">The 'shape-inside' Property</h4> |
rossen@3643 | 1544 | <p> |
rossen@3643 | 1545 | The 'shape-inside' modifies the shape of the inner inline flow content from rectangular |
rossen@3643 | 1546 | content box to an arbitrary geometry. |
rossen@3643 | 1547 | </p> |
vhardy@2780 | 1548 | |
rossen@3643 | 1549 | <table class="propdef"> |
rossen@3643 | 1550 | <tr> |
rossen@3643 | 1551 | <th>Name:</th> |
rossen@3643 | 1552 | <td><dfn title="'shape-inside'">shape-inside</dfn></td> |
rossen@3643 | 1553 | </tr> |
rossen@3643 | 1554 | <tr> |
rossen@3643 | 1555 | <th>Value:</th> |
vhardy@3659 | 1556 | <td><var>outside-shape</var> | <var>auto</var> | <var><shape></var> | <var><uri></var></td> |
rossen@3643 | 1557 | </tr> |
rossen@3643 | 1558 | <tr> |
rossen@3643 | 1559 | <th>Initial:</th> |
rossen@3643 | 1560 | <td>outside-shape</td> |
rossen@3643 | 1561 | </tr> |
rossen@3643 | 1562 | <tr> |
rossen@3643 | 1563 | <th>Applies to:</th> |
rossen@3643 | 1564 | <td>block-level elements</td> |
rossen@3643 | 1565 | </tr> |
rossen@3643 | 1566 | <tr> |
rossen@3643 | 1567 | <th>Inherited:</th> |
rossen@3643 | 1568 | <td>no</td> |
rossen@3643 | 1569 | </tr> |
rossen@3643 | 1570 | <tr> |
rossen@3643 | 1571 | <th>Percentages:</th> |
rossen@3643 | 1572 | <td>N/A</td> |
rossen@3643 | 1573 | </tr> |
rossen@3643 | 1574 | <tr> |
rossen@3643 | 1575 | <th>Media:</th> |
rossen@3643 | 1576 | <td>visual</td> |
rossen@3643 | 1577 | </tr> |
rossen@3643 | 1578 | <tr> |
rossen@3643 | 1579 | <th>Computed value:</th> |
vhardy@3659 | 1580 | <td>computed lengths for <shape>, the absolute URI for <uri>, otherwise as specified</td> |
rossen@3643 | 1581 | </tr> |
rossen@3643 | 1582 | </table> |
stearns@5636 | 1583 | |
stearns@5636 | 1584 | <div class="issue-marker wrapper"> |
stearns@5636 | 1585 | <div class="issue-marker" data-bug_id="16448" data-bug_status="ASSIGNED"> |
vhardy@5750 | 1586 | <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16448">Issue-16448</a> |
stearns@5636 | 1587 | <div class="issue-details"> |
stearns@5636 | 1588 | <p class="short-desc">Should we revisit the decision to not allow SVG path syntax in the shape-inside, shape-outside properties</p> |
stearns@5636 | 1589 | </div> |
stearns@5636 | 1590 | </div> |
stearns@5636 | 1591 | </div> |
stearns@5636 | 1592 | |
rossen@3643 | 1593 | <p>The values of this property have the following meanings:</p> |
rossen@3643 | 1594 | <dl> |
rossen@3643 | 1595 | <dt><dfn title="'shape-inside'!!'outside-shape'">outside-shape</dfn></dt> |
rossen@3643 | 1596 | <dd> |
stearns@7068 | 1597 | The shape is computed |
stearns@7068 | 1598 | based on the computed value |
stearns@7068 | 1599 | of the 'shape-outside' property. |
stearns@7068 | 1600 | E.g., when shape-outside |
stearns@7068 | 1601 | computes to 'auto', |
stearns@7068 | 1602 | use the meaning of 'auto' below |
stearns@7068 | 1603 | to compute the shape. |
rossen@3643 | 1604 | </dd> |
rossen@3643 | 1605 | </dl> |
rossen@3643 | 1606 | <dl> |
rossen@3643 | 1607 | <dt><dfn title="'shape-inside'!!'auto'">auto</dfn></dt> |
rossen@3643 | 1608 | <dd> |
rossen@3643 | 1609 | The shape is computed based on the content box of the element. |
rossen@3643 | 1610 | </dd> |
rossen@3643 | 1611 | </dl> |
rossen@3643 | 1612 | <dl> |
rossen@3643 | 1613 | <dt><dfn title="'shape-inside'!!'<shape>'"><shape></dfn></dt> |
rossen@3643 | 1614 | <dd> |
stearns@6301 | 1615 | The shape is computed based on the values of one of 'rectangle', 'circle', 'ellipse' |
rossen@3643 | 1616 | or 'polygon'. |
rossen@3643 | 1617 | </dd> |
rossen@3643 | 1618 | </dl> |
rossen@3643 | 1619 | <dl> |
rossen@3716 | 1620 | <dt><dfn title="'shape-inside'!!'<uri>'"><uri></dfn></dt> |
rossen@3643 | 1621 | <dd> |
vhardy@3659 | 1622 | If the <uri> references an SVG shape element, that element defines the shape. |
vhardy@3659 | 1623 | Otherwise, if the <uri> references an image, the shape is extracted and computed |
vhardy@3659 | 1624 | based on the alpha channel of the specified image. |
vhardy@3659 | 1625 | |
vhardy@3659 | 1626 | If the <uri> does not reference an SVG shape element or an image, the |
vhardy@3659 | 1627 | effect is as if the value 'auto' had been specified. |
rossen@3643 | 1628 | </dd> |
rossen@3643 | 1629 | </dl> |
vhardy@5412 | 1630 | |
vhardy@5412 | 1631 | <p>The 'shape-inside' property applies to floats.</p> |
vhardy@5412 | 1632 | |
vhardy@5412 | 1633 | <p>The 'shape-inside' property may not apply on some elements such as elements with a |
vhardy@5412 | 1634 | computed 'display' value of 'table'.</p> |
stearns@6654 | 1635 | |
stearns@6654 | 1636 | <div class='figure'> |
stearns@6654 | 1637 | <img alt="Content flowing with and without a shape-inside" src="images/shape-inside-content.png"/> |
stearns@6654 | 1638 | <p class="caption">Effect of shape-inside on inline content.</p> |
stearns@6654 | 1639 | </div> |
stearns@6803 | 1640 | |
stearns@6803 | 1641 | <p>Overflow content can overlap |
stearns@7201 | 1642 | the after edge of a shape, |
stearns@6803 | 1643 | and overflow content can be displayed |
stearns@6905 | 1644 | below the content area defined by shape. |
stearns@6803 | 1645 | When content overflows in the block direction, |
stearns@6803 | 1646 | the last line in the content area determines its width(s) |
stearns@6803 | 1647 | by finding the minimum shape width(s) |
stearns@6803 | 1648 | in the remaining area |
stearns@7201 | 1649 | between the line's before edge |
stearns@7201 | 1650 | and the shape's after edge. |
stearns@6803 | 1651 | This can result |
stearns@7201 | 1652 | in the line intersecting the shape's after edge, |
stearns@6803 | 1653 | or a zero-width line |
stearns@7201 | 1654 | if (for instance) the shape's after edge |
stearns@6803 | 1655 | is a continuous curve. |
stearns@6905 | 1656 | In degenerate cases, |
stearns@6905 | 1657 | there may be no content |
stearns@6905 | 1658 | that fits inside the content area |
stearns@6905 | 1659 | defined by the shape. |
stearns@6803 | 1660 | Further overflow is laid out |
stearns@7201 | 1661 | below the after edge |
stearns@7068 | 1662 | of the shape's bounding box |
stearns@6905 | 1663 | as if 'shape-inside' computes to 'auto'.</p> |
stearns@6803 | 1664 | |
stearns@6803 | 1665 | <div class='figure'> |
stearns@6803 | 1666 | <img alt="Overflow interacting with rounded rect" style="display:inline-block;vertical-align:top" src="images/rounded-rect-overflow.png"/> |
stearns@6803 | 1667 | <img alt="Overflow interacting with ellipse" style="display:inline-block;vertical-align:top" src="images/ellipse-overflow.png"/> |
stearns@7201 | 1668 | <p class="caption">Overflow interacting with the after edge of shapes defined by 'shape-inside' and 'shape-padding'.</p> |
stearns@6803 | 1669 | </div> |
vhardy@5412 | 1670 | |
rossen@3643 | 1671 | <!-- End section "The shape-inside property" --> |
rossen@3643 | 1672 | <h4 id="shape-image-threshold-property">The 'shape-image-threshold' Property</h4> |
vhardy@4045 | 1673 | |
vhardy@4045 | 1674 | |
rossen@3643 | 1675 | <p> |
rossen@3643 | 1676 | The 'shape-image-threshold' defines the alpha channel threshold used to extract |
rossen@3655 | 1677 | the shape using an image. A value of 0.5 means that all the pixels that are more |
rossen@3655 | 1678 | than 50% transparent define the path of the exclusion shape. The 'shape-image-threshold' |
rossen@3643 | 1679 | applies to both 'shape-outside' and 'shape-inside'. |
rossen@3643 | 1680 | </p> |
rossen@3643 | 1681 | <p class="note"> |
rossen@3643 | 1682 | The specified value of 'shape-image-threshold' is applied to both images used for |
rossen@3643 | 1683 | 'shape-outside' and 'shape-inside'. |
rossen@3643 | 1684 | </p> |
vhardy@2780 | 1685 | |
rossen@3643 | 1686 | <table class="propdef"> |
rossen@3643 | 1687 | <tr> |
rossen@3643 | 1688 | <th>Name:</th> |
rossen@3643 | 1689 | <td><dfn title="'shape-image-threshold'">shape-image-threshold</dfn></td> |
rossen@3643 | 1690 | </tr> |
rossen@3643 | 1691 | <tr> |
rossen@3643 | 1692 | <th>Value:</th> |
rossen@3643 | 1693 | <td><var><alphavalue></var></td> |
rossen@3643 | 1694 | </tr> |
rossen@3643 | 1695 | <tr> |
rossen@3643 | 1696 | <th>Initial:</th> |
rossen@3643 | 1697 | <td>0.5</td> |
rossen@3643 | 1698 | </tr> |
rossen@3643 | 1699 | <tr> |
rossen@3643 | 1700 | <th>Applies to:</th> |
rossen@3643 | 1701 | <td>block-level elements</td> |
rossen@3643 | 1702 | </tr> |
rossen@3643 | 1703 | <tr> |
rossen@3643 | 1704 | <th>Inherited:</th> |
rossen@3643 | 1705 | <td>no</td> |
rossen@3643 | 1706 | </tr> |
rossen@3643 | 1707 | <tr> |
rossen@3643 | 1708 | <th>Percentages:</th> |
rossen@3716 | 1709 | <td>alpha channel of the image specified by <uri></td> |
rossen@3643 | 1710 | </tr> |
rossen@3643 | 1711 | <tr> |
rossen@3643 | 1712 | <th>Media:</th> |
rossen@3643 | 1713 | <td>visual</td> |
rossen@3643 | 1714 | </tr> |
rossen@3643 | 1715 | <tr> |
rossen@3643 | 1716 | <th>Computed value:</th> |
rossen@3643 | 1717 | <td>The same as the specified value after clipping the <alphavalue> to the range [0.0,1.0].</td> |
rossen@3643 | 1718 | </tr> |
rossen@3643 | 1719 | </table> |
rossen@3643 | 1720 | <p>The values of this property have the following meanings:</p> |
rossen@3643 | 1721 | <dl> |
rossen@3643 | 1722 | <dt><dfn title="'shape-image-threshold'!!'<alphavalue>'"><alphavalue></dfn></dt> |
rossen@3643 | 1723 | <dd> |
rossen@3655 | 1724 | A <number> value used to set the threshold used for extracting a shape from |
rossen@3655 | 1725 | an image. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) |
rossen@3655 | 1726 | will be clamped to this range. |
rossen@3643 | 1727 | </dd> |
rossen@3643 | 1728 | </dl> |
rossen@3643 | 1729 | <!-- End section "The shape-image-threshold property" --> |
vhardy@3659 | 1730 | <!-- |
rossen@3643 | 1731 | <h4 id="shape-shorthand-property">The 'shape' Shorthand Property</h4> |
vhardy@2780 | 1732 | |
rossen@3643 | 1733 | <table class="propdef"> |
rossen@3643 | 1734 | <tr> |
rossen@3643 | 1735 | <th>Name:</th> |
rossen@3643 | 1736 | <td><dfn title="'shape'">shape</dfn></td> |
rossen@3643 | 1737 | </tr> |
rossen@3643 | 1738 | <tr> |
rossen@3643 | 1739 | <th>Value:</th> |
rossen@3643 | 1740 | <td><var><shape-outside></var> [ / <var><shape-inside></var> ] || <var><shape-image-threshold></var></td> |
rossen@3643 | 1741 | </tr> |
rossen@3643 | 1742 | <tr> |
rossen@3643 | 1743 | <th>Initial:</th> |
rossen@3643 | 1744 | <td>see individual properties</td> |
rossen@3643 | 1745 | </tr> |
rossen@3643 | 1746 | <tr> |
rossen@3643 | 1747 | <th>Applies to:</th> |
rossen@3643 | 1748 | <td>block-level elements</td> |
rossen@3643 | 1749 | </tr> |
rossen@3643 | 1750 | <tr> |
rossen@3643 | 1751 | <th>Inherited:</th> |
rossen@3643 | 1752 | <td>no</td> |
rossen@3643 | 1753 | </tr> |
rossen@3643 | 1754 | <tr> |
rossen@3643 | 1755 | <th>Percentages:</th> |
rossen@3643 | 1756 | <td>N/A</td> |
rossen@3643 | 1757 | </tr> |
rossen@3643 | 1758 | <tr> |
rossen@3643 | 1759 | <th>Media:</th> |
rossen@3643 | 1760 | <td>visual</td> |
rossen@3643 | 1761 | </tr> |
rossen@3643 | 1762 | <tr> |
rossen@3643 | 1763 | <th>Computed value:</th> |
rossen@3643 | 1764 | <td>see individual properties</td> |
rossen@3643 | 1765 | </tr> |
rossen@3643 | 1766 | </table> |
rossen@3643 | 1767 | <p> |
rossen@3643 | 1768 | The 'shape' property is a shorthand property for setting the individual shape properties |
rossen@3643 | 1769 | at the same place in a style sheet. |
rossen@3643 | 1770 | </p> |
vhardy@2780 | 1771 | |
rossen@3643 | 1772 | <div class="example"> |
rossen@3655 | 1773 | <p>Style declaration using the 'shape' shorthand property.</p> |
rossen@3643 | 1774 | <pre><code class="html"> |
rossen@3643 | 1775 | <style type="text/css"> |
rossen@3643 | 1776 | .shape { |
rossen@3643 | 1777 | shape: rectangle(50px, 50px, 200px, 100px) / url("shape_image.png") 0.7; |
vhardy@2780 | 1778 | } |
rossen@3643 | 1779 | </style> |
rossen@3643 | 1780 | </code></pre> |
rossen@3643 | 1781 | </div> |
rossen@3643 | 1782 | <p class="issue">The example above must be finished.</p> |
vhardy@3659 | 1783 | |
vhardy@3659 | 1784 | --> |
rossen@3643 | 1785 | <!-- End section "Shape Shorthand property --> |
rossen@3643 | 1786 | <!-- End section "Declaring Shapes" --> |
stearns@6601 | 1787 | |
stearns@6601 | 1788 | <h4 id="shape-margin-property">The 'shape-margin' property</h4> |
stearns@6601 | 1789 | <p> |
stearns@6601 | 1790 | The 'shape-margin' property adds a margin to a shape-outside. |
stearns@6601 | 1791 | This defines a new shape where every point |
stearns@6601 | 1792 | is the specified distance from the shape-outside. |
stearns@6601 | 1793 | This property takes on positive values only. |
stearns@6601 | 1794 | </p> |
stearns@6601 | 1795 | <table class="propdef"> |
stearns@6601 | 1796 | <tr> |
stearns@6601 | 1797 | <th>Name:</th> |
stearns@6601 | 1798 | <td><dfn title="'shape-margin'">shape-margin</dfn></td> |
stearns@6601 | 1799 | </tr> |
stearns@6601 | 1800 | <tr> |
stearns@6601 | 1801 | <th>Value:</th> |
stearns@6601 | 1802 | <td><var><length></var></td> |
stearns@6601 | 1803 | </tr> |
stearns@6601 | 1804 | <tr> |
stearns@6601 | 1805 | <th>Initial:</th> |
stearns@6601 | 1806 | <td>0</td> |
stearns@6601 | 1807 | </tr> |
stearns@6601 | 1808 | <tr> |
stearns@6601 | 1809 | <th>Applies to:</th> |
stearns@6602 | 1810 | <td>exclusion elements and floats</td> |
stearns@6601 | 1811 | </tr> |
stearns@6601 | 1812 | <tr> |
stearns@6601 | 1813 | <th>Inherited:</th> |
stearns@6601 | 1814 | <td>no</td> |
stearns@6601 | 1815 | </tr> |
stearns@6601 | 1816 | <tr> |
stearns@6601 | 1817 | <th>Percentages:</th> |
stearns@6601 | 1818 | <td>N/A</td> |
stearns@6601 | 1819 | </tr> |
stearns@6601 | 1820 | <tr> |
stearns@6601 | 1821 | <th>Media:</th> |
stearns@6601 | 1822 | <td>visual</td> |
stearns@6601 | 1823 | </tr> |
stearns@6601 | 1824 | <tr> |
stearns@6601 | 1825 | <th>Computed value:</th> |
stearns@6601 | 1826 | <td>the absolute length</td> |
stearns@6601 | 1827 | </tr> |
stearns@6601 | 1828 | </table> |
stearns@6601 | 1829 | |
stearns@6601 | 1830 | <div class="example"> |
stearns@6601 | 1831 | <p>A 'shape-margin' creating an offset |
stearns@6609 | 1832 | from a circlular shape-outside. |
stearns@6609 | 1833 | The blue rectangles represent |
stearns@6609 | 1834 | inline content affected |
stearns@6609 | 1835 | by the shape created |
stearns@6609 | 1836 | by the margin.</p> |
stearns@6601 | 1837 | <img src="images/wrap-margin.png" |
stearns@6601 | 1838 | alt="Example of a shape-margin offset"/> |
stearns@6601 | 1839 | </div> |
stearns@6601 | 1840 | |
stearns@6601 | 1841 | <!-- End secion "shape-margin property" --> |
stearns@6601 | 1842 | |
stearns@6601 | 1843 | <h4 id="shape-padding-property">The 'shape-padding' Property</h4> |
stearns@6601 | 1844 | <p> |
stearns@6601 | 1845 | The 'shape-padding' property adds padding to a shape-inside. |
stearns@6601 | 1846 | This defines a new shape where every point |
stearns@6601 | 1847 | is the specified distance from the shape-inside. |
stearns@6601 | 1848 | This property takes on positive values only. |
stearns@6601 | 1849 | </p> |
stearns@6601 | 1850 | <table class="propdef"> |
stearns@6601 | 1851 | <tr> |
stearns@6601 | 1852 | <th>Name:</th> |
stearns@6601 | 1853 | <td><dfn title="'shape-padding'">shape-padding</dfn></td> |
stearns@6601 | 1854 | </tr> |
stearns@6601 | 1855 | <tr> |
stearns@6601 | 1856 | <th>Value:</th> |
stearns@6601 | 1857 | <td><var><length></var></td> |
stearns@6601 | 1858 | </tr> |
stearns@6601 | 1859 | <tr> |
stearns@6601 | 1860 | <th>Initial:</th> |
stearns@6601 | 1861 | <td>0</td> |
stearns@6601 | 1862 | </tr> |
stearns@6601 | 1863 | <tr> |
stearns@6601 | 1864 | <th>Applies to:</th> |
stearns@6602 | 1865 | <td>block-level elements</td> |
stearns@6601 | 1866 | </tr> |
stearns@6601 | 1867 | <tr> |
stearns@6601 | 1868 | <th>Inherited:</th> |
stearns@6601 | 1869 | <td>no</td> |
stearns@6601 | 1870 | </tr> |
stearns@6601 | 1871 | <tr> |
stearns@6601 | 1872 | <th>Percentages:</th> |
stearns@6601 | 1873 | <td>N/A</td> |
stearns@6601 | 1874 | </tr> |
stearns@6601 | 1875 | <tr> |
stearns@6601 | 1876 | <th>Media:</th> |
stearns@6601 | 1877 | <td>visual</td> |
stearns@6601 | 1878 | </tr> |
stearns@6601 | 1879 | <tr> |
stearns@6601 | 1880 | <th>Computed value:</th> |
stearns@6601 | 1881 | <td>the absolute length</td> |
stearns@6601 | 1882 | </tr> |
stearns@6601 | 1883 | </table> |
stearns@6609 | 1884 | |
stearns@6609 | 1885 | <div class="example"> |
stearns@6609 | 1886 | <p>A 'shape-padding' creating an offset |
stearns@6609 | 1887 | from a circlular shape-inside. |
stearns@6609 | 1888 | The light blue rectangles represent |
stearns@6609 | 1889 | inline content affected |
stearns@6609 | 1890 | by the shape created |
stearns@6609 | 1891 | by the padding.</p> |
stearns@6609 | 1892 | <img src="images/shape-padding.png" |
stearns@6609 | 1893 | alt="Example of a shape-padding offset"/> |
stearns@6609 | 1894 | </div> |
stearns@6601 | 1895 | <!-- End section "shape-padding property" --> |
stearns@6601 | 1896 | |
stearns@6601 | 1897 | <div class="note">Note that the 'shape-padding' property only affects layout of content inside |
stearns@6601 | 1898 | the element it applies to while the 'shape-margin' property only affects layout of content |
stearns@6601 | 1899 | outside the element.</div> |
vhardy@5412 | 1900 | |
rossen@3643 | 1901 | <!-- End section "Shapes" --> |
rossen@3643 | 1902 | <h2 id="conformance">Conformance</h2> |
rossen@3643 | 1903 | <h3 id="conventions">Document Conventions</h3> |
rossen@3643 | 1904 | <p> |
rossen@3643 | 1905 | Conformance requirements are expressed with a combination of descriptive assertions |
rossen@3643 | 1906 | and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, |
rossen@3643 | 1907 | “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the |
rossen@3643 | 1908 | normative parts of this document are to be interpreted as described in RFC 2119. |
rossen@3643 | 1909 | However, for readability, these words do not appear in all uppercase letters in |
rossen@3643 | 1910 | this specification. |
rossen@3643 | 1911 | </p> |
rossen@3643 | 1912 | <p> |
rossen@3643 | 1913 | All of the text of this specification is normative except sections explicitly marked |
rossen@3643 | 1914 | as non-normative, examples, and notes. [[!RFC2119]] |
rossen@3643 | 1915 | </p> |
rossen@3643 | 1916 | <p> |
rossen@3643 | 1917 | Examples in this specification are introduced with the words “for example” or are |
rossen@3643 | 1918 | set apart from the normative text with <code>class="example"</code>, like this: |
rossen@3643 | 1919 | </p> |
rossen@3643 | 1920 | <div class="example"> |
rossen@3643 | 1921 | <p>This is an example of an informative example.</p> |
rossen@3643 | 1922 | </div> |
rossen@3643 | 1923 | <p> |
rossen@3643 | 1924 | Informative notes begin with the word “Note” and are set apart from the normative |
rossen@3643 | 1925 | text with <code>class="note"</code>, like this: |
rossen@3643 | 1926 | </p> |
rossen@3643 | 1927 | <p class="note">Note, this is an informative note.</p> |
rossen@3643 | 1928 | <h3 id="conformance-classes">Conformance Classes</h3> |
rossen@3643 | 1929 | <p>Conformance to CSS Exclusions and Shapes is defined for three conformance classes:</p> |
rossen@3643 | 1930 | <dl> |
rossen@3643 | 1931 | <dt><dfn title="style sheet!!as conformance class">style sheet</dfn></dt> |
rossen@3643 | 1932 | <dd> |
rossen@3643 | 1933 | A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS style sheet</a>.</dd> |
rossen@3643 | 1934 | <dt><dfn>renderer</dfn></dt> |
rossen@3643 | 1935 | <dd> |
rossen@3643 | 1936 | A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that interprets |
rossen@3643 | 1937 | the semantics of a style sheet and renders documents that use them.</dd> |
rossen@3643 | 1938 | <dt><dfn id="authoring-tool">authoring tool</dfn></dt> |
rossen@3643 | 1939 | <dd> |
rossen@3643 | 1940 | A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes |
rossen@3643 | 1941 | a style sheet.</dd> |
rossen@3643 | 1942 | </dl> |
rossen@3643 | 1943 | <p> |
rossen@3643 | 1944 | A style sheet is conformant to CSS Exclusions and Shapes if all of its declarations |
rossen@3643 | 1945 | that use properties defined in this module have values that are valid according |
rossen@3643 | 1946 | to the generic CSS grammar and the individual grammars of each property as given |
rossen@3643 | 1947 | in this module. |
rossen@3643 | 1948 | </p> |
rossen@3643 | 1949 | <p> |
rossen@3643 | 1950 | A renderer is conformant to CSS Exclusions and Shapes if, in addition to interpreting |
rossen@3643 | 1951 | the style sheet as defined by the appropriate specifications, it supports all the |
rossen@3643 | 1952 | features defined by CSS Exclusions and Shapes by parsing them correctly and rendering |
rossen@3643 | 1953 | the document accordingly. However, the inability of a UA to correctly render a document |
rossen@3643 | 1954 | due to limitations of the device does not make the UA non-conformant. (For example, |
rossen@3643 | 1955 | a UA is not required to render color on a monochrome monitor.) |
rossen@3643 | 1956 | </p> |
rossen@3643 | 1957 | <p> |
rossen@3643 | 1958 | An authoring tool is conformant to CSS Exclusions and Shapes if it writes style |
rossen@3643 | 1959 | sheets that are syntactically correct according to the generic CSS grammar and the |
rossen@3643 | 1960 | individual grammars of each feature in this module, and meet all other conformance |
rossen@3643 | 1961 | requirements of style sheets as described in this module. |
rossen@3643 | 1962 | </p> |
rossen@3643 | 1963 | <h3 id="partial"> |
rossen@3643 | 1964 | Partial Implementations</h3> |
rossen@3643 | 1965 | <p> |
rossen@3643 | 1966 | So that authors can exploit the forward-compatible parsing rules to assign fallback |
rossen@3643 | 1967 | values, CSS renderers <strong>must</strong> treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore"> |
rossen@3643 | 1968 | ignore as appropriate</a>) any at-rules, properties, property values, keywords, |
rossen@3643 | 1969 | and other syntactic constructs for which they have no usable level of support. In |
rossen@3643 | 1970 | particular, user agents <strong>must not</strong> selectively ignore unsupported |
rossen@3643 | 1971 | component values and honor supported values in a single multi-value property declaration: |
rossen@3643 | 1972 | if any value is considered invalid (as unsupported values must be), CSS requires |
rossen@3643 | 1973 | that the entire declaration be ignored. |
rossen@3643 | 1974 | </p> |
rossen@3643 | 1975 | <h3 id="experimental"> |
rossen@3643 | 1976 | Experimental Implementations</h3> |
rossen@3643 | 1977 | <p> |
rossen@3643 | 1978 | To avoid clashes with future CSS features, the CSS2.1 specification reserves a <a |
rossen@3643 | 1979 | href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed syntax</a> |
rossen@3643 | 1980 | for proprietary and experimental extensions to CSS.</p> |
rossen@3643 | 1981 | <p> |
rossen@3643 | 1982 | Prior to a specification reaching the Candidate Recommendation stage in the W3C |
rossen@3643 | 1983 | process, all implementations of a CSS feature are considered experimental. The CSS |
rossen@3643 | 1984 | Working Group recommends that implementations use a vendor-prefixed syntax for such |
rossen@3643 | 1985 | features, including those in W3C Working Drafts. This avoids incompatibilities with |
rossen@3643 | 1986 | future changes in the draft. |
rossen@3643 | 1987 | </p> |
rossen@3643 | 1988 | <h3 id="testing"> |
rossen@3643 | 1989 | Non-Experimental Implementations</h3> |
rossen@3643 | 1990 | <p> |
rossen@3643 | 1991 | Once a specification reaches the Candidate Recommendation stage, non-experimental |
rossen@3643 | 1992 | implementations are possible, and implementors should release an unprefixed implementation |
rossen@3643 | 1993 | of any CR-level feature they can demonstrate to be correctly implemented according |
rossen@3643 | 1994 | to spec. |
rossen@3643 | 1995 | </p> |
rossen@3643 | 1996 | <p> |
rossen@3643 | 1997 | To establish and maintain the interoperability of CSS across implementations, the |
rossen@3643 | 1998 | CSS Working Group requests that non-experimental CSS renderers submit an implementation |
rossen@3643 | 1999 | report (and, if necessary, the testcases used for that implementation report) to |
rossen@3643 | 2000 | the W3C before releasing an unprefixed implementation of any CSS features. Testcases |
rossen@3643 | 2001 | submitted to W3C are subject to review and correction by the CSS Working Group. |
rossen@3643 | 2002 | </p> |
rossen@3643 | 2003 | <p> |
rossen@3643 | 2004 | Further information on submitting testcases and implementation reports can be found |
rossen@3643 | 2005 | from on the CSS Working Group's website at <a href="http://www.w3.org/Style/CSS/Test/"> |
rossen@3643 | 2006 | http://www.w3.org/Style/CSS/Test/</a>. Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite"> |
rossen@3643 | 2007 | public-css-testsuite@w3.org</a> mailing list. |
rossen@3643 | 2008 | </p> |
rossen@3643 | 2009 | <h3 id="cr-exit-criteria"> |
rossen@3643 | 2010 | CR Exit Criteria</h3> |
rossen@3643 | 2011 | <p> |
rossen@3643 | 2012 | For this specification to be advanced to Proposed Recommendation, there must be |
rossen@3643 | 2013 | at least two independent, interoperable implementations of each feature. Each feature |
rossen@3643 | 2014 | may be implemented by a different set of products, there is no requirement that |
rossen@3643 | 2015 | all features be implemented by a single product. For the purposes of this criterion, |
rossen@3643 | 2016 | we define the following terms: |
rossen@3643 | 2017 | </p> |
rossen@3643 | 2018 | <dl> |
rossen@3643 | 2019 | <dt>independent </dt> |
rossen@3643 | 2020 | <dd> |
rossen@3643 | 2021 | each implementation must be developed by a different party and cannot share, reuse, |
rossen@3643 | 2022 | or derive from code used by another qualifying implementation. Sections of code |
rossen@3643 | 2023 | that have no bearing on the implementation of this specification are exempt from |
rossen@3643 | 2024 | this requirement.</dd> |
rossen@3643 | 2025 | <dt>interoperable</dt> |
rossen@3643 | 2026 | <dd> |
rossen@3643 | 2027 | passing the respective test case(s) in the official CSS test suite, or, if the implementation |
rossen@3643 | 2028 | is not a Web browser, an equivalent test. Every relevant test in the test suite |
rossen@3643 | 2029 | should have an equivalent test created if such a user agent (UA) is to be used to |
rossen@3643 | 2030 | claim interoperability. In addition if such a UA is to be used to claim interoperability, |
rossen@3643 | 2031 | then there must one or more additional UAs which can also pass those equivalent |
rossen@3643 | 2032 | tests in the same way for the purpose of interoperability. The equivalent tests |
rossen@3643 | 2033 | must be made publicly available for the purposes of peer review. |
rossen@3643 | 2034 | </dd> |
rossen@3643 | 2035 | <dt>implementation</dt> |
rossen@3643 | 2036 | <dd> |
rossen@3643 | 2037 | a user agent which: |
rossen@3643 | 2038 | <ol class="inline"> |
rossen@3643 | 2039 | <li>implements the specification.</li> |
rossen@3643 | 2040 | <li>is available to the general public. The implementation may be a shipping product |
rossen@3643 | 2041 | or other publicly available version (i.e., beta version, preview release, or “nightly |
rossen@3643 | 2042 | build”). Non-shipping product releases must have implemented the feature(s) for |
rossen@3643 | 2043 | a period of at least one month in order to demonstrate stability.</li> |
rossen@3643 | 2044 | <li>is not experimental (i.e., a version specifically designed to pass the test suite |
rossen@3643 | 2045 | and is not intended for normal usage going forward).</li> |
rossen@3643 | 2046 | </ol> |
rossen@3643 | 2047 | </dd> |
rossen@3643 | 2048 | </dl> |
rossen@3643 | 2049 | <p> |
rossen@3643 | 2050 | The specification will remain Candidate Recommendation for at least six months. |
rossen@3643 | 2051 | </p> |
rossen@3643 | 2052 | <h2 class="no-num" id="acknowledgments">Acknowledgments</h2> |
stearns@5634 | 2053 | <p>This specification is made possible by input from |
stearns@5634 | 2054 | Andrei Bucur, |
stearns@5634 | 2055 | Alexandru Chiculita, |
stearns@5634 | 2056 | Arron Eicholz, |
stearns@5634 | 2057 | Daniel Glazman, |
stearns@5634 | 2058 | Arno Gourdol, |
stearns@5634 | 2059 | Chris Jones, |
stearns@7201 | 2060 | Bem Jones-Bey, |
stearns@5634 | 2061 | Marcus Mielke, |
stearns@5634 | 2062 | Alex Mogilevsky, |
stearns@6338 | 2063 | Hans Muller, |
stearns@5634 | 2064 | Mihnea Ovidenie, |
stearns@5634 | 2065 | Virgil Palanciuc, |
stearns@5634 | 2066 | Peter Sorotokin, |
stearns@6338 | 2067 | Bear Travis, |
stearns@5634 | 2068 | Eugene Veselov, |
stearns@5634 | 2069 | Stephen Zilles |
stearns@5634 | 2070 | and the CSS Working Group members. |
rossen@3643 | 2071 | </p> |
rossen@3643 | 2072 | <h2 class="no-num" id="references">References</h2> |
rossen@3643 | 2073 | <h3 class="no-num" id="normative-references">Normative references</h3> |
rossen@3643 | 2074 | <!--normative--> |
rossen@3643 | 2075 | <h3 class="no-num" id="other-references">Other references</h3> |
rossen@3643 | 2076 | <!--informative--> |
rossen@3643 | 2077 | <h2 class="no-num" id="index">Index</h2> |
rossen@3643 | 2078 | <!--index--> |
rossen@3643 | 2079 | <h2 class="no-num" id="property-index">Property index</h2> |
rossen@3643 | 2080 | <!-- properties --> |
vhardy@5555 | 2081 | |
vhardy@5746 | 2082 | <!-- template markup for issues pulled from Bugzilla --> |
vhardy@5746 | 2083 | <script type="text/template" id="issue-template"> |
vhardy@5746 | 2084 | <div class="issue-marker" data-bug_id="{{bug_id}}" data-bug_status="{{bug_status}}"> |
vhardy@5749 | 2085 | <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id={{bug_id}}">Issue-{{bug_id}}</a> |
vhardy@5746 | 2086 | <div class="issue-details"> |
vhardy@5746 | 2087 | <p class="short-desc">{{short_desc}}</p> |
vhardy@5746 | 2088 | </div> |
vhardy@5746 | 2089 | </div> |
vhardy@5746 | 2090 | </script> |
vhardy@5555 | 2091 | |
vhardy@5746 | 2092 | <script type="text/javascript" src="../shared/scripts/BugzillaTrackerUtil.js"></script> |
vhardy@5746 | 2093 | <script type="text/javascript" src="../shared/scripts/BugzillaTracker.js"></script> |
vhardy@5746 | 2094 | <script type="text/javascript"> |
vhardy@5748 | 2095 | checkSpecificationIssues('CSS', 'Exclusions'); |
vhardy@5746 | 2096 | </script> |
vhardy@5746 | 2097 | |
vhardy@5412 | 2098 | <h2 class="no-num" id="change-log">Change Log</h2> |
vhardy@5412 | 2099 | |
stearns@5899 | 2100 | <h3>Since <a href="http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/">May 3rd 2012</a></h3> |
stearns@5899 | 2101 | <ul> |
stearns@7201 | 2102 | <li>Defined exclusion edges relative to wrapping content's writing mode</li> |
stearns@7201 | 2103 | <li>Made use of start, end, before and after consistent</li> |
stearns@7074 | 2104 | <li>Added interpolation for basic shapes</li> |
stearns@7074 | 2105 | <li>Changed basic shapes to depend on box specified with box-sizing</li> |
stearns@6804 | 2106 | <li>Added overflow behavior for shape-inside.</li> |
stearns@6804 | 2107 | <li>Added wrap-flow:minimum.</li> |
stearns@6804 | 2108 | <li>Clarified processing model.</li> |
stearns@6804 | 2109 | <li>Changed wrap-margin and wrap-padding to shape-margin and shape-padding.</li> |
stearns@6804 | 2110 | <li>Removed wrap shorthand.</li> |
stearns@5899 | 2111 | </ul> |
stearns@5899 | 2112 | |
stearns@5899 | 2113 | <h3>Since <a href="http://www.w3.org/TR/2011/WD-css3-exclusions-20111213/">December 13th 2011</a></h3> |
vhardy@5412 | 2114 | <ul> |
stearns@6804 | 2115 | <li>Clarified processing model.</li> |
stearns@6804 | 2116 | <li>Clarified interaction with floats.</li> |
stearns@6804 | 2117 | <li>Clarified that an exclusion element establishes a new block formatting context.</li> |
vhardy@5412 | 2118 | </ul> |
vhardy@5555 | 2119 | |
rossen@3643 | 2120 | </body> |
rossen@3643 | 2121 | </html> |
rossen@3643 | 2122 | <!-- Keep this comment at the end of the file |
vhardy@2780 | 2123 | Local variables: |
vhardy@2780 | 2124 | mode: sgml |
vhardy@2780 | 2125 | sgml-declaration:"~/SGML/HTML4.decl" |
vhardy@2780 | 2126 | sgml-default-doctype-name:"html" |
vhardy@2780 | 2127 | sgml-minimize-attributes:t |
vhardy@2780 | 2128 | sgml-nofill-elements:("pre" "style" "br") |
vhardy@2780 | 2129 | sgml-live-element-indicator:t |
vhardy@2780 | 2130 | sgml-omittag:nil |
vhardy@2780 | 2131 | sgml-shorttag:nil |
vhardy@2780 | 2132 | sgml-namecase-general:t |
vhardy@2780 | 2133 | sgml-general-insert-case:lower |
vhardy@2780 | 2134 | sgml-always-quote-attributes:t |
vhardy@2780 | 2135 | sgml-indent-step:nil |
vhardy@2780 | 2136 | sgml-indent-data:t |
vhardy@2780 | 2137 | sgml-parent-document:nil |
vhardy@2780 | 2138 | sgml-exposed-tags:nil |
vhardy@2780 | 2139 | sgml-local-catalogs:nil |
vhardy@2780 | 2140 | sgml-local-ecat-files:nil |
vhardy@2780 | 2141 | End: |
vhardy@2780 | 2142 | --> |
rossen@3643 | 2143 |