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