Thu, 12 Apr 2012 12:42:02 -0700
Removed issue https://www.w3.org/Bugs/Public/show_bug.cgi?id=15858 as a result of https://www.w3.org/Style/CSS/Tracker/actions/426
stearns@5447 | 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" |
stearns@5447 | 2 | "http://www.w3.org/TR/html4/strict.dtd"> |
vhardy@3130 | 3 | |
vhardy@3547 | 4 | <html lang=en> |
vhardy@3660 | 5 | <head profile="http://www.w3.org/2006/03/hcard"><meta |
vhardy@3660 | 6 | content="text/html; charset=utf-8" http-equiv=Content-Type> |
vhardy@3547 | 7 | |
vhardy@3548 | 8 | <title>CSS Regions Module Level 3</title> |
vhardy@5377 | 9 | <link href="../default.css" rel=stylesheet type="text/css"> |
vhardy@3660 | 10 | |
vhardy@3660 | 11 | <style type="text/css"> |
vhardy@3732 | 12 | |
vhardy@3732 | 13 | /* Alternate stylesheet fonts are here because in some browsers (Opera 11.5) */ |
vhardy@3732 | 14 | /* The fonts are not applied if only loaded from the alternate stylesheet */ |
vhardy@3972 | 15 | |
vhardy@3972 | 16 | /* License font the following two fonts: fonts/Droid-Serif-fontfacekit/Google Android License.txt */ |
vhardy@3972 | 17 | @import url(fonts/Droid-Serif-fontfacekit/stylesheet.css); |
vhardy@3972 | 18 | @import url(fonts/Droid-Sans-Mono-fontfacekit/stylesheet.css); |
vhardy@3732 | 19 | |
vhardy@3660 | 20 | a.toggle { |
vhardy@3660 | 21 | position: fixed; |
vhardy@3660 | 22 | top: 0.5em; |
vhardy@3660 | 23 | right: 0.5em; |
vhardy@3660 | 24 | font-size: smaller; |
vhardy@3660 | 25 | color: gray; |
vhardy@3660 | 26 | opacity: 0.2; |
vhardy@3660 | 27 | } |
vhardy@3660 | 28 | |
vhardy@3660 | 29 | a.toggle:hover { |
vhardy@3660 | 30 | opacity: 1; |
vhardy@3660 | 31 | color: #46A4E9; |
vhardy@3660 | 32 | } |
vhardy@3728 | 33 | |
vhardy@3728 | 34 | .issue.resolved, .issue.stale, .issue.moved { |
vhardy@3728 | 35 | display: none; |
vhardy@3728 | 36 | } |
vhardy@3973 | 37 | |
vhardy@3973 | 38 | |
vhardy@3973 | 39 | #region-style-example p, #region-style-example pre { |
vhardy@3973 | 40 | clear: both; |
vhardy@3973 | 41 | } |
vhardy@3973 | 42 | |
vhardy@3973 | 43 | #region_styling_illustration { |
vhardy@3973 | 44 | margin: 0px auto; |
vhardy@3973 | 45 | width: 70ex; |
vhardy@3973 | 46 | } |
vhardy@3977 | 47 | |
vhardy@3977 | 48 | .big.note { |
vhardy@3977 | 49 | font-size: 1.2em; |
vhardy@3977 | 50 | line-height: 1.3em; |
vhardy@3977 | 51 | color: #2f2f2f; |
vhardy@3973 | 52 | } |
vhardy@3977 | 53 | |
vhardy@4119 | 54 | #mobile-logo { |
vhardy@4119 | 55 | display: none; |
vhardy@4119 | 56 | } |
vhardy@4395 | 57 | |
vhardy@4412 | 58 | @media screen and (min-width: 68em){ |
vhardy@4412 | 59 | |
vhardy@4395 | 60 | .issue-marker { |
vhardy@4395 | 61 | position: absolute; |
vhardy@4395 | 62 | width: 20ex; |
vhardy@4395 | 63 | margin-left: -22ex; |
vhardy@4395 | 64 | text-align: right; |
vhardy@4412 | 65 | margin-bottom: 1em; |
vhardy@4412 | 66 | } |
vhardy@4412 | 67 | |
vhardy@4412 | 68 | div.issue-marker .issue-marker { |
vhardy@4412 | 69 | position: static; |
vhardy@4412 | 70 | width: auto; |
vhardy@4412 | 71 | margin-left: 0; |
vhardy@4412 | 72 | text-align: right; |
vhardy@4412 | 73 | } |
vhardy@4412 | 74 | |
vhardy@4412 | 75 | div.issue-marker { |
vhardy@4412 | 76 | position: absolute; |
vhardy@4412 | 77 | width: 20ex; |
vhardy@4412 | 78 | margin-left: -22ex; |
vhardy@4395 | 79 | } |
vhardy@4395 | 80 | } |
vhardy@4395 | 81 | |
vhardy@4400 | 82 | @media screen and (max-width: 68em){ |
vhardy@4395 | 83 | .issue-marker { |
vhardy@4412 | 84 | margin-bottom: 1em; |
vhardy@4395 | 85 | } |
vhardy@4395 | 86 | |
vhardy@4395 | 87 | .issue-marker a:link { |
vhardy@4395 | 88 | padding-left: 0.5em; |
vhardy@4395 | 89 | } |
vhardy@4412 | 90 | } |
vhardy@4412 | 91 | |
vhardy@4412 | 92 | #issue-manager form{ |
vhardy@4412 | 93 | background: #eee; |
vhardy@4412 | 94 | padding:10px 1em; |
vhardy@4395 | 95 | } |
vhardy@4412 | 96 | |
vhardy@4412 | 97 | /* hide all non-"updated" issues */ |
vhardy@4412 | 98 | #issue-manager[data-view_state="updated"] #issue-list>div:not([data-issue_state="updated"]){ |
vhardy@4412 | 99 | display:none; |
vhardy@4412 | 100 | } |
vhardy@4412 | 101 | |
vhardy@4412 | 102 | /* hide all non-"new" issues */ |
vhardy@4412 | 103 | #issue-manager[data-view_state="new"] #issue-list>div:not([data-issue_state="new"]){ |
vhardy@4412 | 104 | display:none; |
vhardy@4412 | 105 | } |
vhardy@4412 | 106 | |
vhardy@4412 | 107 | #issue-manager .issue-marker{ |
vhardy@4412 | 108 | background: none; |
vhardy@4412 | 109 | position: relative; |
vhardy@4412 | 110 | margin:0; |
vhardy@4412 | 111 | width:auto; |
vhardy@4412 | 112 | text-align:left; |
vhardy@4412 | 113 | padding:0.5em 0; |
vhardy@4412 | 114 | } |
vhardy@4412 | 115 | |
vhardy@4412 | 116 | #issue-manager .issue-marker a:link{ |
vhardy@4412 | 117 | padding:0.5em; |
vhardy@4412 | 118 | } |
vhardy@4412 | 119 | |
vhardy@4412 | 120 | #issue-list div[data-issue_state="new"]{ |
vhardy@4412 | 121 | background:#C1FFC1; |
vhardy@4412 | 122 | } |
vhardy@4412 | 123 | |
vhardy@4412 | 124 | #issue-list div[data-issue_state="resolved"]{ |
vhardy@4412 | 125 | background:white; |
vhardy@4412 | 126 | color: #a0a0a0; |
vhardy@4412 | 127 | } |
vhardy@4412 | 128 | |
vhardy@4412 | 129 | #issue-list div[data-issue_state="updated"]{ |
vhardy@4412 | 130 | background:papayawhip; |
vhardy@4412 | 131 | } |
vhardy@4412 | 132 | |
vhardy@4412 | 133 | #issue-list{ |
vhardy@4412 | 134 | margin-top:20px; |
vhardy@4412 | 135 | } |
vhardy@4412 | 136 | |
vhardy@4412 | 137 | #issue-list pre{ |
vhardy@4412 | 138 | padding:1em; |
vhardy@4412 | 139 | margin:0; |
vhardy@4412 | 140 | } |
vhardy@4412 | 141 | |
vhardy@4412 | 142 | #issue-list>div{ |
vhardy@4412 | 143 | position:relative; |
vhardy@4412 | 144 | } |
vhardy@4412 | 145 | |
vhardy@4412 | 146 | #issue-list a.issue-markup-trigger{ |
vhardy@4412 | 147 | font-size: 0.8em; |
vhardy@4412 | 148 | padding: 0.2em 0.5em; |
vhardy@4412 | 149 | background: #eee; |
vhardy@4412 | 150 | text-decoration: none; |
vhardy@4412 | 151 | color: #444; |
vhardy@4412 | 152 | position: absolute; |
vhardy@4412 | 153 | right: 10px; |
vhardy@4412 | 154 | top: 10px; |
vhardy@4412 | 155 | z-index: 1; |
vhardy@4412 | 156 | } |
vhardy@4412 | 157 | |
vhardy@4412 | 158 | #issue-list a.issue-markup-trigger:hover{ |
vhardy@4412 | 159 | background: #ddd; |
vhardy@4412 | 160 | color: #000; |
vhardy@4412 | 161 | } |
vhardy@4412 | 162 | |
vhardy@4412 | 163 | #issue-list .showMarkup pre{ |
vhardy@4412 | 164 | display: block; |
vhardy@4412 | 165 | } |
vhardy@4412 | 166 | |
vhardy@4412 | 167 | #issue-list .showMarkup .issue-marker, |
vhardy@4412 | 168 | #issue-list pre{ |
vhardy@4412 | 169 | display: none; |
vhardy@4412 | 170 | } |
vhardy@4412 | 171 | |
vhardy@4395 | 172 | .issue-marker { |
vhardy@4395 | 173 | background:#eee; |
vhardy@4395 | 174 | border:1px solid #ddd; |
vhardy@4395 | 175 | font-size: 1em; |
vhardy@4395 | 176 | } |
vhardy@4412 | 177 | |
vhardy@4412 | 178 | .issue-marker.wrapper { |
vhardy@4412 | 179 | background: none; |
vhardy@4412 | 180 | border: none; |
vhardy@4412 | 181 | } |
vhardy@4395 | 182 | |
vhardy@4395 | 183 | .issue-marker a:link { |
vhardy@4395 | 184 | color: #c00; |
vhardy@4395 | 185 | background: none; |
vhardy@4395 | 186 | font-weight: normal; |
vhardy@4395 | 187 | padding-right: 0.5em; |
vhardy@4395 | 188 | } |
vhardy@4395 | 189 | |
vhardy@4395 | 190 | .issue-details { |
vhardy@4395 | 191 | padding:0.5em; |
vhardy@4395 | 192 | font-size: 0.8em; |
vhardy@4395 | 193 | line-height: 1.5; |
vhardy@4395 | 194 | } |
vhardy@4395 | 195 | |
vhardy@4395 | 196 | .issue-details p{ |
vhardy@4395 | 197 | padding:0; |
vhardy@4395 | 198 | margin:0; |
vhardy@4395 | 199 | } |
vhardy@4395 | 200 | |
vhardy@4395 | 201 | .issue-details .status{ |
vhardy@4395 | 202 | background:#333; |
vhardy@4395 | 203 | color:white; |
vhardy@4395 | 204 | float:left; |
vhardy@4395 | 205 | padding:0.15em 0.8em; |
vhardy@4395 | 206 | font-size:0.8em; |
vhardy@4395 | 207 | margin-right:0.8em; |
vhardy@4395 | 208 | text-transform:uppercase; |
vhardy@4395 | 209 | } |
vhardy@3660 | 210 | </style> |
bert@3956 | 211 | <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet |
bert@3956 | 212 | type="text/css"> |
vhardy@4397 | 213 | <link href="../alternate-spec-style.css" id=st rel=stylesheet |
vhardy@4119 | 214 | title="alternate spec style" type="text/css"> |
vhardy@3130 | 215 | |
vhardy@3130 | 216 | <body> |
vhardy@4119 | 217 | <div class=head id=div-head> |
vhardy@4119 | 218 | <p><a href="http://www.w3.org/"><img alt=W3C height=53 id=mobile-logo |
vhardy@4119 | 219 | src="http://www.w3.org/2008/site/images/logo-w3c-mobile-lg" width=90></a> |
vhardy@4119 | 220 | <!--begin-logo--> |
vhardy@4119 | 221 | |
vhardy@3130 | 222 | <p><a href="http://www.w3.org/"><img alt=W3C height=48 |
vhardy@3130 | 223 | src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo--></p> |
vhardy@3130 | 224 | |
vhardy@3940 | 225 | <h1 id=css-regions-module>CSS Regions Module Level 3</h1> |
vhardy@3940 | 226 | |
vhardy@5467 | 227 | <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 12 April 2012</h2> |
vhardy@3130 | 228 | |
vhardy@3130 | 229 | <dl> |
vhardy@3130 | 230 | <dt>This version: |
vhardy@3130 | 231 | |
vhardy@3130 | 232 | <dd><a |
vhardy@5467 | 233 | href="http://www.w3.org/TR/2012/ED-css3-regions-20120412/">http://www.w3.org/csswg/css3-regions</a> |
vhardy@3130 | 234 | |
vhardy@3130 | 235 | <dt>Latest version: |
vhardy@3130 | 236 | |
vhardy@3130 | 237 | <dd><a |
vhardy@3940 | 238 | href="http://www.w3.org/TR/css3-regions/">http://www.w3.org/TR/css3-regions/</a> |
vhardy@3130 | 239 | |
vhardy@3130 | 240 | <dt>Previous version: |
vhardy@3130 | 241 | |
vhardy@3940 | 242 | <dd><a |
bert@3956 | 243 | href="http://www.w3.org/TR/2011/WD-css3-regions-20111129/">http://www.w3.org/TR/2011/WD-css3-regions-20111129/</a> |
vhardy@3130 | 244 | |
vhardy@4679 | 245 | <dt>Editors: |
vhardy@4679 | 246 | |
vhardy@4679 | 247 | <dd class=vcard><span class=fn>Vincent Hardy</span>, <span |
vhardy@4679 | 248 | class=org>Adobe Systems, Inc.</span>, <span |
vhardy@4679 | 249 | class=email>vhardy@adobe.com</span> |
vhardy@4679 | 250 | |
vhardy@4679 | 251 | <dd class=vcard><span class=fn>Alex Mogilevsky</span>, <span |
vhardy@4679 | 252 | class=org>Microsoft</span>, <span |
vhardy@4679 | 253 | class=email>alexmog@microsoft.com</span> |
vhardy@4679 | 254 | |
vhardy@4679 | 255 | <dt>Issues List: |
vhardy@4395 | 256 | |
vhardy@4395 | 257 | <dd><a |
stearns@5453 | 258 | href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&component=Regions&resolution=---">Bugzilla |
vhardy@4395 | 259 | Bugs for CSS regions</a> |
vhardy@4395 | 260 | |
vhardy@4679 | 261 | <dt>Discussion: |
vhardy@4679 | 262 | |
vhardy@4679 | 263 | <dd><a |
vhardy@4679 | 264 | href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> |
vhardy@4679 | 265 | with subject line "<code>[css3-regions] message topic</code>" |
vhardy@3130 | 266 | </dl> |
vhardy@3130 | 267 | <!--begin-copyright--> |
vhardy@3130 | 268 | <p class=copyright><a |
vhardy@3130 | 269 | href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" |
vhardy@5131 | 270 | rel=license>Copyright</a> © 2012 <a href="http://www.w3.org/"><abbr |
vhardy@5131 | 271 | title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a |
vhardy@5131 | 272 | href="http://www.csail.mit.edu/"><abbr |
vhardy@5131 | 273 | title="Massachusetts Institute of Technology">MIT</abbr></a>, <a |
vhardy@5131 | 274 | href="http://www.ercim.eu/"><abbr |
vhardy@5131 | 275 | title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, |
vhardy@3660 | 276 | <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a |
vhardy@3130 | 277 | href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, |
vhardy@3130 | 278 | <a |
vhardy@3130 | 279 | href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> |
vhardy@3130 | 280 | and <a |
vhardy@3130 | 281 | href="http://www.w3.org/Consortium/Legal/copyright-documents">document |
vhardy@3130 | 282 | use</a> rules apply.</p> |
vhardy@3130 | 283 | <!--end-copyright--> |
vhardy@3130 | 284 | <hr title="Separator for header"> |
vhardy@3130 | 285 | </div> |
vhardy@3130 | 286 | |
vhardy@3130 | 287 | <h2 class="no-num no-toc" id=abstract>Abstract</h2> |
vhardy@3130 | 288 | |
vhardy@3301 | 289 | <p>The CSS regions module allows content to flow across multiple areas |
vhardy@3549 | 290 | called regions. The regions are not necessarily contiguous in the document |
vhardy@3549 | 291 | order. The CSS regions module provides an advanced content flow mechanism, |
vhardy@3549 | 292 | which can be combined with positioning schemes as defined by other CSS |
vhardy@3549 | 293 | modules such as the Multi-Column Module <a href="#CSS3COL" |
vhardy@3130 | 294 | rel=biblioentry>[CSS3COL]<!--{{CSS3COL}}--></a> or the Grid Layout Module |
vhardy@3130 | 295 | <a href="#CSS3-GRID-LAYOUT" |
vhardy@3130 | 296 | rel=biblioentry>[CSS3-GRID-LAYOUT]<!--{{CSS3-GRID-LAYOUT}}--></a> to |
vhardy@3130 | 297 | position the regions where content flows. |
vhardy@3130 | 298 | |
vhardy@3130 | 299 | <h2 class="no-num no-toc" id=status-of-this-document>Status of this |
vhardy@3130 | 300 | document</h2> |
vhardy@3977 | 301 | |
vhardy@4314 | 302 | <p class="big note"><span class=note-prefix>Note </span>This document uses |
vhardy@4314 | 303 | an experimental style sheet. We welcome your feedback on the styles at <a |
vhardy@3977 | 304 | href="mailto:site-comments@w3.org">site-comments@w3.org</a>.</p> |
vhardy@3130 | 305 | <!--begin-status--> |
vhardy@3130 | 306 | |
vhardy@3130 | 307 | <p>This is a public copy of the editors' draft. It is provided for |
vhardy@3130 | 308 | discussion only and may change at any moment. Its publication here does |
vhardy@3130 | 309 | not imply endorsement of its contents by W3C. Don't cite this document |
vhardy@3130 | 310 | other than as work in progress. |
vhardy@3130 | 311 | |
vhardy@3130 | 312 | <p>The (<a |
vhardy@3130 | 313 | href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public |
vhardy@3130 | 314 | mailing list <a |
vhardy@3130 | 315 | href="mailto:www-style@w3.org?Subject=%5Bcss3-regions%5D%20PUT%20SUBJECT%20HERE"> |
vhardy@3130 | 316 | www-style@w3.org</a> (see <a |
vhardy@3130 | 317 | href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for |
vhardy@3130 | 318 | discussion of this specification. When sending e-mail, please put the text |
vhardy@3130 | 319 | “css3-regions” in the subject, preferably like this: |
vhardy@3130 | 320 | “[<!---->css3-regions<!---->] <em>…summary of |
vhardy@3130 | 321 | comment…</em>” |
vhardy@3130 | 322 | |
vhardy@3130 | 323 | <p>This document was produced by the <a href="/Style/CSS/members">CSS |
vhardy@3130 | 324 | Working Group</a> (part of the <a href="/Style/">Style Activity</a>). |
vhardy@3130 | 325 | |
vhardy@3130 | 326 | <p>This document was produced by a group operating under the <a |
vhardy@3130 | 327 | href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent |
vhardy@3130 | 328 | Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status" |
vhardy@3130 | 329 | rel=disclosure>public list of any patent disclosures</a> made in |
vhardy@3130 | 330 | connection with the deliverables of the group; that page also includes |
vhardy@3130 | 331 | instructions for disclosing a patent. An individual who has actual |
vhardy@3130 | 332 | knowledge of a patent which the individual believes contains <a |
vhardy@3130 | 333 | href="/Consortium/Patent-Policy-20040205/#def-essential">Essential |
vhardy@3130 | 334 | Claim(s)</a> must disclose the information in accordance with <a |
vhardy@3130 | 335 | href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the |
vhardy@3130 | 336 | W3C Patent Policy</a>.</p> |
vhardy@3130 | 337 | <!--end-status--> |
vhardy@3130 | 338 | |
vhardy@3940 | 339 | <p>This draft is related to the drafts about Multi-column Layout <a |
bert@3956 | 340 | href="#CSS3COL" rel=biblioentry>[CSS3COL]<!--{{CSS3COL}}--></a>, Grid |
bert@3956 | 341 | Layout <a href="#CSS3GRID" |
bert@3956 | 342 | rel=biblioentry>[CSS3GRID]<!--{{CSS3GRID}}--></a>, Flexible Box Layout <a |
bert@3956 | 343 | href="#CSS3-FLEXBOX" |
bert@3956 | 344 | rel=biblioentry>[CSS3-FLEXBOX]<!--{{CSS3-FLEXBOX}}--></a>, and Template |
bert@3956 | 345 | Layout <a href="#CSS3LAYOUT" |
bert@3956 | 346 | rel=biblioentry>[CSS3LAYOUT]<!--{{CSS3LAYOUT}}--></a>. |
vhardy@3940 | 347 | |
vhardy@3130 | 348 | <h2 class="no-num no-toc" id=table-of-contents>Table of contents</h2> |
vhardy@3130 | 349 | <!--begin-toc--> |
vhardy@3130 | 350 | |
vhardy@3130 | 351 | <ul class=toc> |
vhardy@3130 | 352 | <li><a href="#introduction"><span class=secno>1. </span>Introduction</a> |
vhardy@3130 | 353 | <ul class=toc> |
vhardy@3130 | 354 | <li><a href="#named-flows-and-regions"><span class=secno>1.1. |
stearns@5445 | 355 | </span>Named flows and region chains</a> |
stearns@5445 | 356 | |
stearns@5445 | 357 | <li><a href="#region-styling"><span class=secno>1.2. </span>CSS Region |
stearns@5445 | 358 | names and styling</a> |
vhardy@3130 | 359 | </ul> |
vhardy@3130 | 360 | |
vhardy@3277 | 361 | <li><a href="#css-regions-concepts"><span class=secno>2. </span>CSS |
vhardy@3277 | 362 | regions concepts</a> |
vhardy@3130 | 363 | <ul class=toc> |
vhardy@3277 | 364 | <li><a href="#regions"><span class=secno>2.1. </span>Regions</a> |
vhardy@3277 | 365 | |
stearns@5445 | 366 | <li><a href="#named-flow"><span class=secno>2.2. </span>Named flows</a> |
vhardy@3277 | 367 | |
vhardy@3277 | 368 | <li><a href="#regions-flow-breaking-rules"><span class=secno>2.3. |
vhardy@3277 | 369 | </span>Regions flow breaking rules</a> |
vhardy@3130 | 370 | </ul> |
vhardy@3130 | 371 | |
vhardy@5289 | 372 | <li><a href="#properties-and-rules"><span class=secno>3. </span>Properties |
vhardy@3277 | 373 | and rules</a> |
vhardy@3130 | 374 | <ul class=toc> |
vhardy@5289 | 375 | <li><a href="#the-flow-into-property"><span class=secno>3.1. </span>The |
vhardy@3277 | 376 | ‘<code class=property>flow-into</code>’ property</a> |
vhardy@3130 | 377 | |
vhardy@5289 | 378 | <li><a href="#the-flow-from-property"><span class=secno>3.2. </span>The |
vhardy@3547 | 379 | ‘<code class=property>flow-from</code>’ property</a> |
vhardy@5289 | 380 | |
vhardy@5289 | 381 | <li><a href="#region-flow-break"><span class=secno>3.3. </span>Region |
vhardy@3377 | 382 | flow break properties: ‘<code |
vhardy@3130 | 383 | class=property>break-before</code>’, ‘<code |
vhardy@3130 | 384 | class=property>break-after</code>’, ‘<code |
vhardy@3130 | 385 | class=property>break-inside</code>’</a> |
vhardy@3130 | 386 | |
vhardy@5289 | 387 | <li><a href="#the-region-overflow-property"><span class=secno>3.4. |
vhardy@3130 | 388 | </span>The region-overflow property</a> |
vhardy@3130 | 389 | |
vhardy@5289 | 390 | <li><a href="#the-at-region-style-rule"><span class=secno>3.5. |
vhardy@3130 | 391 | </span>The @region rule</a> |
vhardy@3130 | 392 | </ul> |
vhardy@3130 | 393 | |
vhardy@5289 | 394 | <li><a href="#multi-column-regions"><span class=secno>4. |
vhardy@5131 | 395 | </span>Multi-column regions</a> |
vhardy@5131 | 396 | |
vhardy@5289 | 397 | <li><a href="#pseudo_elements"><span class=secno>5. |
vhardy@3277 | 398 | </span>Pseudo-elements</a> |
vhardy@3130 | 399 | <ul class=toc> |
vhardy@5289 | 400 | <li><a href="#processing-model"><span class=secno>5.1. </span>Processing |
vhardy@3547 | 401 | model</a> |
vhardy@3277 | 402 | </ul> |
vhardy@3277 | 403 | |
vhardy@5289 | 404 | <li><a href="#cssom_view_and_css_regions"><span class=secno>6. |
vhardy@3277 | 405 | </span>CSSOM view and CSS regions</a> |
vhardy@3277 | 406 | <ul class=toc> |
vhardy@5289 | 407 | <li><a href="#the-namedflow-interface"><span class=secno>6.1. </span>The |
vhardy@3130 | 408 | NamedFlow interface</a> |
vhardy@3130 | 409 | |
vhardy@5289 | 410 | <li><a href="#the-region-interface"><span class=secno>6.2. </span>The |
vhardy@5255 | 411 | Region interface</a> |
vhardy@3130 | 412 | |
vhardy@5289 | 413 | <li><a href="#region-flow-layout-events"><span class=secno>6.3. |
vhardy@3277 | 414 | </span>Region flow layout events</a> |
vhardy@5270 | 415 | |
vhardy@5289 | 416 | <li><a href="#cssomview-and-regions"><span class=secno>6.4. </span>CSS |
vhardy@5270 | 417 | OM View and CSS Regions</a> |
vhardy@5270 | 418 | <ul class=toc> |
vhardy@5270 | 419 | <li><a |
vhardy@5270 | 420 | href="#cssomview-getclientrects-and-getboundingclientrect"><span |
vhardy@5289 | 421 | class=secno>6.4.1. </span><code class=idl>getClientRects()</code> and |
vhardy@5270 | 422 | <code>getBoundingClientRects()</code></a> |
vhardy@5270 | 423 | |
vhardy@5289 | 424 | <li><a href="#cssomview-offset-attributes"><span class=secno>6.4.2. |
vhardy@5270 | 425 | </span><code class=idl>offsetTop</code>, <code |
vhardy@5270 | 426 | class=idl>offsetLeft</code>, <code class=idl>offsetWidth</code> and |
vhardy@5270 | 427 | <code class=idl>offsetWidth</code></a> |
vhardy@5270 | 428 | </ul> |
vhardy@3130 | 429 | </ul> |
vhardy@3130 | 430 | |
vhardy@5289 | 431 | <li><a href="#regions-visual-formatting-details"><span class=secno>7. |
vhardy@5289 | 432 | </span>Regions visual formatting details</a> |
vhardy@5289 | 433 | <ul class=toc> |
vhardy@5289 | 434 | <li><a href="#regions-flow-content-box"><span class=secno>7.1. |
vhardy@5289 | 435 | </span>The Region Flow Content Box (RFBC)</a> |
vhardy@5289 | 436 | <ul class=toc> |
vhardy@5354 | 437 | <li><a href="#rfbc-width-resolution"><span class=secno>7.1.1. |
vhardy@5335 | 438 | </span>RFCB ‘<code class=property>width</code>’ |
vhardy@5335 | 439 | resolution</a> |
vhardy@5289 | 440 | </ul> |
vhardy@5335 | 441 | |
vhardy@5335 | 442 | <li><a href="#regions-visual-formatting-steps"><span class=secno>7.2. |
vhardy@5335 | 443 | </span>Regions visual formatting steps</a> |
vhardy@5335 | 444 | <ul class=toc> |
vhardy@5354 | 445 | <li><a href="#rfcb-flow-fragment-height-resolution"><span |
vhardy@5354 | 446 | class=secno>7.2.1. </span>Step 1: RFCB flow fragment height |
vhardy@5354 | 447 | resolution</a> |
vhardy@5335 | 448 | <ul class=toc> |
vhardy@5354 | 449 | <li><a href="#rfcb-flow-fragment-height-resolution-phase-1"><span |
vhardy@5354 | 450 | class=secno>7.2.1.1. </span>RFCB flow fragment height resolution, |
vhardy@5354 | 451 | Phase 1</a> |
vhardy@5354 | 452 | |
vhardy@5354 | 453 | <li><a href="#rfcb-flow-fragment-height-resolution-phase-2"><span |
vhardy@5366 | 454 | class=secno>7.2.1.2. </span>RFCB flow fragment height resolution, |
vhardy@5354 | 455 | Phase 2</a> |
vhardy@5335 | 456 | </ul> |
vhardy@5335 | 457 | |
vhardy@5335 | 458 | <li><a href="#regions-boxes-layout"><span class=secno>7.2.2. |
vhardy@5335 | 459 | </span>Step 2: regions boxes layout</a> |
vhardy@5335 | 460 | |
vhardy@5335 | 461 | <li><a href="#named-flows-layout"><span class=secno>7.2.3. </span>Step |
vhardy@5335 | 462 | 3: named flows layout</a> |
vhardy@5335 | 463 | </ul> |
vhardy@5335 | 464 | |
vhardy@5335 | 465 | <li><a href="#regions-visual-formatting-implementation-note"><span |
vhardy@5335 | 466 | class=secno>7.3. </span>Regions visual formatting: implementation |
vhardy@5335 | 467 | note</a> |
vhardy@5335 | 468 | |
vhardy@5335 | 469 | <li><a href="#regions-visual-formatting-examples"><span class=secno>7.4. |
vhardy@5335 | 470 | </span>Regions visual formatting example</a> |
vhardy@5366 | 471 | <ul class=toc> |
vhardy@5366 | 472 | <li><a href="#step-1--phase-1-laying-out-rfcbs-with-us"><span |
vhardy@5366 | 473 | class=secno>7.4.1. </span>Step 1 - Phase 1: Laying out RFCBs with |
vhardy@5366 | 474 | used height of zero</a> |
vhardy@5366 | 475 | |
vhardy@5366 | 476 | <li><a href="#step-1--phase-2-layout-flow-to-compute-t"><span |
vhardy@5366 | 477 | class=secno>7.4.2. </span>Step 1 - Phase 2: Layout flow to compute |
vhardy@5366 | 478 | the RFCBs' flow fragments heights</a> |
vhardy@5366 | 479 | |
vhardy@5366 | 480 | <li><a href="#step-2-layout-document-and-regions-witho"><span |
vhardy@5366 | 481 | class=secno>7.4.3. </span>Step 2: Layout document and regions without |
vhardy@5366 | 482 | named flows</a> |
vhardy@5366 | 483 | |
vhardy@5366 | 484 | <li><a href="#step-3-named-flows-layout"><span class=secno>7.4.4. |
vhardy@5366 | 485 | </span>Step 3: named flows layout</a> |
vhardy@5366 | 486 | </ul> |
vhardy@5289 | 487 | </ul> |
vhardy@5289 | 488 | |
vhardy@5289 | 489 | <li><a href="#relation-to-document-events"><span class=secno>8. |
vhardy@5289 | 490 | </span>Relation to document events</a> |
vhardy@5289 | 491 | |
vhardy@5289 | 492 | <li><a href="#relation-to-other-specifications"><span class=secno>9. |
vhardy@3301 | 493 | </span>Relation to other specifications</a> |
vhardy@3301 | 494 | |
vhardy@5289 | 495 | <li><a href="#usecases"><span class=secno>10. </span>Use Cases</a> |
vhardy@5289 | 496 | |
vhardy@5289 | 497 | <li><a href="#conformance"><span class=secno>11. </span>Conformance</a> |
vhardy@5289 | 498 | |
vhardy@5289 | 499 | <li><a href="#changes"><span class=secno>12. </span>Changes</a> |
vhardy@3130 | 500 | <ul class=toc> |
vhardy@5289 | 501 | <li><a href="#changes_from_June_09_2011"><span class=secno>12.1. |
vhardy@4119 | 502 | </span>Changes from November 29<sup>th</sup> 2011 version</a> |
vhardy@4119 | 503 | |
vhardy@5289 | 504 | <li><a href="#changes_from_June_09_2011"><span class=secno>12.2. |
vhardy@3130 | 505 | </span>Changes from June 09<sup>th</sup> 2011 version</a> |
vhardy@3130 | 506 | </ul> |
vhardy@3130 | 507 | |
vhardy@3130 | 508 | <li class=no-num><a href="#acknowledgments">Acknowledgments</a> |
vhardy@3130 | 509 | |
stearns@5445 | 510 | <li class=no-num><a href="#intro-example-code">Appendix A. Example Code |
stearns@5445 | 511 | for Introduction</a> |
stearns@5445 | 512 | |
vhardy@3130 | 513 | <li class=no-num><a href="#references">References</a> |
vhardy@3130 | 514 | <ul class=toc> |
vhardy@3130 | 515 | <li class=no-num><a href="#normative-references">Normative |
vhardy@3130 | 516 | references</a> |
vhardy@3130 | 517 | |
vhardy@3130 | 518 | <li class=no-num><a href="#other-references">Other references</a> |
vhardy@3130 | 519 | </ul> |
vhardy@3130 | 520 | |
vhardy@3130 | 521 | <li class=no-num><a href="#index">Index</a> |
vhardy@3130 | 522 | |
vhardy@3130 | 523 | <li class=no-num><a href="#property-index">Property index</a> |
vhardy@4412 | 524 | |
vhardy@5289 | 525 | <li><a href="#issue-manager0"><span class=secno>13. </span>Issue |
vhardy@4412 | 526 | manager</a> |
vhardy@3130 | 527 | </ul> |
vhardy@3130 | 528 | <!--end-toc--> |
vhardy@3130 | 529 | |
vhardy@3130 | 530 | <h2 id=introduction><span class=secno>1. </span>Introduction</h2> |
vhardy@3130 | 531 | |
vhardy@3130 | 532 | <p><em>This section is non-normative.</em> |
vhardy@3130 | 533 | |
stearns@5445 | 534 | <p>Displaying the complex layouts of a typical magazine, newspaper, or |
stearns@5445 | 535 | textbook on the web requires capabilities beyond those available in |
stearns@5445 | 536 | existing CSS modules. Dynamic magazine layout in particular requires |
stearns@5445 | 537 | flexibility in placement of boxes for content flows. This is the purpose |
stearns@5445 | 538 | of the CSS regions module. |
vhardy@3130 | 539 | |
vhardy@4412 | 540 | <div class=issue-marker data-bug_id=15733 data-bug_status=NEW> <a |
vhardy@4404 | 541 | href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15733">Bug-15733</a> |
vhardy@4395 | 542 | <div class=issue-details> |
vhardy@4395 | 543 | <p class=short-desc>Should the region specification define a mechanism to |
vhardy@4395 | 544 | create blocks that can be regions with CSS syntax?</p> |
vhardy@4395 | 545 | </div> |
vhardy@4395 | 546 | </div> |
vhardy@4395 | 547 | |
stearns@5445 | 548 | <p>For more complex layouts, content needs to flow from one area of the |
stearns@5445 | 549 | page to the next without limitation on the areas' sizes and positions. |
stearns@5445 | 550 | These arbitrary areas are the target of specific content flows which this |
stearns@5445 | 551 | document calls <a href="#named-flow0">named flows</a>. Each <a |
stearns@5445 | 552 | href="#named-flow0">named flow</a> can be associated with a set of CSS |
stearns@5445 | 553 | Regions called a region chain. CSS Regions are based on the rectangular |
stearns@5445 | 554 | geometry of the CSS box model. Elements in a <a href="#named-flow0">named |
stearns@5445 | 555 | flow</a> are taken out of the normal visual formatting and rendered in a |
stearns@5445 | 556 | chain of CSS Regions. |
vhardy@3130 | 557 | |
vhardy@3130 | 558 | <h3 id=named-flows-and-regions><span class=secno>1.1. </span>Named flows |
stearns@5445 | 559 | and region chains</h3> |
vhardy@3130 | 560 | |
vhardy@3130 | 561 | <p>Consider the layout illustrated in figure 1. |
vhardy@3130 | 562 | |
vhardy@3660 | 563 | <div class=figure> <img |
vhardy@3660 | 564 | alt="multiple chained regions which should receive content from a flow" |
vhardy@5377 | 565 | src="images/intro-example-layout.svg" width=400> |
vhardy@3130 | 566 | <p class=caption>Layout requiring sophisticated content flow</p> |
vhardy@3130 | 567 | </div> |
vhardy@3130 | 568 | |
stearns@5423 | 569 | <p>The designer's intent is to position an image in box ‘<code |
stearns@5445 | 570 | class=property>A</code>’ and to flow an article's content from box |
stearns@5445 | 571 | ‘<code class=css>1</code>’ through boxes ‘<code |
vhardy@3130 | 572 | class=css>2</code>’, ‘<code class=css>3</code>’ and |
stearns@5445 | 573 | ‘<code class=css>4</code>’. Note that the second box should |
stearns@5445 | 574 | have two columns, and the image is not contained in the article. Box |
stearns@5445 | 575 | ‘<code class=css>4</code>’ should auto-size to render the |
stearns@5445 | 576 | remainder of the article content that did not fit in the earlier boxes. |
vhardy@5377 | 577 | |
vhardy@5377 | 578 | <p>Figure 2 shows an example of the intended visual rendering of the |
vhardy@5377 | 579 | content. |
vhardy@5377 | 580 | |
vhardy@5377 | 581 | <div class=figure> <img |
vhardy@5377 | 582 | alt="Sample rendering showing a single thread of text flowing through a chain of regions" |
vhardy@5377 | 583 | src="images/regions-intro-rendering.png" width=450> |
vhardy@5377 | 584 | <p class=caption>Sample rendering for desired layout</p> |
vhardy@5377 | 585 | </div> |
vhardy@3130 | 586 | |
stearns@5445 | 587 | <p>There is no existing mechanism in CSS to associate the content with |
stearns@5445 | 588 | these boxes arranged in this manner so that content flows as intended. The |
stearns@5445 | 589 | CSS regions module properties provide that mechanism. |
stearns@5445 | 590 | |
stearns@5445 | 591 | <p>The following example illustrates how the content of an |
stearns@5445 | 592 | <code>article</code> element becomes a <a href="#named-flow0">named |
stearns@5445 | 593 | flow</a> and how boxes marked with ‘<code |
stearns@5445 | 594 | class=css>region1</code>’, ‘<code |
stearns@5445 | 595 | class=css>region2</code>’, ‘<code |
stearns@5445 | 596 | class=css>region3</code>’ and ‘<code |
stearns@5445 | 597 | class=css>region4</code>’ IDs become CSS Regions that consume the |
stearns@5445 | 598 | ‘<code class=css>article_flow</code>’ content. |
stearns@5445 | 599 | |
stearns@5445 | 600 | <div class=example> |
stearns@5445 | 601 | <pre> |
stearns@5445 | 602 | <style> |
stearns@5445 | 603 | article { |
stearns@5445 | 604 | <strong>flow-into: article_flow;</strong> |
stearns@5445 | 605 | } |
stearns@5445 | 606 | |
stearns@5445 | 607 | #region1, #region2, #region3, #region4 { |
stearns@5445 | 608 | <strong>flow-from: article_flow;</strong> |
stearns@5445 | 609 | } |
stearns@5445 | 610 | </style> |
stearns@5445 | 611 | </pre> |
stearns@5445 | 612 | </div> |
stearns@5445 | 613 | |
stearns@5445 | 614 | <p>The ‘<code class=css>article_flow</code>’ value on the |
stearns@5445 | 615 | ‘<a href="#flow-into"><code |
stearns@5445 | 616 | class=property>flow-into</code></a>’ property directs the |
stearns@5445 | 617 | <code>article</code> element to the ‘<code |
stearns@5445 | 618 | class=css>article_flow</code>’ <a href="#named-flow0">named |
stearns@5445 | 619 | flow</a>. Setting the ‘<a href="#flow-from"><code |
stearns@5445 | 620 | class=property>flow-from</code></a>’ property on stylable boxes to |
stearns@5445 | 621 | ‘<code class=css>article_flow</code>’ makes them CSS Regions |
stearns@5445 | 622 | and associates the resulting region chain with the <a |
stearns@5445 | 623 | href="#named-flow0">named flow</a>: the flow is ‘<code |
stearns@5445 | 624 | class=css>poured</code>’ into the region chain. |
stearns@5445 | 625 | |
stearns@5445 | 626 | <p>See <a href="#intro-example-code">Appendix A</a> for sample code using |
stearns@5445 | 627 | grid layout that implements this example |
stearns@5445 | 628 | |
stearns@5445 | 629 | <div class=note><span class=note-prefix>Note </span> |
stearns@5445 | 630 | <p><strong>CSS Regions are independent from layout</strong></p> |
stearns@5445 | 631 | |
stearns@5445 | 632 | <p>Any of the CSS layout facilities can be used to create, position and |
stearns@5445 | 633 | size boxes that can become CSS Regions. Using a grid layout <a |
stearns@5445 | 634 | href="#CSS3-GRID-LAYOUT" |
stearns@5445 | 635 | rel=biblioentry>[CSS3-GRID-LAYOUT]<!--{{CSS3-GRID-LAYOUT}}--></a> is just |
stearns@5445 | 636 | an example. The example could use a flexible box layout <a |
stearns@5445 | 637 | href="#CSS3-FLEXBOX" |
stearns@5445 | 638 | rel=biblioentry>[CSS3-FLEXBOX]<!--{{CSS3-FLEXBOX}}--></a> instead.</p> |
stearns@5445 | 639 | |
stearns@5445 | 640 | <p>The CSS regions specification does not define a layout mechanism and is |
stearns@5445 | 641 | meant to integrate with existing and future CSS layout facilities.</p> |
stearns@5445 | 642 | |
stearns@5445 | 643 | <p><strong>CSS Regions do not have to be elements</strong></p> |
stearns@5445 | 644 | |
stearns@5445 | 645 | <p>The CSS regions module is independent of the layout of boxes and the |
stearns@5445 | 646 | mechanism used to create them. For simplicity, our example code in <a |
stearns@5445 | 647 | href="#intro-example-code">Appendix A</a> uses elements to define the |
stearns@5445 | 648 | boxes.</p> |
stearns@5445 | 649 | |
stearns@5445 | 650 | <p>While the example uses elements for CSS Regions (since <a |
stearns@5445 | 651 | href="#CSS3-GRID-LAYOUT" |
stearns@5445 | 652 | rel=biblioentry>[CSS3-GRID-LAYOUT]<!--{{CSS3-GRID-LAYOUT}}--></a> |
stearns@5445 | 653 | requires elements to create grid items) it is important to note that this |
stearns@5445 | 654 | is not required. CSS Regions can be pseudo-elements, such as ‘<code |
stearns@5445 | 655 | class=css>::before</code>’ and ‘<code |
stearns@5445 | 656 | class=css>::after</code>’. The only requirement for an element or |
stearns@5445 | 657 | pseudo-element to become a CSS Region is that it needs to be subject to |
stearns@5445 | 658 | CSS styling to receive the ‘<a href="#flow-from"><code |
stearns@5445 | 659 | class=property>flow-from</code></a>’ property. The CSS page |
stearns@5445 | 660 | template module (see <a href="#CSS3-PAGE-TEMPLATE" |
stearns@5445 | 661 | rel=biblioentry>[CSS3-PAGE-TEMPLATE]<!--{{CSS3-PAGE-TEMPLATE}}--></a>) |
stearns@5445 | 662 | proposes another mechanism to create stylable boxes that can become CSS |
stearns@5445 | 663 | Regions with the <code class=css>@slot</code> syntax.</p> |
stearns@5445 | 664 | </div> |
stearns@5445 | 665 | |
stearns@5445 | 666 | <h3 id=region-styling><span class=secno>1.2. </span>CSS Region names and |
stearns@5445 | 667 | styling</h3> |
stearns@5445 | 668 | |
stearns@5445 | 669 | <p>Content can be styled depending on the CSS Region it flows into. It is |
stearns@5445 | 670 | an extension of pseudo-element styling such as <a |
stearns@5445 | 671 | href="http://www.w3.org/TR/css3-selectors/#first-line"> <code |
stearns@5445 | 672 | class=css>::first-line</code> </a> which applies a particular style to a |
stearns@5445 | 673 | fragment of content. With CSS Region styling, additional selectors may |
stearns@5445 | 674 | apply depending on the CSS Region into which content flows. |
stearns@5445 | 675 | |
stearns@5445 | 676 | <p>In our example, the designer wants to make text flowing into #region1 |
stearns@5445 | 677 | dark blue and bold. |
stearns@5445 | 678 | |
stearns@5445 | 679 | <p>This design can be expressed as shown below. |
stearns@5445 | 680 | |
stearns@5445 | 681 | <div class=example> |
stearns@5445 | 682 | <pre> |
stearns@5445 | 683 | <style> |
stearns@5445 | 684 | #region1 { |
stearns@5445 | 685 | region-name: region1; |
stearns@5445 | 686 | } |
stearns@5445 | 687 | |
stearns@5445 | 688 | p::in-region(region1) { |
stearns@5445 | 689 | color: #0C3D5F; |
stearns@5445 | 690 | font-weight: bold; |
stearns@5445 | 691 | } |
stearns@5445 | 692 | </style> |
stearns@5445 | 693 | |
stearns@5445 | 694 | TODO: This section is out of sync with section 3.5, |
stearns@5445 | 695 | which needs to be updated. |
stearns@5445 | 696 | </pre> |
stearns@5445 | 697 | </div> |
stearns@5445 | 698 | |
stearns@5445 | 699 | <p>The ::in-region(region1) pseudo-element limits its selectors to content |
stearns@5445 | 700 | flowing into #region1. The following figure shows how the rendering |
stearns@5445 | 701 | changes if we apply styling specific to #region1. Note how less text fits |
stearns@5445 | 702 | into this box now that the ‘<code |
stearns@5445 | 703 | class=property>font-weight</code>’ is bold instead of normal. |
stearns@5445 | 704 | |
stearns@5445 | 705 | <div class=figure> <img |
stearns@5445 | 706 | alt="Illustrate how changing region styling affects the flow of content." |
stearns@5445 | 707 | src="images/region-styling.png" width=450> |
stearns@5445 | 708 | <p class=caption>Different rendering with a different region styling</p> |
stearns@5445 | 709 | </div> |
stearns@5445 | 710 | |
stearns@5445 | 711 | <h2 id=css-regions-concepts><span class=secno>2. </span>CSS regions |
stearns@5445 | 712 | concepts</h2> |
stearns@5445 | 713 | |
stearns@5445 | 714 | <h3 id=regions><span class=secno>2.1. </span>Regions</h3> |
stearns@5445 | 715 | |
stearns@5445 | 716 | <div class="issue-marker wrapper"> |
stearns@5445 | 717 | <div class=issue-marker data-bug_id=15186 data-bug_status=NEW> <a |
stearns@5445 | 718 | href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15186">Bug-15186</a> |
stearns@5445 | 719 | |
stearns@5445 | 720 | <div class=issue-details> |
stearns@5445 | 721 | <p class=short-desc>Is a mechanism to auto-generate regions necessary in |
stearns@5445 | 722 | order to support reusable style sheets?</p> |
stearns@5445 | 723 | </div> |
stearns@5445 | 724 | </div> |
stearns@5445 | 725 | |
stearns@5445 | 726 | <div class=issue-marker data-bug_id=15187 data-bug_status=NEW> <a |
stearns@5445 | 727 | href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15187">Bug-15187</a> |
stearns@5445 | 728 | |
stearns@5445 | 729 | <div class=issue-details> |
stearns@5445 | 730 | <p class=short-desc>Explain how regions and pages interact. How can |
stearns@5445 | 731 | regions be placed onto certain pages, and how can they be positiond |
stearns@5445 | 732 | wrt. pages.</p> |
stearns@5445 | 733 | </div> |
stearns@5445 | 734 | </div> |
stearns@5445 | 735 | </div> |
stearns@5445 | 736 | |
stearns@5445 | 737 | <p class=index id=region title=region> A CSS Region is a stylable box that |
stearns@5445 | 738 | generates a <a |
stearns@5445 | 739 | href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes">block container |
stearns@5445 | 740 | box</a> and has an associated <a href="#named-flow0"><em><span>named |
stearns@5445 | 741 | flow</span></em></a> (see the ‘<a href="#flow-from"><code |
stearns@5445 | 742 | class=property>flow-from</code></a>’ property). The <a |
stearns@5445 | 743 | href="http://dev.w3.org/csswg/css3-multicol/#column-box">column boxes</a> |
stearns@5445 | 744 | of multi-column elements which have an associated <a |
stearns@5445 | 745 | href="#named-flow0"><em><span>named flow</span></em></a> are also regions |
stearns@5445 | 746 | (see the <a href="#multi-column-regions">section on multi-column |
stearns@5445 | 747 | regions</a>). |
stearns@5445 | 748 | |
stearns@5445 | 749 | <h3 id=named-flow><span class=secno>2.2. </span>Named flows</h3> |
stearns@5445 | 750 | |
stearns@5445 | 751 | <p>A <dfn id=named-flow0>named flow</dfn> is the ordered sequence of |
stearns@5445 | 752 | elements associated with a flow with a given identifier. Elements in a <a |
stearns@5445 | 753 | href="#named-flow0">named flow</a> are ordered according to the document |
stearns@5445 | 754 | order. |
stearns@5445 | 755 | |
stearns@5445 | 756 | <p>Elements are placed into a <a href="#named-flow0">named flow</a> with |
stearns@5445 | 757 | the ‘<a href="#flow-into"><code |
stearns@5445 | 758 | class=property>flow-into</code></a>’ property. The elements in a <a |
stearns@5445 | 759 | href="#named-flow0">named flow</a> are laid out in the <span |
stearns@5445 | 760 | title=region-chain>region chain</span> that is associated with this <a |
stearns@5445 | 761 | href="#named-flow0">named flow</a>. <span title=region>CSS Regions</span> |
stearns@5445 | 762 | are organized into a <span title=region-chain>region chain</span> |
stearns@5445 | 763 | according to the document order. |
stearns@5445 | 764 | |
stearns@5445 | 765 | <p>Content from a <a href="#named-flow0">named flow</a> is broken up |
stearns@5445 | 766 | between regions according to the regions flow breaking rules. |
stearns@5445 | 767 | |
stearns@5445 | 768 | <h3 id=regions-flow-breaking-rules><span class=secno>2.3. </span>Regions |
stearns@5445 | 769 | flow breaking rules</h3> |
stearns@5445 | 770 | |
stearns@5445 | 771 | <p>Breaking a <a href="#named-flow0">named flow</a> across a region chain |
stearns@5445 | 772 | is similar to breaking a document's content across pages (see <a |
stearns@5445 | 773 | href="#CSS3PAGE" rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a>) or a |
stearns@5445 | 774 | multi-column element's content across column boxes (see <a href="#CSS3COL" |
stearns@5445 | 775 | rel=biblioentry>[CSS3COL]<!--{{CSS3COL}}--></a>). One difference is that |
stearns@5445 | 776 | page boxes are generated based on the available content whereas a region |
stearns@5445 | 777 | chain is a set of recipient boxes for the <a href="#named-flow0">named |
stearns@5445 | 778 | flow</a> content whose dynamic generation is not in the scope of this |
stearns@5445 | 779 | specification. |
stearns@5445 | 780 | |
stearns@5445 | 781 | <p>Each CSS Region in turn consumes content from its associated <a |
stearns@5445 | 782 | href="#named-flow0">named flow</a>. The <a href="#named-flow0">named |
stearns@5445 | 783 | flow</a> content is positioned in the <dfn id=current-region |
stearns@5445 | 784 | title=current-region>current region</dfn> until a natural or forced region |
stearns@5445 | 785 | break occurs, at which point the next region in the <span |
stearns@5445 | 786 | title=region-chain>region chain</span> becomes the <a |
stearns@5445 | 787 | href="#current-region" title=current-region>current region</a>. If there |
stearns@5445 | 788 | are no more <span>region</span>s in the region chain and there is still |
stearns@5445 | 789 | content in the flow, the positioning of the remaining content is |
stearns@5445 | 790 | controlled by the ‘<a href="#region-overflow"><code |
stearns@5445 | 791 | class=property>region-overflow</code></a>’ property on the last |
stearns@5445 | 792 | <span>region</span> in the chain. |
stearns@5445 | 793 | |
stearns@5445 | 794 | <p>The CSS regions module follows the fragmentation rules defined in the |
stearns@5445 | 795 | CSS Fragmentation Module Level 3 (see <a href="#CSS3-BREAK" |
stearns@5445 | 796 | rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a>). |
stearns@5445 | 797 | |
stearns@5445 | 798 | <h2 id=properties-and-rules><span class=secno>3. </span>Properties and |
stearns@5445 | 799 | rules</h2> |
stearns@5445 | 800 | |
stearns@5445 | 801 | <h3 id=the-flow-into-property><span class=secno>3.1. </span>The ‘<a |
stearns@5445 | 802 | href="#flow-into"><code class=property>flow-into</code></a>’ |
stearns@5445 | 803 | property</h3> |
stearns@5445 | 804 | |
stearns@5445 | 805 | <div class=issue-marker data-bug_id=15811 data-bug_status=NEW> <a |
stearns@5445 | 806 | href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15811">Bug-15811</a> |
stearns@5445 | 807 | <div class=issue-details> |
stearns@5445 | 808 | <p class=short-desc>Creating a named flow from external resource</p> |
stearns@5445 | 809 | </div> |
stearns@5445 | 810 | </div> |
stearns@5445 | 811 | |
stearns@5445 | 812 | <p>The ‘flow-into’ property can place an element into a <a |
stearns@5445 | 813 | href="#named-flow0">named flow</a>. Elements that belong to the same flow |
stearns@5453 | 814 | are laid out in the region chain associated with that flow. |
stearns@5445 | 815 | |
stearns@5445 | 816 | <table class=propdef summary="flow property definition"> |
stearns@5445 | 817 | <tbody> |
stearns@5445 | 818 | <tr> |
stearns@5445 | 819 | <th>Name: |
stearns@5445 | 820 | |
stearns@5445 | 821 | <td><dfn id=flow-into>flow-into</dfn> |
stearns@5445 | 822 | |
stearns@5445 | 823 | <tr> |
stearns@5445 | 824 | <th>Value: |
stearns@5445 | 825 | |
stearns@5445 | 826 | <td><ident> | none | inherit |
stearns@5445 | 827 | |
stearns@5445 | 828 | <tr> |
stearns@5445 | 829 | <th>Initial: |
stearns@5445 | 830 | |
stearns@5445 | 831 | <td>none |
stearns@5445 | 832 | |
stearns@5445 | 833 | <tr> |
stearns@5445 | 834 | <th>Applies to: |
stearns@5445 | 835 | |
stearns@5445 | 836 | <td>any element. |
stearns@5445 | 837 | <p>The ‘<a href="#flow-into"><code |
stearns@5445 | 838 | class=property>flow-into</code></a>’ property does not apply to |
stearns@5445 | 839 | any <a |
stearns@5445 | 840 | href="http://www.w3.org/TR/selectors/#pseudo-elements">pseudo-element</a> |
stearns@5445 | 841 | such as <code class=css>::first-line</code>, <code |
stearns@5445 | 842 | class=css>::first-letter</code>, <code class=css>::before</code> or |
stearns@5445 | 843 | <code class=css>::after</code>. |
stearns@5445 | 844 | |
stearns@5445 | 845 | <tr> |
stearns@5445 | 846 | <th>Inherited: |
stearns@5445 | 847 | |
stearns@5445 | 848 | <td>no |
stearns@5445 | 849 | |
stearns@5445 | 850 | <tr> |
stearns@5445 | 851 | <th>Percentages: |
stearns@5445 | 852 | |
stearns@5445 | 853 | <td>N/A |
stearns@5445 | 854 | |
stearns@5445 | 855 | <tr> |
stearns@5445 | 856 | <th>Media: |
stearns@5445 | 857 | |
stearns@5445 | 858 | <td>visual |
stearns@5445 | 859 | |
stearns@5445 | 860 | <tr> |
stearns@5445 | 861 | <th>Computed value: |
stearns@5445 | 862 | |
stearns@5445 | 863 | <td>as specified |
stearns@5445 | 864 | </table> |
stearns@5445 | 865 | |
stearns@5445 | 866 | <dl> |
stearns@5445 | 867 | <dt>none |
stearns@5445 | 868 | |
stearns@5445 | 869 | <dd>The element is not moved to a <a href="#named-flow0">named flow</a> |
stearns@5445 | 870 | and normal CSS processing takes place. |
stearns@5445 | 871 | |
stearns@5445 | 872 | <dt><a |
stearns@5445 | 873 | href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier"><ident></a> |
stearns@5445 | 874 | |
stearns@5445 | 875 | <dd>The element is taken out of its parent's flow and placed into the flow |
stearns@5445 | 876 | with the name ‘<code class=css><ident></code>’. The |
stearns@5445 | 877 | element is said to have a <dfn id=specified-flow>specified flow</dfn>. |
stearns@5445 | 878 | The values ‘<code class=property>none</code>’, ‘<code |
stearns@5445 | 879 | class=property>inherit</code>’, ‘<code |
stearns@5445 | 880 | class=property>default</code>’, ‘<code |
stearns@5445 | 881 | class=property>auto</code>’ and ‘<code |
stearns@5445 | 882 | class=property>initial</code>’ are invalid flow names. |
stearns@5445 | 883 | </dl> |
stearns@5445 | 884 | |
stearns@5453 | 885 | <p>A <a href="#named-flow0">named flow</a> needs to be associated with a |
stearns@5453 | 886 | region chain (one or more CSS regions) for its elements to be visually |
stearns@5453 | 887 | formatted. If no region chain is associated with a given <a |
stearns@5453 | 888 | href="#named-flow0">named flow</a>, the elements in the <a |
stearns@5453 | 889 | href="#named-flow0">named flow</a> are not rendered: they do not generate |
stearns@5453 | 890 | boxes and are not displayed. |
stearns@5445 | 891 | |
stearns@5445 | 892 | <p>The children of an element with a specified flow may themselves have a |
stearns@5445 | 893 | specified flow. |
stearns@5445 | 894 | |
stearns@5445 | 895 | <p>If an element has the same specified flow as one of its ancestors, it |
stearns@5453 | 896 | becomes a sibling of its ancestor for the purpose of layout in the region |
stearns@5453 | 897 | chain laying out content from that flow. |
stearns@5445 | 898 | |
stearns@5445 | 899 | <p>The ‘<a href="#flow-into"><code |
stearns@5445 | 900 | class=property>flow-into</code></a>’ property does not affect the |
stearns@5445 | 901 | CSS cascade and inheritance for the elements on which it is specified. The |
stearns@5445 | 902 | ‘<a href="#flow-into"><code |
stearns@5445 | 903 | class=property>flow-into</code></a>’ property affects the visual |
stearns@5445 | 904 | formatting of elements placed into a <a href="#named-flow0">named flow</a> |
stearns@5453 | 905 | and of the region chain laying out content from a <a |
stearns@5453 | 906 | href="#named-flow0">named flow</a>. |
stearns@5445 | 907 | |
stearns@5445 | 908 | <div class="issue-marker wrapper"> |
stearns@5445 | 909 | <div class=issue-marker data-bug_id=15870 data-bug_status=NEW> <a |
stearns@5445 | 910 | href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15870">Bug-15870</a> |
stearns@5445 | 911 | |
stearns@5445 | 912 | <div class=issue-details> |
stearns@5445 | 913 | <p class=short-desc>Describe how containing blocks are used for element |
stearns@5445 | 914 | fragments</p> |
stearns@5445 | 915 | </div> |
stearns@5445 | 916 | </div> |
stearns@5445 | 917 | </div> |
stearns@5445 | 918 | |
stearns@5445 | 919 | <p>The edges of the first region in a region chain associated with a <a |
stearns@5445 | 920 | href="#named-flow0">named flow</a> establish the rectangle that is the <a |
stearns@5445 | 921 | href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">containing |
stearns@5445 | 922 | block</a> used for absolutely positioned elements in the <a |
stearns@5445 | 923 | href="#named-flow0">named flow</a> which do not have an ancestor with a |
stearns@5445 | 924 | ‘<code class=property>position</code>’ of ‘<code |
stearns@5445 | 925 | class=property>absolute</code>’, ‘<code |
stearns@5445 | 926 | class=property>relative</code>’ or ‘<code |
stearns@5445 | 927 | class=property>fixed</code>’ (see <a href="#CSS21" |
stearns@5445 | 928 | rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>). That first region rectangle |
stearns@5445 | 929 | is used as the containing block instead of the initial containing block. |
stearns@5445 | 930 | |
stearns@5445 | 931 | <p>The first region defines the <a |
stearns@5445 | 932 | href="http://www.w3.org/TR/css3-writing-modes/#writing-mode">writing |
stearns@5445 | 933 | mode</a> for the entire flow. The writing mode on subsequent regions is |
stearns@5445 | 934 | ignored. |
stearns@5445 | 935 | |
stearns@5445 | 936 | <p>Elements in a <a href="#named-flow0">named flow</a> are sequenced in |
stearns@5445 | 937 | document order. |
stearns@5445 | 938 | |
stearns@5445 | 939 | <div class=note><span class=note-prefix>Note </span> |
stearns@5445 | 940 | <p>The ‘<a href="#flow-into"><code |
stearns@5445 | 941 | class=property>flow-into</code></a>’ property moves an element into |
stearns@5445 | 942 | the flow and the interplay with selectors should be considered carefully.</p> |
stearns@5445 | 943 | |
stearns@5445 | 944 | <p>For example,</p> |
stearns@5445 | 945 | |
stearns@5445 | 946 | <pre>table {flow-into: table-content}</pre> |
stearns@5445 | 947 | |
stearns@5445 | 948 | <p>will move all tables in the ‘<code |
stearns@5445 | 949 | class=property>table-content</code>’ <a href="#named-flow0">named |
stearns@5445 | 950 | flow</a>. However, the</p> |
stearns@5445 | 951 | |
stearns@5445 | 952 | <pre>table > * {flow-into: table-content} ...</pre> |
stearns@5445 | 953 | |
stearns@5445 | 954 | <p>selector will move all immediate children of all table elements into |
stearns@5445 | 955 | the ‘table-content’ <a href="#named-flow0">named flow</a> (which may |
stearns@5445 | 956 | be useful as it will usually result, if the immediate children are rows, |
stearns@5445 | 957 | in merging rows of multiple tables), but the</p> |
stearns@5445 | 958 | |
stearns@5445 | 959 | <pre>table * {flow-into: table-content}</pre> |
stearns@5445 | 960 | |
stearns@5445 | 961 | <p>selector will move all descendants of table elements into the |
stearns@5445 | 962 | ‘table-content’ <a href="#named-flow0">named flow</a>, transforming |
stearns@5445 | 963 | the element tree into a flat list in order of opening tags (which is |
stearns@5445 | 964 | probably not intentional). This will make all the descendants of table |
stearns@5445 | 965 | elements siblings in the <a href="#named-flow0">named flow</a>. Having |
stearns@5445 | 966 | the descendants become siblings in the <a href="#named-flow0">named |
stearns@5453 | 967 | flow</a> results in a different processing (see <a |
stearns@5445 | 968 | href="http://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#anonymous-boxes">CSS |
stearns@5445 | 969 | 2.1‘<code class=css>s anonymous table objects</code></a>). This |
stearns@5445 | 970 | note illustrates how authors must exercise caution when choosing a |
stearns@5445 | 971 | particular selector for setting the ’flow-into' property to avoid |
stearns@5445 | 972 | unintended results.</p> |
stearns@5445 | 973 | </div> |
stearns@5445 | 974 | |
stearns@5445 | 975 | <h3 id=the-flow-from-property><span class=secno>3.2. </span>The ‘<a |
stearns@5445 | 976 | href="#flow-from"><code class=property>flow-from</code></a>’ |
stearns@5445 | 977 | property</h3> |
stearns@5445 | 978 | |
stearns@5445 | 979 | <p>The ‘<a href="#flow-from"><code |
stearns@5445 | 980 | class=property>flow-from</code></a>’ property makes an element a |
stearns@5445 | 981 | region and associates it with a <a href="#named-flow0">named flow</a>. |
stearns@5445 | 982 | |
stearns@5445 | 983 | <div class=issue-marker data-bug_id=15191 data-bug_status=NEW> <a |
stearns@5445 | 984 | href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15191">Bug-15191</a> |
stearns@5445 | 985 | <div class=issue-details> |
stearns@5445 | 986 | <p class=short-desc>Should we allow multi-column elements to be regions?</p> |
stearns@5445 | 987 | </div> |
stearns@5445 | 988 | </div> |
stearns@5445 | 989 | |
stearns@5445 | 990 | <table class=propdef summary="flow-from property definition"> |
stearns@5445 | 991 | <tbody> |
stearns@5445 | 992 | <tr> |
stearns@5445 | 993 | <th>Name: |
stearns@5445 | 994 | |
stearns@5445 | 995 | <td><dfn id=flow-from>flow-from</dfn> |
stearns@5445 | 996 | |
stearns@5445 | 997 | <tr> |
stearns@5445 | 998 | <th>Value: |
stearns@5445 | 999 | |
stearns@5445 | 1000 | <td><ident> | none | inherit |
stearns@5445 | 1001 | |
stearns@5445 | 1002 | <tr> |
stearns@5445 | 1003 | <th>Initial: |
stearns@5445 | 1004 | |
stearns@5445 | 1005 | <td>none |
stearns@5445 | 1006 | |
stearns@5445 | 1007 | <tr> |
stearns@5445 | 1008 | <th>Applies to: |
stearns@5445 | 1009 | |
stearns@5445 | 1010 | <td>Elements that generate a <a |
stearns@5445 | 1011 | href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes">block |
stearns@5445 | 1012 | container box</a>. <br> |
stearns@5445 | 1013 | This might be expanded in future versions of the specification to allow |
stearns@5445 | 1014 | other types of containers to receive flow content. |
stearns@5445 | 1015 | |
stearns@5445 | 1016 | <tr> |
stearns@5445 | 1017 | <th>Inherited: |
stearns@5445 | 1018 | |
stearns@5445 | 1019 | <td>no |
stearns@5445 | 1020 | |
stearns@5445 | 1021 | <tr> |
stearns@5445 | 1022 | <th>Percentages: |
stearns@5445 | 1023 | |
stearns@5445 | 1024 | <td>N/A |
stearns@5445 | 1025 | |
stearns@5445 | 1026 | <tr> |
stearns@5445 | 1027 | <th>Media: |
stearns@5445 | 1028 | |
stearns@5445 | 1029 | <td>visual |
stearns@5445 | 1030 | |
stearns@5445 | 1031 | <tr> |
stearns@5445 | 1032 | <th>Computed value: |
stearns@5445 | 1033 | |
stearns@5445 | 1034 | <td>as specified |
stearns@5445 | 1035 | </table> |
stearns@5445 | 1036 | |
stearns@5445 | 1037 | <dl> |
stearns@5445 | 1038 | <dt><strong>none</strong> |
stearns@5445 | 1039 | |
stearns@5445 | 1040 | <dd>The element is not a <span title=region>region</span>. |
stearns@5445 | 1041 | |
stearns@5445 | 1042 | <dt><strong><ident></strong> |
stearns@5445 | 1043 | |
stearns@5445 | 1044 | <dd> If the ‘<code class=property>content</code>’ property |
stearns@5445 | 1045 | computes to something else than ‘<code |
stearns@5445 | 1046 | class=property>normal</code>’, the element does not become a |
stearns@5453 | 1047 | <span>CSS Region</span>. If the ‘<code |
stearns@5453 | 1048 | class=property>content</code>’ property computes to ‘<code |
stearns@5453 | 1049 | class=property>normal</code>’, then the element becomes a <span>CSS |
stearns@5453 | 1050 | Region</span> and is ordered in a <span>region chain</span> according to |
stearns@5453 | 1051 | its document order. The content from the flow with the <a |
stearns@5445 | 1052 | href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier"><ident></a> |
stearns@5445 | 1053 | name will be <a href="#region-flow-break">broken into fragments</a> and |
stearns@5445 | 1054 | visually formatted in the <a |
stearns@5445 | 1055 | href="http://www.w3.org/TR/CSS21/visuren.html#principal-box">principal |
stearns@5453 | 1056 | boxes</a> of the <span>regions</span> in the <span>region chain</span>. |
stearns@5453 | 1057 | <br> |
stearns@5453 | 1058 | If there is no flow with name <ident>, then the element does not |
stearns@5453 | 1059 | format any content visually. <br> |
stearns@5445 | 1060 | Likewise, if the element is part of the flow with name <ident>, |
stearns@5445 | 1061 | then the element does not format any content visually. |
stearns@5445 | 1062 | </dl> |
stearns@5445 | 1063 | |
stearns@5453 | 1064 | <p>A <span>CSS Region</span>‘<code class=css>s document children are |
stearns@5453 | 1065 | not visually formatted unless they are directed to a <a |
stearns@5453 | 1066 | href="#named-flow0">named flow</a> with an associated <span>region |
stearns@5453 | 1067 | chain</span>.</code> |
stearns@5445 | 1068 | |
stearns@5445 | 1069 | <div class=note><span class=note-prefix>Note </span> |
stearns@5453 | 1070 | <p>An element becomes a <span>CSS Region</span> when its ’flow-from' |
stearns@5453 | 1071 | property is set to a valid <ident> value, even if there is no |
stearns@5453 | 1072 | content contributing to the referenced flow. For example:</p> |
stearns@5445 | 1073 | |
stearns@5445 | 1074 | <pre> |
stearns@5445 | 1075 | <style> |
stearns@5445 | 1076 | .article{ |
stearns@5445 | 1077 | flow-into: thread; |
stearns@5445 | 1078 | } |
stearns@5445 | 1079 | .region{ |
stearns@5445 | 1080 | flow-from: thread; |
stearns@5445 | 1081 | } |
stearns@5445 | 1082 | </style> |
stearns@5445 | 1083 | <html> |
stearns@5445 | 1084 | <body> |
stearns@5445 | 1085 | <div class=region>div content</div> |
stearns@5445 | 1086 | </body> |
stearns@5445 | 1087 | </html> |
stearns@5445 | 1088 | </pre> |
stearns@5445 | 1089 | There is no element matching the <code>.article</code> selector and |
stearns@5445 | 1090 | therefore no content in the <code>thread</code> flow. However, the element |
stearns@5445 | 1091 | matching the <code>.region</code> selector is still associated with that |
stearns@5445 | 1092 | empty <a href="#named-flow0">named flow</a> and, consequently, its |
stearns@5445 | 1093 | children are not formatted visually.</div> |
stearns@5445 | 1094 | |
stearns@5445 | 1095 | <div class="issue-marker wrapper"> |
stearns@5445 | 1096 | <div class=issue-marker data-bug_id=15189 data-bug_status=NEW> <a |
stearns@5445 | 1097 | href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15189">Bug-15189</a> |
stearns@5445 | 1098 | |
stearns@5445 | 1099 | <div class=issue-details> |
stearns@5445 | 1100 | <p class=short-desc>Should regions be non-breakable?</p> |
stearns@5445 | 1101 | </div> |
stearns@5445 | 1102 | </div> |
stearns@5445 | 1103 | |
stearns@5445 | 1104 | <div class=issue-marker data-bug_id=15824 data-bug_status=NEW> <a |
stearns@5445 | 1105 | href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15824">Bug-15824</a> |
stearns@5445 | 1106 | |
stearns@5445 | 1107 | <div class=issue-details> |
stearns@5445 | 1108 | <p class=short-desc>Should regions not create a new stacking context?</p> |
stearns@5445 | 1109 | </div> |
stearns@5445 | 1110 | </div> |
stearns@5445 | 1111 | |
stearns@5445 | 1112 | <div class=issue-marker data-bug_id=15827 data-bug_status=NEW> <a |
stearns@5445 | 1113 | href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15824">Bug-15827</a> |
stearns@5445 | 1114 | |
stearns@5445 | 1115 | <div class=issue-details> |
stearns@5445 | 1116 | <p class=short-desc>Specify behavior of stacking contexts that are split |
stearns@5445 | 1117 | between regions</p> |
stearns@5445 | 1118 | </div> |
stearns@5445 | 1119 | </div> |
stearns@5445 | 1120 | </div> |
stearns@5445 | 1121 | |
stearns@5453 | 1122 | <p><span title=region>CSS Regions</span> create a new <a |
stearns@5445 | 1123 | href="http://www.w3.org/TR/CSS2/visuren.html#z-index">stacking |
stearns@5453 | 1124 | context</a>. <span title=region>CSS Regions</span> establish a new <a |
stearns@5445 | 1125 | href="http://www.w3.org/TR/CSS2/visuren.html#block-formatting">block |
stearns@5445 | 1126 | formatting Context</a>. |
stearns@5445 | 1127 | |
stearns@5445 | 1128 | <div class=note><span class=note-prefix>Note </span> |
stearns@5453 | 1129 | <p>With <span>region chains</span>, an element may be split across |
stearns@5453 | 1130 | multiple boxes and these boxes may overlap (for example if they are |
stearns@5453 | 1131 | absolutely positioned). So fragments of the same element can overlap each |
stearns@5453 | 1132 | other. Since each element has a single z-index, it would be required to |
stearns@5453 | 1133 | find another mechanism to decide in which order the fragments are |
stearns@5453 | 1134 | rendered. Since each <span>CSS Region</span> creates a new stacking |
stearns@5453 | 1135 | context, it is clear that each fragment is rendered separately and their |
stearns@5453 | 1136 | rendering order follows the regular CSS rendering model.</p> |
stearns@5445 | 1137 | </div> |
stearns@5445 | 1138 | |
stearns@5445 | 1139 | <p>Floats or other exclusions (see <a href="#CSS3-EXCLUSIONS" |
stearns@5445 | 1140 | rel=biblioentry>[CSS3-EXCLUSIONS]<!--{{CSS3-EXCLUSIONS}}--></a>) |
stearns@5453 | 1141 | potentially impact the content laid out in region chains, just as for |
stearns@5445 | 1142 | non-regions. |
stearns@5445 | 1143 | |
stearns@5445 | 1144 | <p>See the <a href="#regions-visual-formatting-details">regions visual |
stearns@5445 | 1145 | formatting details</a> section for a description of how ‘<code |
stearns@5445 | 1146 | class=property>width</code>’ and ‘<code |
stearns@5453 | 1147 | class=property>height</code>’ values are resolved for <span>CSS |
stearns@5453 | 1148 | Region</span> boxes. |
stearns@5445 | 1149 | |
stearns@5445 | 1150 | <h3 id=region-flow-break><span class=secno>3.3. </span>Region flow break |
stearns@5445 | 1151 | properties: ‘<a href="#break-before"><code |
stearns@5445 | 1152 | class=property>break-before</code></a>’, ‘<a |
stearns@5445 | 1153 | href="#break-after"><code class=property>break-after</code></a>’, |
stearns@5445 | 1154 | ‘<a href="#break-inside"><code |
stearns@5445 | 1155 | class=property>break-inside</code></a>’</h3> |
stearns@5445 | 1156 | |
stearns@5445 | 1157 | <p>User agents laying out content in multiple regions must determine where |
stearns@5445 | 1158 | content breaks occur. The problem of breaking content into fragments |
stearns@5445 | 1159 | fitting in regions is similar to breaking content into pages or columns. |
stearns@5445 | 1160 | |
stearns@5445 | 1161 | <p>Each break ends layout in the current region and causes remaining pieces |
stearns@5445 | 1162 | of content from the <a href="#named-flow0">named flow</a> to be visually |
stearns@5445 | 1163 | formatted in the following region in the region chain, if there is one. |
stearns@5445 | 1164 | |
stearns@5445 | 1165 | <p>The following extends the ‘<a href="#break-before"><code |
stearns@5445 | 1166 | class=property>break-before</code></a>’, ‘<a |
stearns@5445 | 1167 | href="#break-after"><code class=property>break-after</code></a>’ and |
stearns@5445 | 1168 | ‘<a href="#break-inside"><code |
stearns@5445 | 1169 | class=property>break-inside</code></a>’ properties from the <a |
stearns@5445 | 1170 | href="#CSS3COL" rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> |
stearns@5445 | 1171 | specification to account for regions. The additional values are described |
stearns@5445 | 1172 | below. |
stearns@5445 | 1173 | |
stearns@5445 | 1174 | <table class=propdef summary="break-before property definition"> |
stearns@5445 | 1175 | <tbody> |
stearns@5445 | 1176 | <tr> |
stearns@5445 | 1177 | <td><a href="#dom-named-flow-name"><em>Name:</em></a> |
stearns@5445 | 1178 | |
stearns@5445 | 1179 | <td><dfn id=break-before>break-before</dfn> |
stearns@5445 | 1180 | |
stearns@5445 | 1181 | <tr> |
stearns@5445 | 1182 | <td><em>Value:</em> |
stearns@5445 | 1183 | |
stearns@5445 | 1184 | <td>auto | always | avoid | left | right | page | column | region | |
stearns@5445 | 1185 | avoid-page | avoid-column | avoid-region |
stearns@5445 | 1186 | |
stearns@5445 | 1187 | <tr> |
stearns@5445 | 1188 | <td><em>Initial:</em> |
stearns@5445 | 1189 | |
stearns@5445 | 1190 | <td>auto |
stearns@5445 | 1191 | |
stearns@5445 | 1192 | <tr> |
stearns@5445 | 1193 | <td><em>Applies to:</em> |
stearns@5445 | 1194 | |
stearns@5445 | 1195 | <td>block-level elements |
stearns@5445 | 1196 | |
stearns@5445 | 1197 | <tr> |
stearns@5445 | 1198 | <td><em>Inherited:</em> |
stearns@5445 | 1199 | |
stearns@5445 | 1200 | <td>no |
stearns@5445 | 1201 | |
stearns@5445 | 1202 | <tr> |
stearns@5445 | 1203 | <td><em>Percentages:</em> |
stearns@5445 | 1204 | |
stearns@5445 | 1205 | <td>N/A |
stearns@5445 | 1206 | |
stearns@5445 | 1207 | <tr> |
stearns@5445 | 1208 | <td><em>Media:</em> |
stearns@5445 | 1209 | |
stearns@5453 | 1210 | <td>visual |
stearns@5445 | 1211 | |
stearns@5445 | 1212 | <tr> |
stearns@5445 | 1213 | <td><em>Computed value:</em> |
stearns@5445 | 1214 | |
stearns@5445 | 1215 | <td>specified value |
stearns@5445 | 1216 | </table> |
stearns@5445 | 1217 | |
stearns@5445 | 1218 | <table class=propdef summary="break-after property definition"> |
stearns@5445 | 1219 | <tbody> |
stearns@5445 | 1220 | <tr> |
stearns@5445 | 1221 | <td><a href="#dom-named-flow-name"><em>Name:</em></a> |
stearns@5445 | 1222 | |
stearns@5445 | 1223 | <td><dfn id=break-after>break-after</dfn> |
stearns@5445 | 1224 | |
stearns@5445 | 1225 | <tr> |
stearns@5445 | 1226 | <td><em>Value:</em> |
stearns@5445 | 1227 | |
stearns@5445 | 1228 | <td>auto | always | avoid | left | right | page | column | region | |
stearns@5445 | 1229 | avoid-page | avoid-column | avoid-region |
stearns@5445 | 1230 | |
stearns@5445 | 1231 | <tr> |
stearns@5445 | 1232 | <td><em>Initial:</em> |
stearns@5445 | 1233 | |
stearns@5445 | 1234 | <td>auto |
stearns@5445 | 1235 | |
stearns@5445 | 1236 | <tr> |
stearns@5445 | 1237 | <td><em>Applies to:</em> |
stearns@5445 | 1238 | |
stearns@5445 | 1239 | <td>block-level elements |
stearns@5445 | 1240 | |
stearns@5445 | 1241 | <tr> |
stearns@5445 | 1242 | <td><em>Inherited:</em> |
stearns@5445 | 1243 | |
stearns@5445 | 1244 | <td>no |
stearns@5445 | 1245 | |
stearns@5445 | 1246 | <tr> |
stearns@5445 | 1247 | <td><em>Percentages:</em> |
stearns@5445 | 1248 | |
stearns@5445 | 1249 | <td>N/A |
stearns@5445 | 1250 | |
stearns@5445 | 1251 | <tr> |
stearns@5445 | 1252 | <td><em>Media:</em> |
stearns@5445 | 1253 | |
stearns@5453 | 1254 | <td>visual |
stearns@5445 | 1255 | |
stearns@5445 | 1256 | <tr> |
stearns@5445 | 1257 | <td><em>Computed value:</em> |
stearns@5445 | 1258 | |
stearns@5445 | 1259 | <td>specified value |
stearns@5445 | 1260 | </table> |
stearns@5445 | 1261 | |
stearns@5445 | 1262 | <table class=propdef summary="break-inside property definition"> |
stearns@5445 | 1263 | <tbody> |
stearns@5445 | 1264 | <tr> |
stearns@5445 | 1265 | <td><a href="#dom-named-flow-name"><em>Name:</em></a> |
stearns@5445 | 1266 | |
stearns@5445 | 1267 | <td><dfn id=break-inside>break-inside</dfn> |
stearns@5445 | 1268 | |
stearns@5445 | 1269 | <tr> |
stearns@5445 | 1270 | <td><em>Value:</em> |
stearns@5445 | 1271 | |
stearns@5445 | 1272 | <td>auto | avoid | avoid-page | avoid-column | avoid-region |
stearns@5445 | 1273 | |
stearns@5445 | 1274 | <tr> |
stearns@5445 | 1275 | <td><em>Initial:</em> |
stearns@5445 | 1276 | |
stearns@5445 | 1277 | <td>auto |
stearns@5445 | 1278 | |
stearns@5445 | 1279 | <tr> |
stearns@5445 | 1280 | <td><em>Applies to:</em> |
stearns@5445 | 1281 | |
stearns@5445 | 1282 | <td>block-level elements |
stearns@5445 | 1283 | |
stearns@5445 | 1284 | <tr> |
stearns@5445 | 1285 | <td><em>Inherited:</em> |
stearns@5445 | 1286 | |
stearns@5445 | 1287 | <td>no |
stearns@5445 | 1288 | |
stearns@5445 | 1289 | <tr> |
stearns@5445 | 1290 | <td><em>Percentages:</em> |
stearns@5445 | 1291 | |
stearns@5445 | 1292 | <td>N/A |
stearns@5445 | 1293 | |
stearns@5445 | 1294 | <tr> |
stearns@5445 | 1295 | <td><em>Media:</em> |
stearns@5445 | 1296 | |
stearns@5453 | 1297 | <td>visual |
stearns@5445 | 1298 | |
stearns@5445 | 1299 | <tr> |
stearns@5445 | 1300 | <td><em>Computed value:</em> |
stearns@5445 | 1301 | |
stearns@5445 | 1302 | <td>specified value |
stearns@5445 | 1303 | </table> |
stearns@5445 | 1304 | |
stearns@5445 | 1305 | <p>These properties describe page, column and region break behavior |
stearns@5445 | 1306 | before/after/inside the generated box. These values are normatively |
stearns@5445 | 1307 | defined in <a href="#CSS3COL" |
stearns@5445 | 1308 | rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a>: |
stearns@5445 | 1309 | |
stearns@5445 | 1310 | <p>This specification adds the following new values: |
stearns@5445 | 1311 | |
stearns@5445 | 1312 | <dl> |
stearns@5445 | 1313 | <dt>region |
stearns@5445 | 1314 | |
stearns@5445 | 1315 | <dd>Always force a region break before (after) the generated box. |
stearns@5445 | 1316 | |
stearns@5445 | 1317 | <dt>avoid-region |
stearns@5445 | 1318 | |
stearns@5445 | 1319 | <dd>Avoid a region break before (after, inside) the generated box. |
stearns@5445 | 1320 | </dl> |
stearns@5445 | 1321 | |
stearns@5445 | 1322 | <p>The behavior of region breaks with regards to regions is identical to |
stearns@5445 | 1323 | the behavior of page breaks with regards to pages, as defined in the <a |
stearns@5445 | 1324 | href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. |
stearns@5445 | 1325 | |
stearns@5445 | 1326 | <h3 id=the-region-overflow-property><span class=secno>3.4. </span>The |
stearns@5445 | 1327 | region-overflow property</h3> |
stearns@5445 | 1328 | |
stearns@5445 | 1329 | <div class=issue-marker data-bug_id=15878 data-bug_status=NEW> <a |
stearns@5445 | 1330 | href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15878">Bug-15878</a> |
stearns@5445 | 1331 | <div class=issue-details> |
stearns@5445 | 1332 | <p class=short-desc>region-overflow:nobreak</p> |
stearns@5445 | 1333 | </div> |
stearns@5445 | 1334 | </div> |
stearns@5445 | 1335 | |
stearns@5445 | 1336 | <table class=propdef summary="break-after property definition"> |
stearns@5445 | 1337 | <tbody> |
stearns@5445 | 1338 | <tr> |
stearns@5445 | 1339 | <td><a href="#dom-named-flow-name"><em>Name:</em></a> |
stearns@5445 | 1340 | |
stearns@5445 | 1341 | <td><dfn id=region-overflow>region-overflow</dfn> |
stearns@5445 | 1342 | |
stearns@5445 | 1343 | <tr> |
stearns@5445 | 1344 | <td><em>Value:</em> |
stearns@5445 | 1345 | |
stearns@5445 | 1346 | <td>auto | break |
stearns@5445 | 1347 | |
stearns@5445 | 1348 | <tr> |
stearns@5445 | 1349 | <td><em>Initial:</em> |
stearns@5445 | 1350 | |
stearns@5445 | 1351 | <td>auto |
stearns@5445 | 1352 | |
stearns@5445 | 1353 | <tr> |
stearns@5445 | 1354 | <td><em>Applies to:</em> |
stearns@5445 | 1355 | |
stearns@5445 | 1356 | <td><em title="region element">region elements</em> |
stearns@5445 | 1357 | |
stearns@5445 | 1358 | <tr> |
stearns@5445 | 1359 | <td><em>Inherited:</em> |
stearns@5445 | 1360 | |
stearns@5445 | 1361 | <td>no |
stearns@5445 | 1362 | |
stearns@5445 | 1363 | <tr> |
stearns@5445 | 1364 | <td><em>Percentages:</em> |
stearns@5445 | 1365 | |
stearns@5445 | 1366 | <td>N/A |
stearns@5445 | 1367 | |
stearns@5445 | 1368 | <tr> |
stearns@5445 | 1369 | <td><em>Media:</em> |
stearns@5445 | 1370 | |
stearns@5453 | 1371 | <td>visual |
stearns@5445 | 1372 | |
stearns@5445 | 1373 | <tr> |
stearns@5445 | 1374 | <td><em>Computed value:</em> |
stearns@5445 | 1375 | |
stearns@5445 | 1376 | <td>specified value |
stearns@5445 | 1377 | </table> |
stearns@5445 | 1378 | |
stearns@5445 | 1379 | <div class=issue-marker data-bug_id=15832 data-bug_status=NEW> <a |
stearns@5445 | 1380 | href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15832">Bug-15832</a> |
stearns@5445 | 1381 | <div class=issue-details> |
stearns@5445 | 1382 | <p class=short-desc>Should we have region-overflow:nobreak and have |
stearns@5445 | 1383 | ‘<a href="#region-overflow"><code |
stearns@5445 | 1384 | class=property>region-overflow</code></a>’ apply to all regions, |
stearns@5445 | 1385 | not just the last?</p> |
stearns@5445 | 1386 | </div> |
stearns@5445 | 1387 | </div> |
stearns@5445 | 1388 | |
stearns@5445 | 1389 | <p>The ‘<a href="#region-overflow"><code |
stearns@5445 | 1390 | class=property>region-overflow</code></a>’ property controls the |
stearns@5445 | 1391 | behavior of the <em id=last-region>last region</em> associated with a <a |
stearns@5445 | 1392 | href="#named-flow0">named flow</a>. |
stearns@5445 | 1393 | |
stearns@5445 | 1394 | <dl> |
stearns@5445 | 1395 | <dt>auto |
stearns@5445 | 1396 | |
stearns@5445 | 1397 | <dd>Content flows as it would in a regular content element. If the content |
stearns@5445 | 1398 | exceeds the container box, it is subject to the <a |
stearns@5445 | 1399 | href="http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow">overflow</a> |
stearns@5445 | 1400 | property's computed value on the region element. Region breaks must be |
stearns@5445 | 1401 | ignored on the last region. |
stearns@5445 | 1402 | |
stearns@5445 | 1403 | <dt>break |
stearns@5445 | 1404 | |
stearns@5445 | 1405 | <dd> |
stearns@5445 | 1406 | <p>If the content fits within the <em>region element</em>, then this |
stearns@5445 | 1407 | property has no effect. If the content does not fit within the |
stearns@5445 | 1408 | <em>region element</em>, the content breaks as if flow was going to |
stearns@5445 | 1409 | continue in a subsequent region. See the <a |
stearns@5445 | 1410 | href="#regions-flow-breaking-rules">breaking rules</a> section. A forced |
stearns@5445 | 1411 | region break takes precedence over a natural break point.</p> |
stearns@5445 | 1412 | |
stearns@5445 | 1413 | <p>Flow content that follows the last break in the last region, if any is |
stearns@5445 | 1414 | not rendered.</p> |
stearns@5445 | 1415 | </dl> |
stearns@5445 | 1416 | |
stearns@5445 | 1417 | <p>The ‘<a href="#region-overflow"><code |
stearns@5445 | 1418 | class=property>region-overflow</code></a>’ property does not |
stearns@5445 | 1419 | influence the size of the region it applies to. |
stearns@5445 | 1420 | |
stearns@5445 | 1421 | <p>The following code sample illustrates the usage of the ‘<a |
stearns@5445 | 1422 | href="#region-overflow"><code |
stearns@5445 | 1423 | class=property>region-overflow</code></a>’ property. |
stearns@5445 | 1424 | |
stearns@5445 | 1425 | <div class=example> |
stearns@5445 | 1426 | <pre> |
stearns@5445 | 1427 | <style> |
stearns@5445 | 1428 | #article { |
stearns@5445 | 1429 | flow-into: "article"; |
stearns@5445 | 1430 | } |
stearns@5445 | 1431 | |
stearns@5445 | 1432 | #region_1, #region_2 { |
stearns@5445 | 1433 | flow-from: article; |
stearns@5445 | 1434 | <strong>region-overflow: break;</strong> /* or none */ |
stearns@5445 | 1435 | <strong>overflow: visible;</strong> /* or hidden */ |
stearns@5445 | 1436 | } |
stearns@5445 | 1437 | |
stearns@5445 | 1438 | </style> |
stearns@5445 | 1439 | |
stearns@5445 | 1440 | <div id="article">...</div> |
stearns@5445 | 1441 | |
stearns@5445 | 1442 | <div id="region_1"></div> |
stearns@5445 | 1443 | <div id="region_2"></div> |
stearns@5445 | 1444 | |
stearns@5445 | 1445 | </pre> |
stearns@5445 | 1446 | </div> |
stearns@5445 | 1447 | |
stearns@5445 | 1448 | <div class=figure> |
stearns@5445 | 1449 | <table style="border: 1px solid gray;width: 100%;" |
stearns@5445 | 1450 | summary="Different values for the region-overflow property - Illustration."> |
stearns@5445 | 1451 | <tbody> |
stearns@5445 | 1452 | <tr> |
stearns@5445 | 1453 | <td>‘<code class=css>flow-into: "article"</code>’ |
stearns@5445 | 1454 | |
stearns@5445 | 1455 | <td><code class=html>region_1</code> and <code |
stearns@5445 | 1456 | class=html>region_2</code> |
stearns@5445 | 1457 | |
stearns@5445 | 1458 | <td>‘<code class=css>region-overflow: auto</code>’<br> |
stearns@5445 | 1459 | ‘<code class=css>overflow:visible</code>’ |
stearns@5445 | 1460 | |
stearns@5445 | 1461 | <tr> |
stearns@5445 | 1462 | <td rowspan=3 style="vertical-align: top;"><img |
stearns@5445 | 1463 | alt="regions receiving the flow content" |
stearns@5445 | 1464 | src="images/region-overflow-flow.png"> |
stearns@5445 | 1465 | |
stearns@5445 | 1466 | <td><img alt="result if region-overflow is set to 'break'" |
stearns@5445 | 1467 | src="images/region-overflow-regions.png"> |
stearns@5445 | 1468 | |
stearns@5445 | 1469 | <td><img alt="regions receiving the flow content" |
stearns@5445 | 1470 | src="images/region-overflow-auto-overflow-visible.png"> |
stearns@5445 | 1471 | |
stearns@5445 | 1472 | <tr> |
stearns@5445 | 1473 | <td>‘<code class=css>region-overflow: break</code>’ |
stearns@5445 | 1474 | |
stearns@5445 | 1475 | <td>‘<code class=css>region-overflow: auto</code>’<br> |
stearns@5445 | 1476 | ‘<code class=css>overflow:hidden</code>’ |
stearns@5445 | 1477 | |
stearns@5445 | 1478 | <tr> |
stearns@5445 | 1479 | <td><img alt="result if region-overflow is set to 'break'" |
stearns@5445 | 1480 | src="images/region-overflow-break.png"> |
stearns@5445 | 1481 | |
stearns@5445 | 1482 | <td><img alt="regions receiving the flow content" |
stearns@5445 | 1483 | src="images/region-overflow-auto-overflow-hidden.png"> |
stearns@5445 | 1484 | </table> |
stearns@5445 | 1485 | |
stearns@5445 | 1486 | <p class=caption>Different values for the region-overflow property</p> |
stearns@5445 | 1487 | </div> |
stearns@5445 | 1488 | |
stearns@5445 | 1489 | <div class=note><span class=note-prefix>Note </span> |
stearns@5445 | 1490 | <p>The ‘<code class=property>overflow</code>’ property is |
stearns@5445 | 1491 | honored on a region: if region content overflows, such as the borders of |
stearns@5445 | 1492 | elements on the last line, the ‘<code |
stearns@5445 | 1493 | class=property>overflow</code>’ property controls the visibility of |
stearns@5445 | 1494 | the overflowing content. See the ‘<code |
stearns@5445 | 1495 | class=property>overflow</code>’ property definition (<a |
stearns@5445 | 1496 | href="#CSS21" rel=biblioentry>[CSS21]<!--{{CSS21}}--></a>).</p> |
stearns@5445 | 1497 | </div> |
stearns@5445 | 1498 | |
stearns@5445 | 1499 | <h3 id=the-at-region-style-rule><span class=secno>3.5. </span>The @region |
stearns@5445 | 1500 | rule</h3> |
stearns@5445 | 1501 | |
stearns@5445 | 1502 | <div class=issue-marker data-bug_id=15116 data-bug_status=NEW> <a |
stearns@5445 | 1503 | href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15116">Bug-15116</a> |
stearns@5445 | 1504 | <div class=issue-details> |
stearns@5445 | 1505 | <p class=short-desc>Add CSS OM Interface for @region style rules</p> |
stearns@5445 | 1506 | </div> |
stearns@5445 | 1507 | </div> |
stearns@5445 | 1508 | |
stearns@5445 | 1509 | <p>An ‘<code class=css>@region</code>’ rule contains style |
stearns@5445 | 1510 | declarations specific to particular regions. |
stearns@5445 | 1511 | |
stearns@5445 | 1512 | <pre> |
stearns@5445 | 1513 | @region <selector> { |
stearns@5445 | 1514 | ... CSS styling rules ... |
stearns@5445 | 1515 | } |
stearns@5445 | 1516 | </pre> |
stearns@5445 | 1517 | |
stearns@5445 | 1518 | <p>The ‘<code class=css>@region</code>’ rule consists of the |
stearns@5445 | 1519 | keyword ‘<code class=css>@region</code>’ followed by a <a |
stearns@5445 | 1520 | href="http://www.w3.org/TR/css3-selectors/#selector-syntax">selector</a> |
stearns@5445 | 1521 | and a block of style rules. The ‘<code |
stearns@5445 | 1522 | class=css>@region</code>’ rule and the selector constitute the |
stearns@5445 | 1523 | region's ‘<code class=css>flow fragment</code>’ selector. The |
stearns@5445 | 1524 | region's flow fragment selector specifies which range of elements in the |
stearns@5445 | 1525 | flow are subject to the style rules in the following block: it applies to |
stearns@5445 | 1526 | the range (see <a href="#DOM" rel=biblioentry>[DOM]<!--{{!DOM}}--></a>) |
stearns@5445 | 1527 | from the region's flow that flows in the selected region(s). |
stearns@5445 | 1528 | |
stearns@5445 | 1529 | <div class=issue-marker data-bug_id=15713 data-bug_status=NEW> <a |
stearns@5445 | 1530 | href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15713">Bug-15713</a> |
stearns@5445 | 1531 | <div class=issue-details> |
stearns@5445 | 1532 | <p class=short-desc>Model for styling element fragments</p> |
stearns@5445 | 1533 | </div> |
stearns@5445 | 1534 | </div> |
stearns@5445 | 1535 | |
stearns@5445 | 1536 | <p>Elements that are fully or partially in the ‘<code class=css>flow |
stearns@5445 | 1537 | fragment</code>’ may match any of the selectors found in the style |
stearns@5445 | 1538 | rule. However, the style rules only apply to the portion of the element |
stearns@5445 | 1539 | that falls into the corresponding region. |
stearns@5445 | 1540 | |
stearns@5445 | 1541 | <p>Only a limited list of properties can be set in a region style rule: |
stearns@5445 | 1542 | |
stearns@5445 | 1543 | <div class=issue-marker data-bug_id=15190 data-bug_status=NEW> <a |
stearns@5445 | 1544 | href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15190">Bug-15190</a> |
stearns@5445 | 1545 | <div class=issue-details> |
stearns@5445 | 1546 | <p class=short-desc>List of region style properties</p> |
stearns@5445 | 1547 | </div> |
stearns@5445 | 1548 | </div> |
stearns@5445 | 1549 | |
stearns@5445 | 1550 | <ol> |
stearns@5445 | 1551 | <li><a href="http://www.w3.org/TR/CSS2/fonts.html">font properties</a> |
stearns@5445 | 1552 | |
stearns@5445 | 1553 | <li><a href="http://www.w3.org/TR/CSS2/colors.html">color property</a> |
stearns@5445 | 1554 | |
stearns@5453 | 1555 | <li><a href="http://www.w3.org/TR/css3-color/#transparency">opacity |
stearns@5453 | 1556 | property</a> |
stearns@5453 | 1557 | |
stearns@5445 | 1558 | <li><a href="http://www.w3.org/TR/css3-background/#backgrounds">background |
stearns@5445 | 1559 | property</a> |
stearns@5445 | 1560 | |
stearns@5445 | 1561 | <li><a |
stearns@5445 | 1562 | href="http://www.w3.org/TR/CSS2/text.html#propdef-word-spacing">‘<code |
stearns@5445 | 1563 | class=property>word-spacing</code>’</a> |
stearns@5445 | 1564 | |
stearns@5445 | 1565 | <li><a |
stearns@5445 | 1566 | href="http://www.w3.org/TR/CSS2/text.html#propdef-letter-spacing">‘<code |
stearns@5445 | 1567 | class=property>letter-spacing</code>’</a> |
stearns@5445 | 1568 | |
stearns@5445 | 1569 | <li><a |
stearns@5445 | 1570 | href="http://www.w3.org/TR/CSS2/text.html#propdef-text-decoration">‘<code |
stearns@5445 | 1571 | class=property>text-decoration</code>’</a> |
stearns@5445 | 1572 | |
stearns@5445 | 1573 | <li><a |
stearns@5445 | 1574 | href="http://www.w3.org/TR/CSS2/text.html#propdef-text-transform">‘<code |
stearns@5445 | 1575 | class=property>text-transform</code>’</a> |
stearns@5445 | 1576 | |
stearns@5445 | 1577 | <li><a |
stearns@5445 | 1578 | href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">‘<code |
stearns@5445 | 1579 | class=property>line-height</code>’</a> |
stearns@5445 | 1580 | |
stearns@5445 | 1581 | <li><a href="http://www.w3.org/TR/css3-background/#borders">border |
stearns@5445 | 1582 | properties</a> |
stearns@5445 | 1583 | |
stearns@5445 | 1584 | <li><a href="http://www.w3.org/TR/css3-background/#corners">rounded corner |
stearns@5445 | 1585 | properties</a> |
stearns@5445 | 1586 | |
stearns@5445 | 1587 | <li><a href="http://www.w3.org/TR/css3-background/#border-images">border |
stearns@5445 | 1588 | images properties</a> |
stearns@5445 | 1589 | |
stearns@5445 | 1590 | <li><a href="http://www.w3.org/TR/CSS2/box.html#margin-properties">margin |
stearns@5445 | 1591 | properties</a> |
stearns@5445 | 1592 | |
stearns@5445 | 1593 | <li><a |
stearns@5445 | 1594 | href="http://www.w3.org/TR/CSS2/box.html#padding-properties">padding |
stearns@5445 | 1595 | properties</a> |
stearns@5445 | 1596 | |
stearns@5445 | 1597 | <li><a href="http://www.w3.org/TR/css3-text/#text-shadow">‘<code |
stearns@5445 | 1598 | class=property>text-shadow</code>’ property</a> |
stearns@5445 | 1599 | |
stearns@5445 | 1600 | <li><a |
stearns@5445 | 1601 | href="http://www.w3.org/TR/css3-background/#the-box-shadow">‘<code |
stearns@5445 | 1602 | class=property>box-shadow</code>’ property</a> |
stearns@5445 | 1603 | |
stearns@5445 | 1604 | <li><a |
stearns@5445 | 1605 | href="http://www.w3.org/TR/css3-background/#the-box-decoration-break">‘<code |
stearns@5445 | 1606 | class=property>box-decoration-break</code>’ property</a> |
stearns@5445 | 1607 | |
stearns@5445 | 1608 | <li><a |
stearns@5445 | 1609 | href="http://www.w3.org/TR/CSS2/visudet.html#the-width-property">‘<code |
stearns@5445 | 1610 | class=property>width</code>’ property</a> |
stearns@5445 | 1611 | </ol> |
stearns@5445 | 1612 | |
stearns@5445 | 1613 | <div class=example id=region-style-example> |
stearns@5445 | 1614 | <p>In the following example, the <a href="#named-flow0">named flow</a> |
stearns@5445 | 1615 | ‘<code class=css>article_flow</code>’ flows through |
stearns@5445 | 1616 | ‘<code class=css>region_1</code>’ and ‘<code |
stearns@5445 | 1617 | class=css>region_2</code>’.</p> |
stearns@5445 | 1618 | |
stearns@5445 | 1619 | <pre> |
stearns@5445 | 1620 | <style> |
stearns@5445 | 1621 | #div_1 { |
stearns@5445 | 1622 | <strong>flow-into: article_flow;</strong> |
stearns@5445 | 1623 | } |
stearns@5445 | 1624 | |
stearns@5445 | 1625 | #region1, #region2 { |
stearns@5445 | 1626 | <strong>flow-from: article_flow;</strong> |
stearns@5445 | 1627 | } |
stearns@5445 | 1628 | |
stearns@5445 | 1629 | /* region style "RSA" */ |
stearns@5445 | 1630 | <strong>@region #region1, #region2</strong> { |
stearns@5445 | 1631 | div {...} |
stearns@5445 | 1632 | p {...} |
stearns@5445 | 1633 | } |
stearns@5445 | 1634 | |
stearns@5445 | 1635 | /* region style "RSB" */ |
stearns@5445 | 1636 | <strong>@region #region1</strong> { |
stearns@5445 | 1637 | p {...} |
stearns@5445 | 1638 | } |
stearns@5445 | 1639 | |
stearns@5445 | 1640 | </style> |
stearns@5445 | 1641 | |
stearns@5445 | 1642 | <div id="div_1"> |
stearns@5445 | 1643 | <p id="p_1">...</p> |
stearns@5445 | 1644 | <p id="p_2">...</p> |
stearns@5445 | 1645 | </div> |
stearns@5445 | 1646 | |
stearns@5445 | 1647 | <div id="region1"></div> |
stearns@5445 | 1648 | <div id="region2"></div> |
stearns@5445 | 1649 | |
stearns@5445 | 1650 | </pre> |
stearns@5445 | 1651 | |
stearns@5445 | 1652 | <div id="region_styling_illustration"> <img |
stearns@5445 | 1653 | alt="Illustration showing how a named flow content fits into regions to illustrate the @region styling." |
stearns@5445 | 1654 | id="region_styling_img_2" name="region_styling_img_2" |
stearns@5445 | 1655 | src="images/region-styling-2.png"> |
stearns@5445 | 1656 | <ul class=swatch-list> |
stearns@5445 | 1657 | <li><span class=swatch style="background:#1C75BC"> </span>div div_1 |
stearns@5445 | 1658 | |
stearns@5445 | 1659 | <li><span class=swatch style="background:crimson"> </span>paragraph |
stearns@5445 | 1660 | p_1 |
stearns@5445 | 1661 | |
stearns@5445 | 1662 | <li><span class=swatch style="background:white"> </span>paragraph |
stearns@5445 | 1663 | p_2 |
stearns@5445 | 1664 | |
stearns@5445 | 1665 | <li><span class=swatch style="background:#E6E7E8"> </span>range of |
stearns@5445 | 1666 | flow that fits into region_1 |
stearns@5445 | 1667 | |
stearns@5445 | 1668 | <li><span class=swatch style="background:#BCBEC0"> </span>range of |
stearns@5445 | 1669 | flow that fits into region_2 |
stearns@5445 | 1670 | </ul> |
stearns@5445 | 1671 | </div> |
stearns@5445 | 1672 | |
stearns@5445 | 1673 | <p>The region style ‘<code class=css>RSA</code>’ applies to |
stearns@5445 | 1674 | flow content that is laid out in either ‘<code |
stearns@5445 | 1675 | class=css>region_1</code>’ or ‘<code |
stearns@5445 | 1676 | class=css>region_2</code>’.</p> |
stearns@5445 | 1677 | |
stearns@5445 | 1678 | <p>The first rule set ‘<code class=css>div {...}</code>’ |
stearns@5445 | 1679 | applies to all <code class=html><div></code> elements that fit |
stearns@5445 | 1680 | partially or fully into ‘<code class=css>region_1</code>’ or |
stearns@5445 | 1681 | ‘<code class=css>region_2</code>’. <code |
stearns@5445 | 1682 | class=html>div_1</code> is split between ‘<code |
stearns@5445 | 1683 | class=css>region_1</code>’ and ‘<code |
stearns@5445 | 1684 | class=css>region_2</code>’ and gets the style from this style rule.</p> |
stearns@5445 | 1685 | |
stearns@5445 | 1686 | <p>The second rule set ‘<code class=css>p {...}</code>’ |
stearns@5445 | 1687 | applies to all <code class=html><p></code> elements that fit into |
stearns@5445 | 1688 | ‘<code class=css>region_1</code>’ or ‘<code |
stearns@5445 | 1689 | class=css>region_2</code>’. In our example, both <code |
stearns@5445 | 1690 | class=html>p_1</code> and <code class=html>p_2</code> are selected.</p> |
stearns@5445 | 1691 | |
stearns@5445 | 1692 | <p>The region style ‘<code class=css>RSB</code>’ applies to |
stearns@5445 | 1693 | flow content that fits in ‘<code class=css>region_1</code>’.</p> |
stearns@5445 | 1694 | |
stearns@5445 | 1695 | <p>The first rule set ‘<code class=css>p {...}</code>’ matches |
stearns@5445 | 1696 | <code class=html>p_1</code> and <code class=html>p_2</code> because these |
stearns@5445 | 1697 | paragraphs flow into ‘<code class=css>region_1</code>’. Only |
stearns@5445 | 1698 | the fragment of <code class=html>p_2</code> that flows into <code |
stearns@5445 | 1699 | class=html>region_1</code> is styled with this rule.</p> |
stearns@5445 | 1700 | </div> |
stearns@5445 | 1701 | |
stearns@5445 | 1702 | <div class=issue-marker data-bug_id=15734 data-bug_status=NEW> <a |
stearns@5445 | 1703 | href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15734">Bug-15734</a> |
stearns@5445 | 1704 | <div class=issue-details> |
stearns@5445 | 1705 | <p class=short-desc>@region and specificity</p> |
stearns@5445 | 1706 | </div> |
stearns@5445 | 1707 | </div> |
stearns@5445 | 1708 | |
stearns@5445 | 1709 | <p>The specificity of the selectors in a ‘<code |
stearns@5445 | 1710 | class=css>@region</code>’ rule is calculated as <a |
stearns@5445 | 1711 | href="http://www.w3.org/TR/css3-selectors/#specificity">defined</a> in the |
stearns@5445 | 1712 | CSS Selectors module (see <a href="#SELECT" |
stearns@5445 | 1713 | rel=biblioentry>[SELECT]<!--{{SELECT}}--></a>). In other words, the |
stearns@5445 | 1714 | ‘<code class=css>@region</code>’ rule adds an extra condition |
stearns@5445 | 1715 | to the selector's matching, but does not change the selector's |
stearns@5445 | 1716 | specificity. This is the same behavior as selectors appearing in |
stearns@5445 | 1717 | ‘<code class=css>@media</code>’ rules declaration blocks (see |
stearns@5445 | 1718 | <a href="#MEDIAQ" rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a>), where |
stearns@5445 | 1719 | the rule does not influence the selectors' specificity. |
stearns@5445 | 1720 | |
stearns@5445 | 1721 | <p>Consequently, selectors that match a given element (as describe above), |
stearns@5445 | 1722 | participate in the <a |
stearns@5445 | 1723 | href="http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascading-order">CSS |
stearns@5445 | 1724 | Cascading order</a> as defined in <a href="#CSS21" |
stearns@5445 | 1725 | rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. |
stearns@5445 | 1726 | |
stearns@5445 | 1727 | <div> Region styling does not apply to nested regions. For example, if a |
stearns@5445 | 1728 | region ‘<code class=property>A</code>’ receives content from a |
stearns@5445 | 1729 | flow that contains region ‘<code class=property>B</code>’, the |
stearns@5445 | 1730 | content that flows into ‘<code class=property>B</code>’ does |
stearns@5445 | 1731 | not receive the region styling specified for region ‘<code |
stearns@5445 | 1732 | class=property>A</code>’.</div> |
stearns@5445 | 1733 | |
stearns@5445 | 1734 | <h2 id=multi-column-regions><span class=secno>4. </span>Multi-column |
stearns@5445 | 1735 | regions</h2> |
stearns@5445 | 1736 | |
stearns@5445 | 1737 | <p>Column boxes of a <a |
stearns@5445 | 1738 | href="http://dev.w3.org/csswg/css3-multicol/#multi-column-element">multi-column</a> |
stearns@5445 | 1739 | element that has an assigned <a href="#named-flow0"><em><span>named |
stearns@5445 | 1740 | flow</span></em></a> are regions. This means that a multi-column element |
stearns@5445 | 1741 | can be used as a convenient short-hand to create multiple column-box |
stearns@5445 | 1742 | regions into which content flows. |
stearns@5445 | 1743 | |
stearns@5445 | 1744 | <p>The fragment of content that flows into column-box regions is laid out |
stearns@5445 | 1745 | according to the multi-column specification. In particular, when <a |
stearns@5445 | 1746 | href="#flow-fragment-height-resolution">computing the flow fragment |
stearns@5445 | 1747 | height</a> of a multi-column element that is associated with a <a |
stearns@5445 | 1748 | href="#named-flow0"><em><span>named flow</span></em></a>, the ‘<code |
stearns@5445 | 1749 | class=property>column-fill</code>’ property is honored to balance |
stearns@5445 | 1750 | the fragments of content that would flow across the column-box regions. |
stearns@5445 | 1751 | |
stearns@5445 | 1752 | <div class=example> |
stearns@5445 | 1753 | <p>The following example:</p> |
stearns@5445 | 1754 | |
stearns@5445 | 1755 | <pre> |
stearns@5445 | 1756 | <style> |
stearns@5445 | 1757 | #multi-col { |
stearns@5445 | 1758 | column-count: 2; |
stearns@5445 | 1759 | flow-from: article; |
stearns@5445 | 1760 | height: 6em; |
stearns@5445 | 1761 | column-gap: 1em; |
stearns@5445 | 1762 | } |
stearns@5445 | 1763 | |
stearns@5445 | 1764 | #remainder { |
stearns@5445 | 1765 | flow-from: article; |
stearns@5445 | 1766 | height: auto; |
stearns@5445 | 1767 | } |
stearns@5445 | 1768 | </style> |
stearns@5445 | 1769 | |
stearns@5445 | 1770 | <div id="article">...<div> |
stearns@5445 | 1771 | <div id="multicol"></div> |
stearns@5445 | 1772 | <div id="remainder"></div></pre> |
stearns@5445 | 1773 | |
stearns@5445 | 1774 | <p>is equivalent but simpler than, for example:</p> |
stearns@5445 | 1775 | |
stearns@5445 | 1776 | <pre> |
stearns@5445 | 1777 | <style> |
stearns@5445 | 1778 | #flex { |
stearns@5445 | 1779 | display: flex; |
stearns@5445 | 1780 | flex-pack: justify; |
stearns@5445 | 1781 | } |
stearns@5445 | 1782 | #flex > div { |
stearns@5445 | 1783 | flow-from: article; |
stearns@5445 | 1784 | width: calc(50% - 0.5em); |
stearns@5445 | 1785 | } |
stearns@5445 | 1786 | |
stearns@5445 | 1787 | #remainder { |
stearns@5445 | 1788 | flow-from: article; |
stearns@5445 | 1789 | height: auto; |
stearns@5445 | 1790 | } |
stearns@5445 | 1791 | </style> |
stearns@5445 | 1792 | |
stearns@5445 | 1793 | <div id="article">...<div> |
stearns@5445 | 1794 | <div id="flex"> |
stearns@5445 | 1795 | <div /> |
stearns@5445 | 1796 | <div /> |
stearns@5445 | 1797 | </div> |
stearns@5445 | 1798 | <div id="remainder"></div></pre> |
stearns@5445 | 1799 | </div> |
stearns@5445 | 1800 | |
stearns@5445 | 1801 | <p>Overflow of column-box regions is mostly handled according to the same |
stearns@5445 | 1802 | rules as other regions. If the content does not fit in the region, then |
stearns@5445 | 1803 | the rest of the content flows into regions that follow in the region |
stearns@5445 | 1804 | chain. However, if a column-box region is the last region in a |
stearns@5445 | 1805 | <span>region chain, then the multi-column element must generate additional |
stearns@5445 | 1806 | column-box regions if its flow fragment overflows as it would with normal |
stearns@5445 | 1807 | content).</span> |
stearns@5445 | 1808 | |
stearns@5445 | 1809 | <h2 id="pseudo_elements"><span class=secno>5. </span>Pseudo-elements</h2> |
stearns@5445 | 1810 | |
stearns@5445 | 1811 | <div class=issue-marker data-bug_id=15188 data-bug_status=NEW> <a |
stearns@5445 | 1812 | href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15188">Bug-15188</a> |
stearns@5445 | 1813 | <div class=issue-details> |
stearns@5445 | 1814 | <p class=short-desc>add functionality for having textual description like |
stearns@5445 | 1815 | "continued here" or "continued on page x" to regions.</p> |
stearns@5445 | 1816 | </div> |
stearns@5445 | 1817 | </div> |
stearns@5445 | 1818 | |
stearns@5445 | 1819 | <p>It can be useful to visually mark the content to highlight that a |
stearns@5445 | 1820 | content thread is flowing from region to region. For example, a marker |
stearns@5445 | 1821 | such as <em>‘<code class=css>continues on page 3</code>’</em> |
stearns@5445 | 1822 | clearly indicates, at the end of a region, that there is more content in |
stearns@5445 | 1823 | the flow which can be found on ‘<code class=css>page 3</code>’ |
stearns@5445 | 1824 | (in this example, the notion of page is application specific). |
stearns@5445 | 1825 | |
stearns@5445 | 1826 | <p>The ‘<code class=css>::before</code>’ and ‘<code |
stearns@5445 | 1827 | class=css>::after</code>’ pseudo-elements (see <a href="#SELECT" |
stearns@5445 | 1828 | rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>) let content authors mark |
stearns@5445 | 1829 | the beginning and end of a region with such markers. |
stearns@5445 | 1830 | |
stearns@5445 | 1831 | <p>If ::before or ::after pseudo-elements are used on a <a |
stearns@5445 | 1832 | href="http://dev.w3.org/csswg/css3-multicol/#multi-column-element">multi-column</a> |
stearns@5445 | 1833 | element that has an assigned <a href="#named-flow0"><em><span>named |
stearns@5445 | 1834 | flow</span></em></a> then the ::before pseudo-element is only applied to |
stearns@5445 | 1835 | the first column-box region, and the ::after pseudo-element is only |
stearns@5445 | 1836 | applied to the last column-box region in that multi-column element. |
stearns@5445 | 1837 | |
stearns@5445 | 1838 | <h3 id=processing-model><span class=secno>5.1. </span>Processing model</h3> |
stearns@5445 | 1839 | |
stearns@5445 | 1840 | <p>The ‘<code class=css>::before</code>’ content is laid out in |
stearns@5445 | 1841 | the region prior to any other content coming from the flow. Note that it |
stearns@5445 | 1842 | is possible to set the ‘<code class=css>::before</code>’ |
stearns@5445 | 1843 | pseudo-element's ‘<code class=property>display</code>’ |
stearns@5445 | 1844 | property to ‘<code class=property>run-in</code>’ to align it |
stearns@5445 | 1845 | with the content's inline boxes. |
stearns@5445 | 1846 | |
stearns@5445 | 1847 | <p>The ‘<code class=css>::after</code>’ content is laid out in |
stearns@5445 | 1848 | the region after laying out the flow content. Then, flow content is |
stearns@5445 | 1849 | removed from the region to accommodate for the ‘<code |
stearns@5445 | 1850 | class=css>::after</code>’ content. Accommodating means that the |
stearns@5445 | 1851 | ‘<code class=css>::after</code>’ content is laid out without |
stearns@5445 | 1852 | overflowing the region. If there is still not enough room to accommodate |
stearns@5445 | 1853 | for the ‘<code class=css>::after</code>’ content after |
stearns@5445 | 1854 | removing all flow content, then the ‘<code |
stearns@5445 | 1855 | class=css>::after</code>’ content overflows. The ‘<code |
stearns@5445 | 1856 | class=property>display</code>’ property of the ‘<code |
stearns@5445 | 1857 | class=css>::after</code>’ content can be set to ‘<code |
stearns@5445 | 1858 | class=property>run-in</code>’ to align with the region's content's |
stearns@5445 | 1859 | inline boxes. In that case, the ‘<code |
stearns@5445 | 1860 | class=css>::after</code>’ content becomes the last inline box of the |
stearns@5445 | 1861 | previous element in the flow that has some visual rendering in the region |
stearns@5445 | 1862 | and can accommodate for the ‘<code class=css>::after</code>’ |
stearns@5445 | 1863 | box. |
stearns@5445 | 1864 | |
stearns@5445 | 1865 | <h2 id="cssom_view_and_css_regions"><span class=secno>6. </span>CSSOM view |
stearns@5445 | 1866 | and CSS regions</h2> |
stearns@5445 | 1867 | |
stearns@5445 | 1868 | <div class=issue-marker data-bug_id=15679 data-bug_status=NEW> <a |
stearns@5445 | 1869 | href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15679">Bug-15679</a> |
stearns@5445 | 1870 | <div class=issue-details> |
stearns@5445 | 1871 | <p class=short-desc>elementFromPoint and CSS regions</p> |
stearns@5445 | 1872 | </div> |
stearns@5445 | 1873 | </div> |
stearns@5445 | 1874 | |
stearns@5445 | 1875 | <p>Since content may flow into multiple regions, authors need a way to |
stearns@5445 | 1876 | determine if there are enough regions to flow all the content from a named |
stearns@5445 | 1877 | flow. This is especially important considering that the size of regions or |
stearns@5445 | 1878 | the size of the content may change depending on the display context. For |
stearns@5445 | 1879 | example, flowing the same content on a mobile phone with a small screen |
stearns@5445 | 1880 | may require more regions than on a large desktop display. Another example |
stearns@5445 | 1881 | is the user changing the font size of text flowing through regions. |
stearns@5445 | 1882 | Depending on the change, new regions may be needed to accommodate for the |
stearns@5445 | 1883 | additional space required to fit the larger text or some regions may need |
stearns@5445 | 1884 | to be removed for smaller text. |
stearns@5445 | 1885 | |
stearns@5445 | 1886 | <h3 id=the-namedflow-interface><span class=secno>6.1. </span>The NamedFlow |
stearns@5445 | 1887 | interface</h3> |
stearns@5445 | 1888 | |
stearns@5445 | 1889 | <p>A <a href="#named-flow0">named flow</a> is created when it becomes |
stearns@5445 | 1890 | referenced by the ‘<a href="#flow-into"><code |
stearns@5445 | 1891 | class=property>flow-into</code></a>’ and/or ‘<a |
stearns@5445 | 1892 | href="#flow-from"><code class=property>flow-from</code></a>’ |
stearns@5445 | 1893 | computed values. The following APIs allow scripts to reference a <a |
stearns@5445 | 1894 | href="#dom-named-flow"><code class=idl>NamedFlow</code></a> object |
stearns@5445 | 1895 | representation of a <a href="#named-flow0">named flow</a>. |
stearns@5445 | 1896 | |
stearns@5445 | 1897 | <p>The possible states for a <a href="#named-flow0">named flow</a> are |
stearns@5445 | 1898 | described in the following figure. These states are referenced in |
stearns@5445 | 1899 | subsequent text. |
stearns@5445 | 1900 | |
stearns@5445 | 1901 | <div class=figure> <img alt="NamedFlow states" |
stearns@5445 | 1902 | src="images/named-flow-states.svg" width=600px> |
stearns@5445 | 1903 | <p class=caption><a href="#named-flow0">named flow</a> states and |
stearns@5445 | 1904 | transitions</p> |
stearns@5445 | 1905 | </div> |
stearns@5445 | 1906 | |
stearns@5445 | 1907 | <p>An addition method and attribute on the <a |
stearns@5445 | 1908 | href="http://www.w3.org/TR/dom/#interface-document"><code |
stearns@5445 | 1909 | class=idl>Document</code></a> interface provide access to <a |
stearns@5445 | 1910 | href="#named-flow0">named flows</a>. |
stearns@5445 | 1911 | |
stearns@5445 | 1912 | <pre class=idl> |
stearns@5445 | 1913 | partial interface <a |
stearns@5445 | 1914 | href="http://www.w3.org/TR/dom/#interface-document">Document</a> { |
stearns@5445 | 1915 | readonly attribute <a |
stearns@5445 | 1916 | href="#dom-named-flow-collection">NamedFlowCollection</a> <a |
stearns@5445 | 1917 | href="#document-namedflows">namedFlows</a>; |
stearns@5445 | 1918 | <a |
stearns@5445 | 1919 | href="#dom-named-flow">NamedFlow?</a> <a |
stearns@5445 | 1920 | href="#document-getflowbyname">getFlowByName(DOMString name)</a>; |
stearns@5445 | 1921 | }; |
stearns@5445 | 1922 | </pre> |
stearns@5445 | 1923 | |
stearns@5445 | 1924 | <p>The <dfn id=document-namedflows><code class=idl>namedFlows</code></dfn> |
stearns@5445 | 1925 | attribute on the <a |
stearns@5445 | 1926 | href="http://www.w3.org/TR/dom/#interface-document"><code |
stearns@5445 | 1927 | class=idl>Document</code></a> interface returns the live list of all the |
stearns@5445 | 1928 | current <a href="#named-flow0">named flows</a> in the document. |
stearns@5445 | 1929 | |
stearns@5445 | 1930 | <p>The <a href="#document-namedflows"><code class=idl>namedFlows</code></a> |
stearns@5445 | 1931 | collection must include all <a href="#named-flow0">named flows</a> that |
stearns@5445 | 1932 | are currently in the <code>CREATED</code> and |
stearns@5445 | 1933 | <code>CREATED-REFERENCED</code> states. The list may include <a |
stearns@5445 | 1934 | href="#named-flow0">named flows</a> that are in the |
stearns@5445 | 1935 | <code>REFERENCED</code> state. The list may also include <a |
stearns@5445 | 1936 | href="#named-flow0">named flows</a>that are in the STALE state. |
stearns@5445 | 1937 | |
stearns@5445 | 1938 | <p>The <dfn id=document-getflowbyname><code |
stearns@5445 | 1939 | class=idl>getFlowByName</code></dfn> method on the <a |
stearns@5445 | 1940 | href="http://www.w3.org/TR/dom/#interface-document"><code |
stearns@5445 | 1941 | class=idl>Document</code></a> interface provides access to the document's |
stearns@5445 | 1942 | <a href="#dom-named-flow"><code class=idl>NamedFlow</code></a> instances. |
stearns@5445 | 1943 | The return value depends on the <a href="#named-flow0">named flow</a> |
stearns@5445 | 1944 | state: |
stearns@5445 | 1945 | |
stearns@5445 | 1946 | <ul> |
stearns@5445 | 1947 | <li><code class=idl>NULL</code>: the user agent must return |
stearns@5445 | 1948 | <code>null</code>. |
stearns@5445 | 1949 | |
stearns@5445 | 1950 | <li><code class=idl>STALE</code>: the user agent may return null or a |
stearns@5445 | 1951 | valid <a href="#dom-named-flow"><code class=idl>NamedFlow</code></a> |
stearns@5445 | 1952 | instance. If the user agent returns a valid instance, subsequent calls to |
stearns@5445 | 1953 | the <a href="#document-getflowbyname"><code |
stearns@5445 | 1954 | class=idl>getFlowByName</code></a> method for the same name argument must |
stearns@5445 | 1955 | return the same object instance, no matter what the state of the <a |
stearns@5445 | 1956 | href="#named-flow0">named flow</a> is. |
stearns@5445 | 1957 | |
stearns@5445 | 1958 | <li><code class=idl>CREATED</code> or <code |
stearns@5445 | 1959 | class=idl>CREATED-REFERENCED</code>: the user agent must return a valid |
stearns@5445 | 1960 | <a href="#dom-named-flow"><code class=idl>NamedFlow</code></a> instance. |
stearns@5445 | 1961 | |
stearns@5445 | 1962 | <li><code class=idl>REFERENCED</code>: the user agent may return |
stearns@5445 | 1963 | <code>null</code> or it may return a valid <a |
stearns@5445 | 1964 | href="#dom-named-flow"><code class=idl>NamedFlow</code></a> instance. If |
stearns@5445 | 1965 | the user agent returns a valid object, subsequent calls to the <a |
stearns@5445 | 1966 | href="#document-getflowbyname"><code class=idl>getFlowByName</code></a> |
stearns@5445 | 1967 | method with the same name argument must return the same object instance, |
stearns@5445 | 1968 | no matter what the state of the <a href="#named-flow0">named flow</a> is. |
stearns@5445 | 1969 | </ul> |
stearns@5445 | 1970 | |
stearns@5445 | 1971 | <p>The <dfn id=dom-named-flow-collection><code |
stearns@5445 | 1972 | class=idl>NamedFlowCollection</code></dfn> interface provides a list of |
stearns@5445 | 1973 | current <a href="#dom-named-flow"><code class=idl>NamedFlow</code></a> |
stearns@5445 | 1974 | instances in the document. The collection is live and methods operate on |
stearns@5445 | 1975 | the underlying data, not a snapshot of the data. |
stearns@5445 | 1976 | |
stearns@5445 | 1977 | <pre class=idl> |
stearns@5445 | 1978 | interface NamedFlowCollection { |
stearns@5445 | 1979 | readonly attribute unsigned long <a |
stearns@5445 | 1980 | href="#dom-named-flow-collection-length">length</a>; |
stearns@5445 | 1981 | getter <a |
stearns@5445 | 1982 | href="#dom-named-flow">NamedFlow?</a> <a |
stearns@5445 | 1983 | href="#named-flow-collection-item">item (unsigned long index)</a>; |
stearns@5445 | 1984 | };</pre> |
stearns@5445 | 1985 | |
stearns@5445 | 1986 | <p>The <dfn id=dom-named-flow-collection-length><code |
stearns@5445 | 1987 | class=idl>length</code></dfn> attribute returns the number of items in the |
stearns@5445 | 1988 | collection. |
stearns@5445 | 1989 | |
stearns@5445 | 1990 | <p>The <dfn id=dom-named-flow-collection-item><code |
stearns@5445 | 1991 | class=idl>item(index)</code></dfn> method returns the item at index |
stearns@5445 | 1992 | <em>index</em> in the collection or <code class=idl>null</code> if |
stearns@5445 | 1993 | <em>index</em> is out of range. An object <code>collection</code> |
stearns@5445 | 1994 | implementing <a |
stearns@5445 | 1995 | href="#dom-named-flow-collection"><code>NamedFlowCollection</code></a> |
stearns@5445 | 1996 | supports indices in the range <code>0 ≤ index < |
stearns@5445 | 1997 | collection.length</code>. |
stearns@5445 | 1998 | |
stearns@5445 | 1999 | <p>The <dfn id=dom-named-flow><code class=idl>NamedFlow</code></dfn> |
stearns@5445 | 2000 | interface offers a representation of the <a href="#named-flow0">named |
stearns@5445 | 2001 | flow</a>. A <a href="#dom-named-flow"><code class=idl>NamedFlow</code></a> |
stearns@5445 | 2002 | object is live meaning that it always represents the <a |
stearns@5445 | 2003 | href="#named-flow0">named flow</a> with the corresponding name, even if |
stearns@5445 | 2004 | that <a href="#named-flow0">named flow</a> has transitioned to the |
stearns@5445 | 2005 | <code>REFERENCED</code> or the <code>STALE</code> states. |
stearns@5445 | 2006 | |
stearns@5445 | 2007 | <pre class=idl> |
stearns@5445 | 2008 | interface <a |
stearns@5445 | 2009 | href="#dom-named-flow">NamedFlow</a> implements <a |
stearns@5445 | 2010 | href="http://www.w3.org/TR/dom/#interface-eventtarget">EventTarget</a> { |
stearns@5445 | 2011 | readonly attribute DOMString <a |
stearns@5445 | 2012 | href="#dom-named-flow-name">name</a>; |
stearns@5445 | 2013 | readonly attribute boolean <a |
stearns@5445 | 2014 | href="#dom-named-flow-overset">overset</a>; |
stearns@5445 | 2015 | sequence<<a |
stearns@5445 | 2016 | href="#region-interface">Region</a>> <a |
stearns@5445 | 2017 | href="#dom-named-flow-get-regions">getRegions()</a>; |
stearns@5445 | 2018 | readonly attribute integer <a |
stearns@5445 | 2019 | href="#dom-named-flow-first-empty-region-index">firstEmptyRegionIndex</a>; |
stearns@5445 | 2020 | <a |
stearns@5445 | 2021 | href="http://www.w3.org/TR/dom/#interface-nodelist">NodeList</a> <a |
stearns@5445 | 2022 | href="#dom-named-flow-get-content">getContent()</a>; |
stearns@5445 | 2023 | sequence<<a |
stearns@5445 | 2024 | href="#region-interface">Region</a>> <a |
stearns@5445 | 2025 | href="#dom-named-flow-get-regions-by-content">getRegionsByContent</a>(<a |
stearns@5445 | 2026 | href="http://www.w3.org/TR/dom/#interface-node">Node</a> node); |
stearns@5445 | 2027 | };</pre> |
stearns@5445 | 2028 | |
stearns@5445 | 2029 | <p>The <dfn id=dom-named-flow-name><code class=idl>name</code></dfn> |
stearns@5445 | 2030 | attribute returns the name of the <a href="#dom-named-flow"><code |
stearns@5445 | 2031 | class=idl>NamedFlow</code></a> instance. |
stearns@5445 | 2032 | |
stearns@5445 | 2033 | <p>The <dfn id=dom-named-flow-overset><code class=idl>overset</code></dfn> |
stearns@5445 | 2034 | attribute returns true if the <a href="#named-flow0">named flow</a> does |
stearns@5445 | 2035 | not fully fit in the associated regions. Otherwise, it returns false. |
stearns@5445 | 2036 | |
stearns@5445 | 2037 | <p>The <dfn id=dom-named-flow-get-regions><code |
stearns@5445 | 2038 | class=idl>getRegions()</code></dfn> method returns the sequence of regions |
stearns@5445 | 2039 | in the <span>region chain</span> associated with the <a |
stearns@5445 | 2040 | href="#named-flow0">named flow</a>. Note that the returned values is a |
stearns@5445 | 2041 | static sequence. |
stearns@5445 | 2042 | |
stearns@5445 | 2043 | <p>The <dfn |
stearns@5445 | 2044 | id=dom-named-flow-first-empty-region-index>firstEmptyRegionIndex</dfn> is |
stearns@5445 | 2045 | the index of the first region in the region chain with the <a |
stearns@5445 | 2046 | href="#dom-region-regionoverset"><code>regionOverset</code></a> attribute |
stearns@5445 | 2047 | set to <code>empty</code>. If all regions have the <a |
stearns@5445 | 2048 | href="#dom-region-regionoverset"><code>regionOverset</code></a> attribute |
stearns@5445 | 2049 | set to <code>fit</code> or <a |
stearns@5445 | 2050 | href="#dom-named-flow-overset"><code>overset</code></a>, the value for <a |
stearns@5445 | 2051 | href="#dom-named-flow-first-empty-region-index"><code>firstEmptyRegionIndex</code></a> |
stearns@5445 | 2052 | is <code>-1</code>. If there are no regions in the <span>region |
stearns@5445 | 2053 | chain</span>, the value is <code>-1</code> as well. |
stearns@5445 | 2054 | |
stearns@5445 | 2055 | <p>The <dfn id=dom-named-flow-get-content>getContent()</dfn> methods |
stearns@5445 | 2056 | returns an ordered collection of nodes that constitute the <a |
stearns@5445 | 2057 | href="#named-flow0">named flow</a>. The returned list is a static snapshot |
stearns@5445 | 2058 | of the <a href="#named-flow0">named flow</a> content at the time the |
stearns@5445 | 2059 | method is invoked. This list contains the elements that were moved to the |
stearns@5445 | 2060 | <a href="#named-flow0">named flow</a> but not their descendants (unless |
stearns@5445 | 2061 | the descendants are themselves moved to the <a href="#named-flow0">named |
stearns@5445 | 2062 | flow</a>). |
stearns@5445 | 2063 | |
stearns@5445 | 2064 | <p>The <dfn |
stearns@5445 | 2065 | id=dom-named-flow-get-regions-by-content>getRegionsByContent()</dfn> |
stearns@5445 | 2066 | method returns the sequence of regions that contain at least part of the |
stearns@5445 | 2067 | target content node. Note that the returned values is a static sequence. |
stearns@5445 | 2068 | |
stearns@5445 | 2069 | <p>The <a href="#dom-named-flow"><code class=idl>NamedFlow</code></a> |
stearns@5445 | 2070 | interface can be used for different purposes. For example, the <a |
stearns@5445 | 2071 | href="#dom-named-flow-get-regions-by-content"><code>getRegionsByContent()</code></a> |
stearns@5445 | 2072 | method can help navigate by bookmark: a script can find the |
stearns@5445 | 2073 | <span>region</span>s that display a particular anchor and bring them to |
stearns@5445 | 2074 | view. |
stearns@5445 | 2075 | |
stearns@5445 | 2076 | <p>Likewise, the interface allows authors to check if all content has been |
stearns@5445 | 2077 | fitted into existing regions. If it has, the <a |
stearns@5445 | 2078 | href="#dom-named-flow-overset"><code>overset</code></a> attribute would be |
stearns@5445 | 2079 | false. |
stearns@5445 | 2080 | |
stearns@5445 | 2081 | <h3 id=the-region-interface><span class=secno>6.2. </span>The Region |
stearns@5445 | 2082 | interface</h3> |
stearns@5445 | 2083 | |
stearns@5445 | 2084 | <p>The <dfn id=region-interface><code class=idl>Region</code> |
stearns@5445 | 2085 | interface</dfn> provides an abstraction for <a |
stearns@5445 | 2086 | href="http://www.w3.org/TR/dom/#interface-element"><code |
stearns@5445 | 2087 | class=idl>Element</code>s</a>, pseudo-elements or other CSS constructs |
stearns@5445 | 2088 | (such as <a |
stearns@5445 | 2089 | href="http://dev.w3.org/csswg/css3-page-template/#templates-and-slots">slots</a> |
stearns@5445 | 2090 | <a href="#CSS3-PAGE-TEMPLATE" |
stearns@5445 | 2091 | rel=biblioentry>[CSS3-PAGE-TEMPLATE]<!--{{!CSS3-PAGE-TEMPLATE}}--></a>) |
stearns@5445 | 2092 | which can be regions. |
stearns@5445 | 2093 | |
stearns@5445 | 2094 | <pre class=idl> |
stearns@5445 | 2095 | interface Region { |
stearns@5445 | 2096 | readonly attribute DOMString <a |
stearns@5445 | 2097 | href="#dom-region-regionoverset">regionOverset</a>; |
stearns@5445 | 2098 | readonly attribute DOMString <a |
stearns@5445 | 2099 | href="#dom-region-flowfrom">flowFrom</a>; |
stearns@5445 | 2100 | sequence<<a |
stearns@5445 | 2101 | href="#">Range</a>>? <a |
stearns@5445 | 2102 | href="#dom-region-getregionflowranges">getRegionFlowRanges()</a>; |
stearns@5445 | 2103 | };</pre> |
stearns@5445 | 2104 | |
stearns@5445 | 2105 | <p>The <dfn id=dom-region-regionoverset><code |
stearns@5445 | 2106 | class=idl>regionOverset</code></dfn> attribute returns one of the |
stearns@5445 | 2107 | following values: |
stearns@5445 | 2108 | |
stearns@5445 | 2109 | <dl> |
stearns@5445 | 2110 | <dt>‘<a href="#dom-named-flow-overset"><code |
stearns@5445 | 2111 | class=property>overset</code></a>’ |
stearns@5445 | 2112 | |
stearns@5445 | 2113 | <dd>The region is the last one in the <span title=region-chain>region |
stearns@5445 | 2114 | chain</span> and not able to fit the remaining content from the <a |
stearns@5445 | 2115 | href="#named-flow0">named flow</a>. Note that the region's <a |
stearns@5445 | 2116 | href="http://www.w3.org/TR/CSS21/visufx.html#overflow"><code |
stearns@5445 | 2117 | class=idl>overflow</code></a> property value can be used to control the |
stearns@5445 | 2118 | visibility of the overflowing content and the ‘<a |
stearns@5445 | 2119 | href="#region-overflow"><code |
stearns@5445 | 2120 | class=property>region-overflow</code></a>’ property controls |
stearns@5445 | 2121 | whether or not fragmentation happens on the content that overflows the |
stearns@5445 | 2122 | last region. |
stearns@5445 | 2123 | |
stearns@5445 | 2124 | <dt>‘<code class=property>fit</code>’ |
stearns@5445 | 2125 | |
stearns@5445 | 2126 | <dd>The region's flow fragment content fits into the region's <a |
stearns@5445 | 2127 | href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">content |
stearns@5445 | 2128 | box</a>. If the region is the last one in the <span |
stearns@5445 | 2129 | title=region-chain>region chain</span>, it means that the content fits |
stearns@5445 | 2130 | without overflowing. If the region is not the last one in the region |
stearns@5445 | 2131 | chain, that means the <a href="#named-flow0">named flow</a> content is |
stearns@5445 | 2132 | further fitted in subsequent regions. In this last case, note that the <a |
stearns@5445 | 2133 | href="#named-flow0">named flow</a> fragment may be empty (for example if |
stearns@5445 | 2134 | the region is too small to accommodate any content). |
stearns@5445 | 2135 | |
stearns@5445 | 2136 | <dt>‘<code class=property>empty</code>’ |
stearns@5445 | 2137 | |
stearns@5445 | 2138 | <dd>All content from the <a href="#named-flow0">named flow</a> was fitted |
stearns@5445 | 2139 | in prior regions. |
stearns@5445 | 2140 | </dl> |
stearns@5445 | 2141 | |
stearns@5445 | 2142 | <p>Note that if there is no content in the <a href="#named-flow0">named |
stearns@5445 | 2143 | flow</a>, all regions associated with that <a href="#named-flow0">named |
stearns@5445 | 2144 | flow</a> should have their <a href="#dom-region-regionoverset"><code |
stearns@5445 | 2145 | class=idl>regionOverset</code></a> attribute return ‘<code |
stearns@5445 | 2146 | class=property>empty</code>’. If there is content in the flow but |
stearns@5445 | 2147 | that content does not generate any box for visual formatting, the |
stearns@5445 | 2148 | ‘<a href="#dom-named-flow-overset"><code |
stearns@5445 | 2149 | class=property>overset</code></a>’ attribute on the first region in |
stearns@5445 | 2150 | the region chain associated with the flow will return ‘<code |
stearns@5445 | 2151 | class=property>fit</code>’. |
stearns@5445 | 2152 | |
stearns@5445 | 2153 | <p>The <dfn id=dom-region-flowfrom>flowFrom</dfn> attribute returns the |
stearns@5445 | 2154 | name of the <a href="#named-flow0">named flow</a> this region is |
stearns@5445 | 2155 | associated with. |
stearns@5445 | 2156 | |
stearns@5445 | 2157 | <p>The <dfn id=dom-region-getregionflowranges>getRegionFlowRanges</dfn> |
stearns@5445 | 2158 | method returns an array of <a |
stearns@5445 | 2159 | href="http://www.w3.org/TR/dom/#interface-range"> Range</a> instances |
stearns@5445 | 2160 | corresponding to fragment from the <a href="#named-flow0">named flow</a> |
stearns@5445 | 2161 | that is laid out in the region. If the region does not received any |
stearns@5445 | 2162 | fragment because it is too small to accommodate any, the method returns a |
stearns@5445 | 2163 | single <code class=idl>Range</code> where the <code>startContainer</code> |
stearns@5445 | 2164 | and <code>startOffset</code> have the same values as the |
stearns@5445 | 2165 | <code>endContainer</code> and <code>endOffset</code>. In that situation, |
stearns@5445 | 2166 | if the region is the first in the <span>region chain</span>, the |
stearns@5445 | 2167 | <code>startContainer</code> is the first <code>Node</code> in the <a |
stearns@5445 | 2168 | href="#named-flow0">named flow</a> and the <code>startOffset</code> is |
stearns@5445 | 2169 | zero. If the region is the last region in the region chain (but not the |
stearns@5445 | 2170 | first and only one), the <code>startContainer</code> and |
stearns@5445 | 2171 | <code>startOffset</code> are the same values as the |
stearns@5445 | 2172 | <code>endContainer</code> and <code>endOffset</code> on the previous |
stearns@5445 | 2173 | region in the <span>region chain</span>. The method returns null if the |
stearns@5445 | 2174 | <span>region</span> object is not (or no longer) a region. |
stearns@5445 | 2175 | |
stearns@5445 | 2176 | <div class=note> |
stearns@5445 | 2177 | <p>A <code class=idl>Region</code> instance may represent and object that |
stearns@5445 | 2178 | is no longer a <span>region</span>. This may happen, for example if the |
stearns@5445 | 2179 | ‘<a href="#flow-from"><code |
stearns@5445 | 2180 | class=property>flow-from</code></a>’ property on the corresponding |
stearns@5445 | 2181 | pseudo-element, element or other construct becomes ‘<code |
stearns@5445 | 2182 | class=property>none</code>’ but a script is still holding a |
stearns@5445 | 2183 | reference to the <code class=idl>Region</code> object.</p> |
stearns@5445 | 2184 | </div> |
stearns@5445 | 2185 | |
stearns@5445 | 2186 | <p>If a <code class=idl>Region</code> instance is no longer a |
stearns@5445 | 2187 | <span>region</span>, accessing its attributes (<a |
stearns@5445 | 2188 | href="#dom-region-regionoverset"><code class=idl>regionOverset</code></a> |
stearns@5445 | 2189 | and <a href="#dom-region-flowfrom"><code class=idl>flowFrom</code></a>) or |
stearns@5445 | 2190 | invoking its <a href="#dom-region-getregionflowranges"><code |
stearns@5445 | 2191 | class=idl><span |
stearns@5445 | 2192 | title="#document-element-getregionflowranges">getRegionFlowRanges</span></code></a> |
stearns@5445 | 2193 | method throws a <a |
stearns@5445 | 2194 | href="http://www.w3.org/TR/dom/#interface-domexception"><code |
stearns@5445 | 2195 | class=idl>DOMException</code></a> with the <a |
stearns@5445 | 2196 | href="http://www.w3.org/TR/dom/#dom-domexception-invalid_access_err"><code |
stearns@5445 | 2197 | class=idl>INVALID_ACCESS_ERR</code></a> error code. |
stearns@5445 | 2198 | |
stearns@5445 | 2199 | <h3 id=region-flow-layout-events><span class=secno>6.3. </span>Region flow |
stearns@5445 | 2200 | layout events</h3> |
stearns@5445 | 2201 | |
stearns@5445 | 2202 | <p><a href="#dom-named-flow"><code class=idl>NamedFlow</code></a> objects |
stearns@5445 | 2203 | are <a href="">Event Targets</a> which dispatch <code |
stearns@5445 | 2204 | class=idl>regionLayoutUpdate</code> events when there is a possible layout |
stearns@5445 | 2205 | change of their <a href="#named-flow0">named flow</a> fragment. Note that |
stearns@5445 | 2206 | the event is asynchronous. |
stearns@5445 | 2207 | |
stearns@5445 | 2208 | <table border=0 cellpadding=2 cellspacing=0 class=event-desc |
stearns@5445 | 2209 | summary="This table contains information about the semantics of the given event type"> |
stearns@5445 | 2210 | <tbody> |
stearns@5445 | 2211 | <tr class="assert must"> |
stearns@5445 | 2212 | <th>Type |
stearns@5445 | 2213 | |
stearns@5445 | 2214 | <td class=eventname><strong><code>regionLayoutUpdate</code></strong> |
stearns@5445 | 2215 | |
stearns@5445 | 2216 | <tr class="assert must"> |
stearns@5445 | 2217 | <th>Interface |
stearns@5445 | 2218 | |
stearns@5445 | 2219 | <td><code><a |
stearns@5445 | 2220 | href="http://www.w3.org/TR/DOM-Level-3-Events/#webidl-events-UIEvent">UIEvent</a></code> |
stearns@5445 | 2221 | (see <a href="#DOM-LEVEL-3-EVENTS" |
stearns@5445 | 2222 | rel=biblioentry>[DOM-LEVEL-3-EVENTS]<!--{{!DOM-LEVEL-3-EVENTS}}--></a>) |
stearns@5445 | 2223 | |
stearns@5445 | 2224 | <tr class="assert must"> |
stearns@5445 | 2225 | <th>Sync / Async |
stearns@5445 | 2226 | |
stearns@5445 | 2227 | <td>Async |
stearns@5445 | 2228 | |
stearns@5445 | 2229 | <tr class="assert must"> |
stearns@5445 | 2230 | <th>Bubbles |
stearns@5445 | 2231 | |
stearns@5445 | 2232 | <td>Yes |
stearns@5445 | 2233 | |
stearns@5445 | 2234 | <tr class="assert must"> |
stearns@5445 | 2235 | <th>Target |
stearns@5445 | 2236 | |
stearns@5445 | 2237 | <td><a href="#dom-named-flow"><code class=idl>NamedFlow</code></a> |
stearns@5445 | 2238 | |
stearns@5445 | 2239 | <tr class="assert must"> |
stearns@5445 | 2240 | <th>Cancelable |
stearns@5445 | 2241 | |
stearns@5445 | 2242 | <td>Yes |
stearns@5445 | 2243 | |
stearns@5445 | 2244 | <tr class="assert must"> |
stearns@5445 | 2245 | <th>Default action |
stearns@5445 | 2246 | |
stearns@5445 | 2247 | <td>none |
stearns@5445 | 2248 | |
stearns@5445 | 2249 | <tr class="assert must"> |
stearns@5445 | 2250 | <th>Context info |
stearns@5445 | 2251 | |
stearns@5445 | 2252 | <td> |
stearns@5445 | 2253 | <ul> |
stearns@5445 | 2254 | <li><code class=attribute-name>Event.target</code>: <a |
stearns@5445 | 2255 | href="#dom-named-flow"><code class=idl>NamedFlow</code></a> whose |
stearns@5445 | 2256 | layout may have changed |
stearns@5445 | 2257 | </ul> |
stearns@5445 | 2258 | </table> |
stearns@5445 | 2259 | |
stearns@5445 | 2260 | <h3 id=cssomview-and-regions><span class=secno>6.4. </span>CSS OM View and |
stearns@5445 | 2261 | CSS Regions</h3> |
stearns@5445 | 2262 | |
stearns@5445 | 2263 | <h4 id=cssomview-getclientrects-and-getboundingclientrect><span |
stearns@5445 | 2264 | class=secno>6.4.1. </span><code class=idl>getClientRects()</code> and |
stearns@5445 | 2265 | <code>getBoundingClientRects()</code></h4> |
stearns@5445 | 2266 | |
stearns@5445 | 2267 | <p>The <a href="http://www.w3.org/TR/cssom-view/">CSSOM View Module</a> |
stearns@5445 | 2268 | defines how user agents compute the bounding client rectangle for an |
stearns@5445 | 2269 | element (<code class=idl>getBoundingClientRect()</code>) and its generated |
stearns@5445 | 2270 | boxes (<code class=idl>getClientRects()</code>). |
stearns@5445 | 2271 | |
stearns@5445 | 2272 | <p>This definition applies to CSS regions and the multiple boxes generated |
stearns@5445 | 2273 | for an element flowing through multiple regions. The <code |
stearns@5445 | 2274 | class=idl>getClientRects()</code> method returns the list of boxes |
stearns@5445 | 2275 | generated for each of the element fragment laid out different regions. The |
stearns@5445 | 2276 | <code>getBoundingClientRect()</code> method operates as specified in the |
stearns@5445 | 2277 | <a href="http://www.w3.org/TR/cssom-view/">CSSOM View Module</a> as well |
stearns@5445 | 2278 | and is computed from the set of rectangles returned by <code |
stearns@5445 | 2279 | class=idl>getClientRects()</code>. |
stearns@5445 | 2280 | |
stearns@5445 | 2281 | <h4 id=cssomview-offset-attributes><span class=secno>6.4.2. </span><code |
stearns@5445 | 2282 | class=idl>offsetTop</code>, <code class=idl>offsetLeft</code>, <code |
stearns@5445 | 2283 | class=idl>offsetWidth</code> and <code class=idl>offsetWidth</code></h4> |
stearns@5445 | 2284 | |
stearns@5445 | 2285 | <p>The computation of the <a |
stearns@5445 | 2286 | href="http://dev.w3.org/csswg/cssom-view/#offset-attributes">offset |
stearns@5445 | 2287 | attributes</a> for elements laid out in a <span>named flow follow the <a |
stearns@5445 | 2288 | href="http://dev.w3.org/csswg/cssom-view/#offset-attribute">specification</a>. |
stearns@5445 | 2289 | For the purpose of the algorithm, the <em>first CSS layout box</em> |
stearns@5445 | 2290 | associated with an element laid out in a <a href="#named-flow0">named |
stearns@5445 | 2291 | flow</a> is the box generated for the first region the element is laid out |
stearns@5445 | 2292 | into.</span> |
stearns@5445 | 2293 | |
stearns@5445 | 2294 | <h2 id=regions-visual-formatting-details><span class=secno>7. |
stearns@5445 | 2295 | </span>Regions visual formatting details</h2> |
stearns@5445 | 2296 | |
stearns@5445 | 2297 | <p>Regions are laid out by CSS and take part in the normal box model and |
stearns@5445 | 2298 | other layout models offered by CSS modules such as flexible boxes (<a |
stearns@5445 | 2299 | href="#CSS3-FLEXBOX" |
stearns@5445 | 2300 | rel=biblioentry>[CSS3-FLEXBOX]<!--{{CSS3-FLEXBOX}}--></a>). However, |
stearns@5445 | 2301 | <span>regions</span> lay out a fragment of their <a |
stearns@5445 | 2302 | href="#named-flow0">named flow</a> instead of laying out descendant |
stearns@5445 | 2303 | content as happens with other boxes. |
stearns@5445 | 2304 | |
stearns@5445 | 2305 | <p>This section describes the model for laying out <span>regions</span> and |
stearns@5445 | 2306 | for laying out <a href="#named-flow0">named flow</a> content into regions. |
stearns@5445 | 2307 | The descriptions in this section are biased towards a horizontal writing |
stearns@5445 | 2308 | mode, using <span>width</span> for logical width (or measure) and |
stearns@5445 | 2309 | <span>height</span> for logical height (or extent) as <a |
stearns@5445 | 2310 | href="http://www.w3.org/TR/css3-writing-modes/#abstract-dimensions">defined</a> |
stearns@5445 | 2311 | in the CSS Writing Modes Module <a href="#CSS3-WRITING-MODES" |
stearns@5445 | 2312 | rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>). |
stearns@5445 | 2313 | To use this model in a vertical writing mode apply the principles <a |
stearns@5445 | 2314 | href="http://www.w3.org/TR/css3-writing-modes/#vertical-layout">described</a> |
stearns@5445 | 2315 | in that specification. |
stearns@5445 | 2316 | |
stearns@5445 | 2317 | <h3 id=regions-flow-content-box><span class=secno>7.1. </span>The Region |
stearns@5445 | 2318 | Flow Content Box (RFBC)</h3> |
stearns@5445 | 2319 | |
stearns@5445 | 2320 | <p>A region box lays out the following boxes: |
stearns@5445 | 2321 | |
stearns@5445 | 2322 | <ul> |
stearns@5445 | 2323 | <li>The boxes generated by its <code class=css>::before</code> and <code |
stearns@5445 | 2324 | class=css>::after</code> pseudo-elements, if any. |
stearns@5445 | 2325 | |
stearns@5445 | 2326 | <li>The anonymous <def>region flow content box (called <def>RFCB</def> in |
stearns@5445 | 2327 | this document) which contains the fragment of the <a |
stearns@5445 | 2328 | href="#named-flow0">named flow</a> that the region receives.</def> |
stearns@5445 | 2329 | </ul> |
stearns@5445 | 2330 | |
stearns@5445 | 2331 | <div class=figure> <img src="images/RFCB.svg" width=600px> |
stearns@5445 | 2332 | <p class=caption>The Region Flow Content Box (RFCB)</p> |
stearns@5445 | 2333 | </div> |
stearns@5445 | 2334 | |
stearns@5445 | 2335 | <p>Laying out a <span>region</span> box follows the same processing rules |
stearns@5445 | 2336 | as for any other <a |
stearns@5445 | 2337 | href="http://www.w3.org/TR/CSS2/visuren.html#block-boxes">block container |
stearns@5445 | 2338 | box</a>. |
stearns@5445 | 2339 | |
stearns@5445 | 2340 | <p>The <span>RFCB</span> is a <a |
stearns@5445 | 2341 | href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes">block container |
stearns@5445 | 2342 | box</a> with a <a href="">computed</a> ‘<code |
stearns@5445 | 2343 | class=property>width</code>’ of ‘<code |
stearns@5445 | 2344 | class=property>auto</code>’ and a whose <a href="">used</a> |
stearns@5445 | 2345 | ‘<code class=property>height</code>’ is resolved as detailed |
stearns@5445 | 2346 | below. |
stearns@5445 | 2347 | |
stearns@5445 | 2348 | <h4 id=rfbc-width-resolution><span class=secno>7.1.1. </span>RFCB |
stearns@5445 | 2349 | ‘<code class=property>width</code>’ resolution</h4> |
stearns@5445 | 2350 | |
stearns@5445 | 2351 | <p>At various points in the visual formatting of documents containing |
stearns@5445 | 2352 | regions, the used ‘<code class=property>width</code>’ of RFCBs |
stearns@5445 | 2353 | and regions need to be resolved. In all cases, the resolution is done |
stearns@5445 | 2354 | following the rules for <a |
stearns@5445 | 2355 | href="http://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins">calculating |
stearns@5445 | 2356 | widths and margins</a> (see <a href="#CSS21" |
stearns@5445 | 2357 | rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>). Sometimes, resolving the |
stearns@5445 | 2358 | used ‘<code class=property>width</code>’ value requires |
stearns@5445 | 2359 | measuring the content's <code class=css>min-content</code> and <code |
stearns@5445 | 2360 | class=css>max-content</code> values (as <a |
stearns@5445 | 2361 | href="http://www.w3.org/TR/css3-writing-modes/#intrinsic-sizing">defined</a> |
stearns@5445 | 2362 | in the CSS Writing Modes Module <a href="#CSS3-WRITING-MODES" |
stearns@5445 | 2363 | rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>). |
stearns@5445 | 2364 | For an RFCB, <strong>these measures are made on the <em>entire</em> |
stearns@5445 | 2365 | associated <a href="#named-flow0">named flow</a> content</strong>. |
stearns@5445 | 2366 | |
stearns@5445 | 2367 | <p>As a consequence, all <span>RFCBs</span> of <span>regions</span> |
stearns@5445 | 2368 | associated with a given <a href="#named-flow0">named flow</a> share the |
stearns@5445 | 2369 | same <code class=css>min-content</code> and <code |
stearns@5445 | 2370 | class=css>max-content</code> measures. |
stearns@5445 | 2371 | |
stearns@5445 | 2372 | <p>This approach is consistent with the <a |
stearns@5445 | 2373 | href="http://www.w3.org/TR/css3-break/#varying-size-boxes">box model for |
stearns@5445 | 2374 | breaking</a> (<a href="#CSS3-BREAK" |
stearns@5445 | 2375 | rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a>). |
stearns@5445 | 2376 | |
stearns@5445 | 2377 | <h3 id=regions-visual-formatting-steps><span class=secno>7.2. |
stearns@5445 | 2378 | </span>Regions visual formatting steps</h3> |
stearns@5445 | 2379 | |
stearns@5445 | 2380 | <p>Formatting documents that contain <a href="#named-flow0">named flows</a> |
stearns@5445 | 2381 | laid out in regions is a three-step process: |
stearns@5445 | 2382 | |
stearns@5445 | 2383 | <ul> |
stearns@5445 | 2384 | <li><em>Step 1: RFCB <def>flow fragment height</def> resolution</em>. In |
stearns@5445 | 2385 | this step, the heights of fragments fitting in the regions' RFCBs are |
stearns@5445 | 2386 | resolved. |
stearns@5445 | 2387 | |
stearns@5445 | 2388 | <li><em>Step 2: document and regions layout</em>. In this step, the |
stearns@5445 | 2389 | document content and regions are laid out. However, <a |
stearns@5445 | 2390 | href="#named-flow0">named flow</a> content is not laid out in regions |
stearns@5445 | 2391 | yet. |
stearns@5445 | 2392 | |
stearns@5445 | 2393 | <li><em>Step 3: <a href="#named-flow0">named flow</a> layout</em>. In this |
stearns@5445 | 2394 | step, the content of <a href="#named-flow0">named flows</a> is laid out |
stearns@5445 | 2395 | in their respective <span>region chains</span>. |
stearns@5445 | 2396 | </ul> |
stearns@5445 | 2397 | |
stearns@5445 | 2398 | <div class=figure> <img src="images/regions-layout-three-steps.svg" |
stearns@5445 | 2399 | width=600px> |
stearns@5445 | 2400 | <p class=caption>Regions visual formatting steps</p> |
stearns@5445 | 2401 | </div> |
stearns@5445 | 2402 | |
stearns@5445 | 2403 | <h4 id=rfcb-flow-fragment-height-resolution><span class=secno>7.2.1. |
stearns@5445 | 2404 | </span>Step 1: RFCB flow fragment height resolution</h4> |
stearns@5445 | 2405 | |
stearns@5445 | 2406 | <p>Conceptually, resolving the flow fragment height is a two phase process. |
stearns@5445 | 2407 | |
stearns@5445 | 2408 | <h5 id=rfcb-flow-fragment-height-resolution-phase-1><span |
stearns@5445 | 2409 | class=secno>7.2.1.1. </span>RFCB flow fragment height resolution, Phase 1</h5> |
stearns@5445 | 2410 | |
stearns@5445 | 2411 | <p>The document is laid out with a <a |
stearns@5445 | 2412 | href="http://www.w3.org/TR/CSS2/cascade.html#used-value">used</a> height |
stearns@5445 | 2413 | of zero for all <span>RFCB</span>s. In this phase, the content of <a |
stearns@5445 | 2414 | href="#named-flow0">named flows</a> is not laid out in |
stearns@5445 | 2415 | <span>regions</span>. This phase yields resolved position and sizes for |
stearns@5445 | 2416 | all regions and their RFCBs in the document. |
stearns@5445 | 2417 | |
stearns@5445 | 2418 | <h5 id=rfcb-flow-fragment-height-resolution-phase-2><span |
stearns@5445 | 2419 | class=secno>7.2.1.2. </span>RFCB flow fragment height resolution, Phase 2</h5> |
stearns@5445 | 2420 | |
stearns@5445 | 2421 | <p><a href="#named-flow0">Named flows</a> are laid out in |
stearns@5445 | 2422 | <span>regions</span>. The user agent resolves the <em><span>flow fragment |
stearns@5445 | 2423 | height</span></em> for the <span>RFCB</span>s using the remainder of the |
stearns@5445 | 2424 | flow and accounting for <a |
stearns@5445 | 2425 | href="http://www.w3.org/TR/css3-break/">fragmentation rules</a>. This |
stearns@5445 | 2426 | process accounts for constraints such as the ‘<code |
stearns@5445 | 2427 | class=property>height</code>’ or ‘<code |
stearns@5445 | 2428 | class=property>max-height</code>’ values, as described in the CSS |
stearns@5445 | 2429 | 2.1 section on <a |
stearns@5445 | 2430 | href="http://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins">calculating |
stearns@5445 | 2431 | heights and margins</a> (see the <a |
stearns@5445 | 2432 | href="http://www.w3.org/TR/CSS2/visudet.html#normal-block">Block-level |
stearns@5445 | 2433 | non-replaced elements in normal flow when ‘<code |
stearns@5445 | 2434 | class=property>overflow</code>’ computes to ‘<code |
stearns@5445 | 2435 | class=property>visible</code>’</a> section and the <a |
stearns@5445 | 2436 | href="http://www.w3.org/TR/CSS2/visudet.html#block-root-margin">complicated |
stearns@5445 | 2437 | cases</a> section). During this phase, generated content is laid out |
stearns@5445 | 2438 | according to the <a href="#processing-model">rules</a> described earlier |
stearns@5445 | 2439 | in this document. |
stearns@5445 | 2440 | |
stearns@5445 | 2441 | <h4 id=regions-boxes-layout><span class=secno>7.2.2. </span>Step 2: regions |
stearns@5445 | 2442 | boxes layout</h4> |
stearns@5445 | 2443 | |
stearns@5445 | 2444 | <p>In this step, the document is laid out according to the normal CSS |
stearns@5445 | 2445 | layout rules. |
stearns@5445 | 2446 | |
stearns@5445 | 2447 | <p>If a measure of the content is required to resolve the used ‘<code |
stearns@5445 | 2448 | class=property>width</code>’ of the region box, the value is |
stearns@5445 | 2449 | resolved as described in the <a href="#rfbc-width-resolution">RFCB width |
stearns@5445 | 2450 | resolution</a> section. |
stearns@5445 | 2451 | |
stearns@5445 | 2452 | <p>If a measure of the content is required to resolve the used height of |
stearns@5445 | 2453 | the RFCB (for example if the region box is absolutely positioned), the |
stearns@5445 | 2454 | <span>flow fragment height</span> resolved in Step 1 is used for the |
stearns@5445 | 2455 | vertical content measure of the RFCB. |
stearns@5445 | 2456 | |
stearns@5445 | 2457 | <p>At the end of this step, regions are laid out and ready to receive |
stearns@5445 | 2458 | content from their associated <a href="#named-flow0">named flows</a>. |
stearns@5445 | 2459 | |
stearns@5445 | 2460 | <h4 id=named-flows-layout><span class=secno>7.2.3. </span>Step 3: named |
stearns@5445 | 2461 | flows layout</h4> |
stearns@5445 | 2462 | |
stearns@5445 | 2463 | <p>In this final step, the content of <a href="#named-flow0">named |
stearns@5445 | 2464 | flows</a> is laid out in the <span>regions</span>‘<code class=css> |
stearns@5445 | 2465 | RFCBs along with the generated content boxes.</code> |
stearns@5445 | 2466 | |
stearns@5445 | 2467 | <p>The used ’width' for RFCBs is resolved <a |
stearns@5445 | 2468 | href="#rfbc-width-resolution">as described before</a>. |
stearns@5445 | 2469 | |
stearns@5445 | 2470 | <p>The used ‘<code class=property>height</code>’ of RFCBs is |
stearns@5445 | 2471 | resolved such that none of the boxes in the region box's normal flow |
stearns@5445 | 2472 | overflow the region's box. In other words, the RFCB boxes are stretched |
stearns@5445 | 2473 | vertically to accommodate as much of the flow as possible without |
stearns@5445 | 2474 | overflowing the region box and accounting for <a |
stearns@5445 | 2475 | href="http://www.w3.org/TR/css3-break/">fragmentation rules</a> and |
stearns@5445 | 2476 | generated content boxes. |
stearns@5445 | 2477 | |
stearns@5445 | 2478 | <p>During this phase, generated content is laid out according to the <a |
stearns@5445 | 2479 | href="#processing-model">rules</a> described earlier in this document. |
stearns@5445 | 2480 | |
stearns@5445 | 2481 | <div class=note> |
stearns@5445 | 2482 | <p>The model for resolving auto sized regions will cause, under certain |
stearns@5445 | 2483 | circumstances, the flow content to be overset or underset. In other |
stearns@5445 | 2484 | words, it will not fit tightly. The model prevents having circular |
stearns@5445 | 2485 | dependencies in the layout model. Implementations may decide to apply |
stearns@5445 | 2486 | further layout steps to ensure that the whole flow content is displayed |
stearns@5445 | 2487 | to the user, even in edge cases.</p> |
stearns@5445 | 2488 | </div> |
stearns@5445 | 2489 | |
stearns@5445 | 2490 | <h3 id=regions-visual-formatting-implementation-note><span class=secno>7.3. |
stearns@5445 | 2491 | </span>Regions visual formatting: implementation note</h3> |
stearns@5445 | 2492 | |
stearns@5445 | 2493 | <p>The process for resolving an RFCB's ‘<code |
stearns@5445 | 2494 | class=property>height</code>’ and the three-step process used to lay |
stearns@5445 | 2495 | out documents containing regions and <a href="#named-flow0">named |
stearns@5445 | 2496 | flows</a> are <em>conceptual</em> descriptions of what the layout should |
stearns@5445 | 2497 | yield and implementations should optimize to reduce the number of steps |
stearns@5445 | 2498 | and phases necessary wherever possible. |
stearns@5445 | 2499 | |
stearns@5445 | 2500 | <h3 id=regions-visual-formatting-examples><span class=secno>7.4. |
stearns@5445 | 2501 | </span>Regions visual formatting example</h3> |
stearns@5445 | 2502 | |
stearns@5445 | 2503 | <p>This section is non-normative. |
stearns@5445 | 2504 | |
stearns@5445 | 2505 | <p>This example considers a document where content flows between three |
stearns@5445 | 2506 | regions, and region boxes are intermixed with the normal document content. |
stearns@5445 | 2507 | |
stearns@5445 | 2508 | <div class=example> |
stearns@5445 | 2509 | <pre> |
stearns@5445 | 2510 | <style> |
stearns@5445 | 2511 | #article { |
stearns@5445 | 2512 | flow-into: article; |
stearns@5445 | 2513 | } |
stearns@5445 | 2514 | |
stearns@5445 | 2515 | #rA, #rB, #rC { |
stearns@5445 | 2516 | flow-from: article; |
stearns@5445 | 2517 | height: auto; |
stearns@5445 | 2518 | margin: 1em 1em 0em 1em; |
stearns@5445 | 2519 | padding: 1em; |
stearns@5445 | 2520 | border: 3px solid #46A4E9; |
stearns@5445 | 2521 | } |
stearns@5445 | 2522 | |
stearns@5445 | 2523 | #rA { |
stearns@5445 | 2524 | width: auto; |
stearns@5445 | 2525 | height: auto; |
stearns@5445 | 2526 | } |
stearns@5445 | 2527 | |
stearns@5445 | 2528 | #rB { |
stearns@5445 | 2529 | float: left; |
stearns@5445 | 2530 | width: 15em; |
stearns@5445 | 2531 | height: auto; |
stearns@5445 | 2532 | max-height: 150px; |
stearns@5445 | 2533 | } |
stearns@5445 | 2534 | |
stearns@5445 | 2535 | #rC { |
stearns@5445 | 2536 | float: right; |
stearns@5445 | 2537 | width: 12em; |
stearns@5445 | 2538 | height: auto; |
stearns@5445 | 2539 | } |
stearns@5445 | 2540 | |
stearns@5445 | 2541 | #main-flow { |
stearns@5445 | 2542 | padding: 0em 1em 0em 1em; |
stearns@5445 | 2543 | } |
stearns@5445 | 2544 | |
stearns@5445 | 2545 | </style> |
stearns@5445 | 2546 | <body> |
stearns@5445 | 2547 | <div id="article"> |
stearns@5445 | 2548 | <p style="region-break-after:always;">I am not a ... </p> |
stearns@5445 | 2549 | <p>...</p> |
stearns@5445 | 2550 | </div> |
stearns@5445 | 2551 | <div id="rA"></div> |
stearns@5445 | 2552 | <div id="rB"></div> |
stearns@5445 | 2553 | <div id="rC"></div> |
stearns@5445 | 2554 | |
stearns@5445 | 2555 | <div id="main-flow"> |
stearns@5445 | 2556 | <p>Lorem ipsum dolor ...</p> |
stearns@5445 | 2557 | </div> |
stearns@5445 | 2558 | </body> |
stearns@5445 | 2559 | </pre> |
stearns@5445 | 2560 | </div> |
stearns@5445 | 2561 | |
stearns@5445 | 2562 | <p>The following sections and figures illustrate the intermediate results |
stearns@5445 | 2563 | for the visual formatting process. In the following, we call RFCB-A, |
stearns@5445 | 2564 | RFCB-B and RFCB-C the <span>RFCBs</span> for regions rA, rB and rC |
stearns@5445 | 2565 | respectively. |
stearns@5445 | 2566 | |
stearns@5445 | 2567 | <h4 id=step-1--phase-1-laying-out-rfcbs-with-us><span class=secno>7.4.1. |
stearns@5445 | 2568 | </span>Step 1 - Phase 1: Laying out RFCBs with used height of zero</h4> |
stearns@5445 | 2569 | |
stearns@5445 | 2570 | <p>Applying the rules for Step 1, Phase 1, the computed ‘<code |
stearns@5445 | 2571 | class=property>auto</code>’ ‘<code |
stearns@5445 | 2572 | class=property>width</code>’ values for the RFCBs are resolved to |
stearns@5445 | 2573 | used values according to the normal <a |
stearns@5445 | 2574 | href="http://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins">CSS |
stearns@5445 | 2575 | layout rules</a> meaning they stretch to the width of their containing |
stearns@5445 | 2576 | block's content box. |
stearns@5445 | 2577 | |
stearns@5445 | 2578 | <ol> |
stearns@5445 | 2579 | <li>RFCB-A: stretches to fit the rA content box. |
stearns@5445 | 2580 | </ol> |
stearns@5445 | 2581 | |
stearns@5445 | 2582 | <p> Since rA also has an ‘<code class=property>auto</code>’ |
stearns@5445 | 2583 | ‘<code class=property>width</code>’, its own used ‘<code |
stearns@5445 | 2584 | class=property>width</code>’ is stretched to fit the |
stearns@5445 | 2585 | <code><body></code> content box. |
stearns@5445 | 2586 | |
stearns@5445 | 2587 | <ul> |
stearns@5445 | 2588 | <li>RFCB-B: stretches to fit the <code>rB</code> content box. |
stearns@5445 | 2589 | |
stearns@5445 | 2590 | <li>RFCB-C: stretches to fit the <code>rC</code> content box. |
stearns@5445 | 2591 | </ul> |
stearns@5445 | 2592 | |
stearns@5445 | 2593 | <p>Also applying the rules for Step 1, Phase 1, the used values for the |
stearns@5445 | 2594 | RFCBs ‘<code class=property>height</code>’ properties are all |
stearns@5445 | 2595 | zero. |
stearns@5445 | 2596 | |
stearns@5445 | 2597 | <p>Conceptually, this produces the layout illustrated below. |
stearns@5445 | 2598 | |
stearns@5445 | 2599 | <div class=figure> <img |
stearns@5445 | 2600 | alt="Step 1 - Phase 1: Layout RFBCs with used heights of 0" |
stearns@5445 | 2601 | src="images/flow-fragment-height-phase-1.png" width=500px> |
stearns@5445 | 2602 | <p class=caption>Step 1 - Phase 1: Layout RFBCs with used heights of 0</p> |
stearns@5445 | 2603 | </div> |
stearns@5445 | 2604 | |
stearns@5445 | 2605 | <h4 id=step-1--phase-2-layout-flow-to-compute-t><span class=secno>7.4.2. |
stearns@5445 | 2606 | </span>Step 1 - Phase 2: Layout flow to compute the RFCBs' flow fragments |
stearns@5445 | 2607 | heights</h4> |
stearns@5445 | 2608 | |
stearns@5445 | 2609 | <p>In this second phase of Step 1, the named flow is laid out in |
stearns@5445 | 2610 | <span>regions</span> and the height of each fragment falling in each RFCB |
stearns@5445 | 2611 | is computed. |
stearns@5445 | 2612 | |
stearns@5445 | 2613 | <p>The user agent lays out as much of the flow into an area with RFCB-A's |
stearns@5445 | 2614 | used ‘<code class=property>width</code>’. rA's ‘<code |
stearns@5445 | 2615 | class=property>height</code>’ computes to ‘<code |
stearns@5445 | 2616 | class=property>auto</code>’ and there is no vertical maximum height |
stearns@5445 | 2617 | for RFCA's ‘<code class=property>height</code>’. However, |
stearns@5445 | 2618 | because there is a break after the first paragraph in the ‘<code |
stearns@5445 | 2619 | class=property>article</code>’ <a href="#named-flow0"><code>named |
stearns@5445 | 2620 | flow</code></a>, only this first paragraph is laid out in RFCB-A and FH-A |
stearns@5445 | 2621 | (the flow fragment height for RFCB-A) is resolved by laying out this first |
stearns@5445 | 2622 | paragraph in the used ‘<code class=property>width</code>’. |
stearns@5445 | 2623 | |
stearns@5445 | 2624 | <p>At this point, the user agent lays out as much of the remaining flow as |
stearns@5445 | 2625 | possible in RFCB-B. Because rB's ‘<code |
stearns@5445 | 2626 | class=property>max-height</code>’ computed value is ‘<code |
stearns@5445 | 2627 | class=css>150px</code>’, the user agent only lays out the |
stearns@5445 | 2628 | ‘<code class=property>article</code>’ named flow using |
stearns@5445 | 2629 | RFCB-B's used ‘<code class=property>width</code>’ until the |
stearns@5445 | 2630 | point where laying out additional content would cause RFCB-B to overflow |
stearns@5445 | 2631 | rB's box. The fragment height for RFCB-B is resolved: FH-B (<code |
stearns@5445 | 2632 | class=css>150px</code>). |
stearns@5445 | 2633 | |
stearns@5445 | 2634 | <p>Finally, the user agent lays out the remainder of the flow in RFCB-C. |
stearns@5445 | 2635 | Because rC has no other constraints and no region breaks, the remaining |
stearns@5445 | 2636 | content is laid out in RFCB-C's used ‘<code |
stearns@5445 | 2637 | class=property>width</code>’. This results in a resolved flow |
stearns@5445 | 2638 | fragment height: FH-C. |
stearns@5445 | 2639 | |
stearns@5445 | 2640 | <div class=figure> <img |
stearns@5445 | 2641 | alt="Step 1 - Phase 2: Measure flow fragments heights" |
stearns@5445 | 2642 | src="images/flow-fragment-height-phase-2.png" width=370px> |
stearns@5445 | 2643 | <p class=caption>Step 1 - Phase 2: Measure flow fragments heights</p> |
stearns@5445 | 2644 | </div> |
stearns@5445 | 2645 | |
stearns@5445 | 2646 | <h4 id=step-2-layout-document-and-regions-witho><span class=secno>7.4.3. |
stearns@5445 | 2647 | </span>Step 2: Layout document and regions without named flows</h4> |
stearns@5445 | 2648 | |
stearns@5445 | 2649 | <p>The used ‘<code class=property>width</code>’ of RFCB-A, |
stearns@5445 | 2650 | RFCB-B and RFCB-C are resolved as in the previous step. However, the |
stearns@5445 | 2651 | ‘<code class=property>height</code>’ is resolved differently. |
stearns@5445 | 2652 | |
stearns@5445 | 2653 | <p>Resolving the ‘<code class=property>height</code>’ of rA <a |
stearns@5445 | 2654 | href="http://www.w3.org/TR/CSS2/visudet.html#normal-block">requires a |
stearns@5445 | 2655 | content measure</a> which is FH-A (the flow fragment height for RFCB-A). |
stearns@5445 | 2656 | |
stearns@5445 | 2657 | <p>The ‘<code class=property>height</code>’ of rB results from |
stearns@5445 | 2658 | first computing its <a |
stearns@5445 | 2659 | href="http://www.w3.org/TR/CSS2/visudet.html#block-root-margin">content |
stearns@5445 | 2660 | measure</a> and then applying the <a |
stearns@5445 | 2661 | href="http://www.w3.org/TR/CSS2/visudet.html#min-max-heights">rules for |
stearns@5445 | 2662 | ‘<code class=property>max-height</code>’</a>. Here, the |
stearns@5445 | 2663 | vertical content measure evaluates to FH-B. After applying the rules for |
stearns@5445 | 2664 | ‘<code class=property>max-height</code>’ and accounting for |
stearns@5445 | 2665 | margins, padding and borders, the used ‘<code |
stearns@5445 | 2666 | class=property>height</code>’ of rB is resolved to LH-B (<code |
stearns@5445 | 2667 | class=css>150px</code>).. |
stearns@5445 | 2668 | |
stearns@5445 | 2669 | <p>The ‘<code class=property>height</code>’ of rC's box results |
stearns@5445 | 2670 | from <a |
stearns@5445 | 2671 | href="http://www.w3.org/TR/CSS2/visudet.html#block-root-margin">calculating |
stearns@5445 | 2672 | its content measure</a>: FH-C becomes rC's used ‘<code |
stearns@5445 | 2673 | class=property>height</code>’. |
stearns@5445 | 2674 | |
stearns@5445 | 2675 | <div class=figure> <img |
stearns@5445 | 2676 | alt="Step 2: Layout document and regions without named flows" |
stearns@5445 | 2677 | src="images/regions-visual-formatting-step-2.png" width=370px> |
stearns@5445 | 2678 | <p class=caption>Step 2: Layout document and regions without <a |
stearns@5445 | 2679 | href="#named-flow0">named flows</a></p> |
stearns@5445 | 2680 | </div> |
stearns@5445 | 2681 | |
stearns@5445 | 2682 | <h4 id=step-3-named-flows-layout><span class=secno>7.4.4. </span>Step 3: |
stearns@5445 | 2683 | named flows layout</h4> |
stearns@5445 | 2684 | |
stearns@5445 | 2685 | <p>In this final step, the <code class=css>article</code> <a |
stearns@5445 | 2686 | href="#named-flow0">named flow</a> is laid out in its <span>region |
stearns@5445 | 2687 | chain</span>. The used ‘<code class=property>width</code>’ for |
stearns@5445 | 2688 | each of the RFCB is resolved as in step 1 above. |
stearns@5445 | 2689 | |
stearns@5445 | 2690 | <p>The used ‘<code class=property>height</code>’ for the RFCB |
stearns@5445 | 2691 | is a result of laying out the as much of the content in the |
stearns@5445 | 2692 | <span>region</span> without overflowing its content box and following the |
stearns@5445 | 2693 | <a href="http://www.w3.org/TR/css3-break/">fragmentation rules</a>. |
stearns@5445 | 2694 | |
stearns@5445 | 2695 | <p>Because the computed ‘<code class=property>width</code>’ of |
stearns@5445 | 2696 | the RFCB has not changed and the fragmentation rules applied are the same |
stearns@5445 | 2697 | as in Phase 1, Step 2, the used ‘<code |
stearns@5445 | 2698 | class=property>height</code>’ for RFCB-A, RFCB-B and RFCB-C are |
stearns@5445 | 2699 | LH-A, LH-B and LH-C, respectively. |
stearns@5445 | 2700 | |
stearns@5445 | 2701 | <p>There may be situations where the used ‘<code |
stearns@5445 | 2702 | class=property>height</code>’ of RFCBs resolved in Step 3 are |
stearns@5445 | 2703 | different from the <span>flow fragment height</span> computed in Step 1 |
stearns@5445 | 2704 | Phase 2. |
stearns@5445 | 2705 | |
stearns@5445 | 2706 | <div class=figure> <img |
stearns@5445 | 2707 | alt="Step 3: Final result after laying out named flows in regions" |
stearns@5445 | 2708 | src="images/regions-visual-formatting-step-3.png" width=370px> |
stearns@5445 | 2709 | <p class=caption>Step 3: Final result after laying out named flows in |
stearns@5445 | 2710 | regions</p> |
stearns@5445 | 2711 | </div> |
stearns@5445 | 2712 | |
stearns@5445 | 2713 | <h2 id=relation-to-document-events><span class=secno>8. </span>Relation to |
stearns@5445 | 2714 | document events</h2> |
stearns@5445 | 2715 | |
stearns@5445 | 2716 | <p>The CSS regions module does not alter the normal processing of events in |
stearns@5445 | 2717 | the document tree. In particular, if an event occurs on an element that is |
stearns@5445 | 2718 | part of a <a href="#named-flow0">named flow</a>, the <a |
stearns@5445 | 2719 | href="http://www.w3.org/TR/dom/#events">event's bubble and capture |
stearns@5445 | 2720 | phases</a> happen following the document tree order. |
stearns@5445 | 2721 | |
stearns@5445 | 2722 | <h2 id=relation-to-other-specifications><span class=secno>9. |
stearns@5445 | 2723 | </span>Relation to other specifications</h2> |
stearns@5445 | 2724 | |
stearns@5445 | 2725 | <p>This specification is related to other specifications as described in |
stearns@5445 | 2726 | the <a href="#references">references</a> section. In addition, it is |
stearns@5445 | 2727 | related to the following specifications: |
stearns@5445 | 2728 | |
stearns@5445 | 2729 | <ol> |
stearns@5445 | 2730 | <li>CSS Fragmentation Module Level 3 <a href="#CSS3-BREAK" |
stearns@5445 | 2731 | rel=biblioentry>[CSS3-BREAK]<!--{{CSS3-BREAK}}--></a>. This module |
stearns@5445 | 2732 | defines the rules for fragmenting content over multiple containers and |
stearns@5445 | 2733 | applies to CSS regions in addition to applying to multi-column and paged |
stearns@5445 | 2734 | media. |
stearns@5445 | 2735 | |
stearns@5445 | 2736 | <li>CSS Pagination Templates Module Level 3 <a href="#CSS3-PAGE-TEMPLATE" |
stearns@5445 | 2737 | rel=biblioentry>[CSS3-PAGE-TEMPLATE]<!--{{CSS3-PAGE-TEMPLATE}}--></a>. |
stearns@5445 | 2738 | This module defines a syntax to define layout templates which can be used |
stearns@5445 | 2739 | when paginating content. The page templates use regions. |
stearns@5445 | 2740 | |
stearns@5445 | 2741 | <li>CSS Exclusions Module <a href="#CSS3-EXCLUSIONS" |
stearns@5445 | 2742 | rel=biblioentry>[CSS3-EXCLUSIONS]<!--{{CSS3-EXCLUSIONS}}--></a>. This |
stearns@5445 | 2743 | module defines a generic way to define arbitrarily shaped exclusions into |
stearns@5445 | 2744 | which content can flow or around which content can flow. This can be seen |
stearns@5445 | 2745 | as an extension to the way CSS floats provide rectangular areas into |
stearns@5445 | 2746 | which content flows and around which content flows. In advanced layout |
stearns@5445 | 2747 | designs, it is expected that the CSS Exclusions module will be commonly |
stearns@5445 | 2748 | combined with the CSS regions module. |
stearns@5445 | 2749 | |
stearns@5445 | 2750 | <li>CSS Line Grid Module <a href="#CSS3-LINE-GRID" |
stearns@5445 | 2751 | rel=biblioentry>[CSS3-LINE-GRID]<!--{{CSS3-LINE-GRID}}--></a>. This |
stearns@5445 | 2752 | module defines a concept of line grid to align the position of lines in |
stearns@5445 | 2753 | different elements. The line grid functionality is related and needed for |
stearns@5445 | 2754 | aligning content flowing in separate regions. |
stearns@5445 | 2755 | </ol> |
stearns@5445 | 2756 | |
stearns@5445 | 2757 | <h2 id=usecases><span class=secno>10. </span>Use Cases</h2> |
stearns@5445 | 2758 | |
stearns@5445 | 2759 | <p>Use cases are described on <a |
stearns@5445 | 2760 | href="http://wiki.csswg.org/spec/css3-regions/regions-use-cases">this |
stearns@5445 | 2761 | page</a>. |
stearns@5445 | 2762 | |
stearns@5445 | 2763 | <h2 id=conformance><span class=secno>11. </span>Conformance</h2> |
stearns@5445 | 2764 | |
stearns@5445 | 2765 | <h2 id=changes><span class=secno>12. </span>Changes</h2> |
stearns@5445 | 2766 | |
stearns@5445 | 2767 | <h3 id="changes_from_June_09_2011"><span class=secno>12.1. </span>Changes |
stearns@5445 | 2768 | from <a |
stearns@5445 | 2769 | href="http://www.w3.org/TR/2011/WD-css3-regions-20111129/">November |
stearns@5445 | 2770 | 29<sup>th</sup> 2011</a> version</h3> |
stearns@5445 | 2771 | |
stearns@5445 | 2772 | <ul> |
stearns@5445 | 2773 | <li>Modified region styling examples to use element selector instead of of |
stearns@5445 | 2774 | pseudo-code selectors (this had been omitted in the previous pass at |
stearns@5445 | 2775 | removing pseudo-code from the examples). |
stearns@5445 | 2776 | |
stearns@5445 | 2777 | <li>Removed divs with class set to "issue moved", "issue stale" and "issue |
stearns@5445 | 2778 | resolved" since these divs where not displayed. |
stearns@5445 | 2779 | |
stearns@5445 | 2780 | <li>Minor updates to the alternate stylesheet. |
stearns@5445 | 2781 | |
stearns@5445 | 2782 | <li>Removed "This section is normative" paragraphs since in CSS |
stearns@5445 | 2783 | specifications, sections are normative unless otherwise specified. |
stearns@5445 | 2784 | |
stearns@5445 | 2785 | <li>Removed "This section is informative" paragraphs since in CSS |
stearns@5445 | 2786 | specifications notes are always informative. |
stearns@5445 | 2787 | |
stearns@5445 | 2788 | <li>Reworded the text about flow-into: <ident> and removed obsolete |
stearns@5445 | 2789 | text about the interaction with the ‘<code |
stearns@5445 | 2790 | class=property>content</code>’ property. |
stearns@5445 | 2791 | |
stearns@5445 | 2792 | <li>Removed "this section is non-normative" from the "Regions Concepts" |
stearns@5445 | 2793 | section. |
stearns@5445 | 2794 | |
stearns@5445 | 2795 | <li>In the section on region breaks, removed descriptions of break values |
stearns@5445 | 2796 | normatively defined in external specifications. Removed the section about |
stearns@5445 | 2797 | split boxes and replaced with paragraph referencing the page breaking |
stearns@5445 | 2798 | behavior. Removed the discussion about how the ‘<code |
stearns@5445 | 2799 | class=property>overflow</code>’ property applies to content flown |
stearns@5445 | 2800 | in regions from the break section, since this is covered in the section |
stearns@5445 | 2801 | on ‘<a href="#region-overflow"><code |
stearns@5445 | 2802 | class=property>region-overflow</code></a>’ already. See <a |
stearns@5445 | 2803 | href="http://lists.w3.org/Archives/Public/www-style/2011Dec/0477.html">mailing |
stearns@5445 | 2804 | list feedback.</a> |
stearns@5445 | 2805 | |
stearns@5445 | 2806 | <li>Clarified that @region style rules only apply to the ‘<code |
stearns@5445 | 2807 | class=property>portion</code>’ of an element that falls into the |
stearns@5445 | 2808 | corresponding region and added an issue that the model for ‘<code |
stearns@5445 | 2809 | class=property>partial</code>’ styling needs to be defined. See <a |
stearns@5445 | 2810 | href="http://lists.w3.org/Archives/Public/www-style/2011Dec/0480.html">mailing |
stearns@5445 | 2811 | list feedback</a>. |
stearns@5445 | 2812 | |
stearns@5445 | 2813 | <li>Clarified that the <code>NodeList</code> returned by |
stearns@5445 | 2814 | <code>getRegionsByContentNode</code> is live. |
stearns@5445 | 2815 | |
stearns@5445 | 2816 | <li>Added a name property to the <a |
stearns@5445 | 2817 | href="#dom-named-flow"><code>NamedFlow</code></a> interface. Added a <a |
stearns@5445 | 2818 | href="#dom-named-flow-collection"><code>NamedFlowCollection</code></a> |
stearns@5445 | 2819 | interface and added a <code>getNamedFlows</code> method on the |
stearns@5445 | 2820 | <code>Document</code> interface, as per <a |
stearns@5445 | 2821 | href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15828">Bug |
stearns@5445 | 2822 | 15828</a>. |
stearns@5445 | 2823 | |
stearns@5445 | 2824 | <li>Modified wording about containing block resolution for absolutely |
stearns@5445 | 2825 | positioned elements in a named flow. |
stearns@5445 | 2826 | |
stearns@5445 | 2827 | <li>Modified initial examples as per <a |
stearns@5445 | 2828 | href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15131">Bug 15131</a> |
stearns@5445 | 2829 | |
stearns@5445 | 2830 | <li>Multiple editorial changes following <a |
stearns@5445 | 2831 | href="http://lists.w3.org/Archives/Public/www-style/2012Feb/0001.html">mailing |
stearns@5445 | 2832 | list review comments</a> |
stearns@5445 | 2833 | |
stearns@5445 | 2834 | <li>Fixed DOM references to now point to the DOM TR |
stearns@5445 | 2835 | |
stearns@5445 | 2836 | <li>Fixed Web IDL issues as reported in <a |
stearns@5445 | 2837 | href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15931">Issue |
stearns@5445 | 2838 | 15931</a> |
stearns@5445 | 2839 | |
stearns@5445 | 2840 | <li>Added text to explain support for multi-column elements as required by |
stearns@5445 | 2841 | <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15191">Issue |
stearns@5445 | 2842 | 15191</a> and <a |
stearns@5445 | 2843 | href="http://www.w3.org/Style/CSS/Tracker/actions/375">Action 375</a>. |
stearns@5445 | 2844 | |
stearns@5445 | 2845 | <li>Renamed ‘<code class=property>regionOverflow</code>’ to |
stearns@5445 | 2846 | ‘<a href="#dom-region-regionoverset"><code |
stearns@5445 | 2847 | class=property>regionOverset</code></a>’ to avoid confusion between |
stearns@5445 | 2848 | fitting a flow in regions and the concept of visual overflow that the |
stearns@5445 | 2849 | word ‘<code class=property>overflow</code>’ (and the |
stearns@5445 | 2850 | property) carry. |
stearns@5445 | 2851 | |
stearns@5445 | 2852 | <li>Reworked the partial document interface following the <a |
stearns@5445 | 2853 | href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=14948">Issue |
stearns@5445 | 2854 | 14948</a> on <a |
stearns@5445 | 2855 | href="#document-getflowbyname"><code>getFlowByName</code></a>. |
stearns@5445 | 2856 | |
stearns@5445 | 2857 | <li>Updated the object model section as proposed on the <a |
stearns@5445 | 2858 | href="http://wiki.csswg.org/spec/css3-regions/css-om">wiki</a> and in |
stearns@5445 | 2859 | particular: |
stearns@5445 | 2860 | <ul> |
stearns@5445 | 2861 | <li>introduced a <code>Region</code> interface to replace the |
stearns@5445 | 2862 | supplemental Element interface |
stearns@5445 | 2863 | |
stearns@5445 | 2864 | <li>Added a ‘<a href="#dom-region-flowfrom"><code |
stearns@5445 | 2865 | class=property>flowFrom</code></a>’ attribute on the Region |
stearns@5445 | 2866 | interface |
stearns@5445 | 2867 | |
stearns@5445 | 2868 | <li>NamedFlow.getRegions() was added |
stearns@5445 | 2869 | |
stearns@5445 | 2870 | <li>Renamed getContentNode to getContent and getRegionsByContentNode to |
stearns@5445 | 2871 | getRegionsByContent as per <a |
stearns@5445 | 2872 | href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15879">Isseu |
stearns@5445 | 2873 | 15879</a> |
stearns@5445 | 2874 | |
stearns@5445 | 2875 | <li>NamedFlow now returns static lists (see <a |
stearns@5445 | 2876 | href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16286">Issue |
stearns@5445 | 2877 | 16286</a>) |
stearns@5445 | 2878 | </ul> |
stearns@5445 | 2879 | |
stearns@5445 | 2880 | <li>Modified region layout event to be dispatched on <a |
stearns@5445 | 2881 | href="#dom-named-flow"><code>NamedFlow</code></a> instead of region as |
stearns@5445 | 2882 | before. Was requested by <a |
stearns@5445 | 2883 | href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15938">Issue |
stearns@5445 | 2884 | 15938</a> and required in the general effort to have the DOM APIs work |
stearns@5445 | 2885 | with non-element regions. |
stearns@5445 | 2886 | |
stearns@5445 | 2887 | <li>Changed paragraph on pseudo-elements to disallow ‘<a |
stearns@5445 | 2888 | href="#flow-into"><code class=property>flow-into</code></a>’ on all |
stearns@5445 | 2889 | pseudo-elements because moving a ‘<code |
stearns@5445 | 2890 | class=css>::before</code>’ element (for a example) to a named flow |
stearns@5445 | 2891 | does not seem useful and causes specification and implementation |
stearns@5445 | 2892 | complexity. |
stearns@5445 | 2893 | |
stearns@5445 | 2894 | <li>Added section about getClientRects(), getBoundingClientRect(), |
stearns@5445 | 2895 | offsetWidth, offsetHeight, offsetTop and offsetLeft. |
stearns@5445 | 2896 | |
stearns@5445 | 2897 | <li>Added ‘<code class=css>Regions visual formatting |
stearns@5445 | 2898 | details</code>’ section to better describe the model for resolving |
stearns@5445 | 2899 | auto sizing on regions. |
stearns@5445 | 2900 | |
stearns@5445 | 2901 | <li>Reworked the initial specification example. |
stearns@5453 | 2902 | |
stearns@5453 | 2903 | <li>Changed break and region-overflow properties to apply to visual media |
stearns@5453 | 2904 | instead of paged. |
stearns@5453 | 2905 | |
stearns@5453 | 2906 | <li>Added opacity to region styling. |
stearns@5445 | 2907 | </ul> |
stearns@5445 | 2908 | |
stearns@5445 | 2909 | <h3 id="changes_from_June_09_2011"><span class=secno>12.2. </span>Changes |
stearns@5445 | 2910 | from <a href="http://www.w3.org/TR/2011/WD-css3-regions-20110609/">June |
stearns@5445 | 2911 | 09<sup>th</sup> 2011</a> version</h3> |
stearns@5445 | 2912 | |
stearns@5445 | 2913 | <ul> |
stearns@5445 | 2914 | <li>Editorial changes (typos, rephrasings). |
stearns@5445 | 2915 | |
stearns@5445 | 2916 | <li>Made ‘<code class=property>content-order</code>’ a |
stearns@5445 | 2917 | <integer> and not a <float> following a working group <a |
stearns@5445 | 2918 | href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0329.html">resolution</a> |
stearns@5445 | 2919 | |
stearns@5445 | 2920 | <li>Added Alex Mogilevsky as an editor |
stearns@5445 | 2921 | |
stearns@5445 | 2922 | <li>Flow names became <ident> instead of <string> following a |
stearns@5445 | 2923 | working group <a |
stearns@5445 | 2924 | href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0413.html">resolution</a> |
stearns@5445 | 2925 | |
stearns@5445 | 2926 | <li>Removed issue about possibly altering the DOM Events model for region |
stearns@5445 | 2927 | events following a working group <a |
stearns@5445 | 2928 | href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0413.html">resolution</a> |
stearns@5445 | 2929 | |
stearns@5445 | 2930 | <li>Made the "relation to document events" section informative following a |
stearns@5445 | 2931 | working group <a |
stearns@5445 | 2932 | href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0413.html">resolution</a> |
stearns@5445 | 2933 | |
stearns@5445 | 2934 | <li>Removed issue in section "The NamedFlow interface" following the |
stearns@5445 | 2935 | working group's <a |
stearns@5445 | 2936 | href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0413.html">resolution</a> |
stearns@5445 | 2937 | to have both NamedFlow and the Element interface extension |
stearns@5445 | 2938 | |
stearns@5445 | 2939 | <li>Following a working group <a |
stearns@5445 | 2940 | href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0413.html">resolution</a>: |
stearns@5445 | 2941 | |
stearns@5445 | 2942 | <ul> |
stearns@5445 | 2943 | <li>Turned the first issue in the "Extensions to the Element interface" |
stearns@5445 | 2944 | into a note explaining that the NamedFlow interface can be used when |
stearns@5445 | 2945 | regions are pseudo-elements. |
stearns@5445 | 2946 | |
stearns@5445 | 2947 | <li>Added NamedFlowUpdate |
stearns@5445 | 2948 | </ul> |
stearns@5445 | 2949 | |
stearns@5445 | 2950 | <li>Excluded ‘<code class=property>none</code>’, ‘<code |
stearns@5445 | 2951 | class=property>inherit</code>’ and ‘<code |
stearns@5445 | 2952 | class=property>initial</code>’ from the possible identifier names |
stearns@5445 | 2953 | on the flow property following <a |
stearns@5445 | 2954 | href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0583.html">discussion</a> |
stearns@5445 | 2955 | on the mailing list. |
stearns@5445 | 2956 | |
stearns@5445 | 2957 | <li>Simplified integration discussion on multi-column layout and just |
stearns@5445 | 2958 | state that since column boxes are not addressable by selectors, they |
stearns@5445 | 2959 | cannot be regions. |
stearns@5445 | 2960 | |
stearns@5445 | 2961 | <li>Added specification of how the ‘<a href="#flow-into"><code |
stearns@5445 | 2962 | class=property>flow-into</code></a>’ property interacts with |
stearns@5445 | 2963 | object, embed and iframe elements. |
stearns@5445 | 2964 | |
stearns@5445 | 2965 | <li>Excluded ‘<code class=property>default</code>’ from the |
stearns@5445 | 2966 | possible identifier names on the flow property because it <a |
stearns@5445 | 2967 | href="http://www.w3.org/TR/2006/WD-css3-values-20060919/#keywords">may |
stearns@5445 | 2968 | get reserved</a>. |
stearns@5445 | 2969 | |
stearns@5445 | 2970 | <li>Added to the definition of ‘<code |
stearns@5445 | 2971 | class=property>auto</code>’ on ‘<a |
stearns@5445 | 2972 | href="#region-overflow"><code |
stearns@5445 | 2973 | class=property>region-overflow</code></a>’ specifying that region |
stearns@5445 | 2974 | breaks must be ignored. |
stearns@5445 | 2975 | |
stearns@5445 | 2976 | <li>Renamed ‘<code class=css>Document.flowWithName</code>’ to |
stearns@5445 | 2977 | ‘<code class=css>Document.getFlowByName</code>’ since it is |
stearns@5445 | 2978 | not a property. |
stearns@5445 | 2979 | |
stearns@5445 | 2980 | <li>Added a note that a ‘<a href="#dom-named-flow"><code |
stearns@5445 | 2981 | class=property>NamedFlow</code></a>’ instance is live. |
stearns@5445 | 2982 | |
stearns@5445 | 2983 | <li>Added an ‘<code class=property>undefined</code>’ string |
stearns@5445 | 2984 | value to the regionOverflow property on the Element interface extension. |
stearns@5445 | 2985 | |
stearns@5445 | 2986 | <li>Renamed NamedFlowEvent to regionLayoutUpdate to avoid having |
stearns@5445 | 2987 | ‘<code class=property>Event</code>’ in the event name. |
stearns@5445 | 2988 | |
stearns@5445 | 2989 | <li>Added description for special behavior of iframe/object/embed as flow |
stearns@5445 | 2990 | source |
stearns@5445 | 2991 | |
stearns@5445 | 2992 | <li>Removed issue on copying content to a named flow instead of moving |
stearns@5445 | 2993 | elements to named flow following working group <a |
stearns@5445 | 2994 | href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a>. |
stearns@5445 | 2995 | |
stearns@5445 | 2996 | <li>Removed issue on content:flow-from v.s., flow-from property following |
stearns@5445 | 2997 | working group <a |
stearns@5445 | 2998 | href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a>. |
stearns@5445 | 2999 | |
stearns@5445 | 3000 | <li>Renamed ‘<code class=property>flow</code>’ to ‘<a |
stearns@5445 | 3001 | href="#flow-into"><code class=property>flow-into</code></a>’ |
stearns@5445 | 3002 | following working group <a |
stearns@5445 | 3003 | href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a>. |
stearns@5445 | 3004 | |
stearns@5445 | 3005 | <li>Updated the css3-grid-align example following working group <a |
stearns@5445 | 3006 | href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a> |
stearns@5445 | 3007 | that it should use <div> instead of grid-cell pseudo elements that |
stearns@5445 | 3008 | were removed from the CSS Grid Layout specification. |
stearns@5445 | 3009 | |
stearns@5445 | 3010 | <li>Renamed ‘<code class=property>from-flow</code>’ to |
stearns@5445 | 3011 | ‘<a href="#flow-from"><code |
stearns@5445 | 3012 | class=property>flow-from</code></a>’ following a working group <a |
stearns@5445 | 3013 | href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a>. |
stearns@5445 | 3014 | |
stearns@5445 | 3015 | <li>Limited the applicability of ‘<code class=css>content: |
stearns@5445 | 3016 | flow-from()</code>’ to block container box and added a note that |
stearns@5445 | 3017 | this might be expanded in the future, following a working group <a |
stearns@5445 | 3018 | href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a>. |
stearns@5445 | 3019 | |
stearns@5445 | 3020 | <li>Removed issue about API to find which region displays an element in a |
stearns@5445 | 3021 | named flow since <a |
stearns@5445 | 3022 | href="http://www.w3.org/Style/CSS/Tracker/actions/350">ACTION-350</a> was |
stearns@5445 | 3023 | created to add this API. |
stearns@5445 | 3024 | |
stearns@5445 | 3025 | <li>In the ‘<code class=property>flow</code>’ property |
stearns@5445 | 3026 | description, removed the required wrapper anonymous block as agreed on <a |
stearns@5445 | 3027 | href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0161.html">mailing |
stearns@5445 | 3028 | list discussion</a>. |
stearns@5445 | 3029 | |
stearns@5445 | 3030 | <li>Reworded the paragraph on how regions create a new stacking context, |
stearns@5445 | 3031 | as per the <a |
stearns@5445 | 3032 | href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0025.html">mailing |
stearns@5445 | 3033 | list discussion</a>. |
stearns@5445 | 3034 | |
stearns@5445 | 3035 | <li>Reworked the "CSS regions Model" section to now be "CSS regions |
stearns@5445 | 3036 | Layout". Moved the definition of a region as the first sub-section. |
stearns@5445 | 3037 | |
stearns@5445 | 3038 | <li>Removed the "Visual Formatting Model and Flows" section to match the |
stearns@5445 | 3039 | new Regions Model (now CSS regions Layout) section. |
stearns@5445 | 3040 | |
stearns@5445 | 3041 | <li>Moved the sections on allowed region breaks, forced region breaks and |
stearns@5445 | 3042 | "best" regions breaks to follow the property definitions to follow the |
stearns@5445 | 3043 | formatting of the paged media section in CSS 2.1. |
stearns@5445 | 3044 | |
stearns@5445 | 3045 | <li>Added note about why regions create a new stacking context following |
stearns@5445 | 3046 | the discussion on the <a |
stearns@5445 | 3047 | href="http://lists.w3.org/Archives/Public/www-style/2011Jul/0158.html">mailing |
stearns@5445 | 3048 | list</a>. |
stearns@5445 | 3049 | |
stearns@5445 | 3050 | <li>Removed sentence about content:none making elements disconnected |
stearns@5445 | 3051 | following the discussion on the <a |
stearns@5445 | 3052 | href="http://lists.w3.org/Archives/Public/www-style/2011Jul/0158.html">mailing |
stearns@5445 | 3053 | list</a>. |
stearns@5445 | 3054 | |
stearns@5445 | 3055 | <li>Removed sentence about content:none making elements disconnected |
stearns@5445 | 3056 | following the discussion on the <a |
stearns@5445 | 3057 | href="http://lists.w3.org/Archives/Public/www-style/2011Jul/0158.html">mailing |
stearns@5445 | 3058 | list</a>. |
stearns@5445 | 3059 | |
stearns@5445 | 3060 | <li>Added the ::region-before and a ::region-after pseudo-elements. |
stearns@5445 | 3061 | |
stearns@5445 | 3062 | <li>Added note of caution when using selectors and the ‘<a |
stearns@5445 | 3063 | href="#flow-into"><code class=property>flow-into</code></a>’ |
stearns@5445 | 3064 | property following a <a |
stearns@5445 | 3065 | href="http://lists.w3.org/Archives/Public/www-style/2011Jul/0191.html">mailing |
stearns@5445 | 3066 | list discussion</a>. |
stearns@5445 | 3067 | |
stearns@5445 | 3068 | <li>Removed sections about allowed, forced and best region breaks to align |
stearns@5445 | 3069 | with the multi-column specification approach and until the group agrees |
stearns@5445 | 3070 | on where and how the general issue of breaks (regions/pages/columns) |
stearns@5445 | 3071 | should be addressed. |
stearns@5445 | 3072 | |
stearns@5445 | 3073 | <li>Removed the section on Integration with other specifications since |
stearns@5445 | 3074 | specifications that was superfluous especially since there is no specific |
stearns@5445 | 3075 | integration with multi column, grid or template layout. |
stearns@5445 | 3076 | |
stearns@5445 | 3077 | <li>Added a note that regions establish a new block formatting context. |
stearns@5445 | 3078 | |
stearns@5445 | 3079 | <li>Renamed content-order to region-order. |
stearns@5445 | 3080 | |
stearns@5445 | 3081 | <li>Added a note about overflowing content in regions (e.g., for content |
stearns@5445 | 3082 | with borders). |
stearns@5445 | 3083 | |
stearns@5445 | 3084 | <li>Added a note that a region cannot layout content it is part of (to |
stearns@5445 | 3085 | avoid creating a circular dependency) in the flow-from description, |
stearns@5445 | 3086 | specifying that if flow-from references the flow an element is part of, |
stearns@5445 | 3087 | then the element does not format anything visually. |
stearns@5445 | 3088 | |
stearns@5445 | 3089 | <li>Replaced ‘<code |
stearns@5445 | 3090 | class=css>content:flow-from(<ident>)</code>’ with |
stearns@5445 | 3091 | ‘<code class=css>flow-from: <ident></code>’ following a |
stearns@5445 | 3092 | <a href="http://krijnhoetmer.nl/irc-logs/css/20110824">working group |
stearns@5445 | 3093 | resolution</a>. |
stearns@5445 | 3094 | |
stearns@5445 | 3095 | <li>Added more specific wording about auto width and auto height, |
stearns@5445 | 3096 | following <a |
stearns@5445 | 3097 | href="http://www.w3.org/Style/CSS/Tracker/actions/351">ACTION 351</a>. |
stearns@5445 | 3098 | |
stearns@5445 | 3099 | <li>Reworked section on region markers to now use ‘<code |
stearns@5445 | 3100 | class=css>::before</code>’ and ‘<code |
stearns@5445 | 3101 | class=css>::after</code>’ and explain how ‘<code |
stearns@5445 | 3102 | class=css>display:run-in</code>’ works with regions. |
stearns@5445 | 3103 | |
stearns@5445 | 3104 | <li>Modified the @region style rule to remove the ::region-lines |
stearns@5445 | 3105 | pseudo-selector. |
stearns@5445 | 3106 | |
stearns@5445 | 3107 | <li>Removed the ‘<code class=property>region-order</code>’ |
stearns@5445 | 3108 | property following implementation feedback. |
stearns@5445 | 3109 | |
stearns@5445 | 3110 | <li>Specified that region-overflow does not influence a region's size. |
stearns@5445 | 3111 | |
stearns@5445 | 3112 | <li>Specified that the flow's writing mode is defined by the first |
stearns@5445 | 3113 | region's writing mode following <a |
stearns@5445 | 3114 | href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0306.html">mailing |
stearns@5445 | 3115 | list discussion</a>. |
stearns@5445 | 3116 | |
stearns@5445 | 3117 | <li>Made iframe, object and embed support of flow-into optional following |
stearns@5445 | 3118 | <a |
stearns@5445 | 3119 | href="http://lists.w3.org/Archives/Public/www-style/2011Sep/0073.html">mailing |
stearns@5445 | 3120 | list discussion</a>. |
stearns@5445 | 3121 | |
stearns@5445 | 3122 | <li>Clarified that flow content following the last break in the last |
stearns@5445 | 3123 | region is not rendered, following <a |
stearns@5445 | 3124 | href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0167.html">mailing |
stearns@5445 | 3125 | list discussions.</a> |
stearns@5445 | 3126 | |
stearns@5445 | 3127 | <li>Modified the rule for computing the width and height of a region when |
stearns@5445 | 3128 | they are set to auto, following <a |
stearns@5445 | 3129 | href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0216.html">a |
stearns@5445 | 3130 | mailing list discussion.</a> |
stearns@5445 | 3131 | |
stearns@5445 | 3132 | <li>Added ‘<code class=property>auto</code>’ to the list of |
stearns@5445 | 3133 | invalid flow identifiers. |
stearns@5445 | 3134 | |
stearns@5445 | 3135 | <li>Made ‘<code class=property>none</code>’ the initial value |
stearns@5445 | 3136 | for ‘<a href="#flow-into"><code |
stearns@5445 | 3137 | class=property>flow-into</code></a>’ and aligned with ‘<a |
stearns@5445 | 3138 | href="#flow-from"><code class=property>flow-from</code></a>’, as |
stearns@5445 | 3139 | explained in this <a |
stearns@5445 | 3140 | href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0576.html">email</a>. |
stearns@5445 | 3141 | Also allowed the ‘<code class=property>inherit</code>’ value |
stearns@5445 | 3142 | on ‘<a href="#flow-from"><code |
stearns@5445 | 3143 | class=property>flow-from</code></a>’ and ‘<a |
stearns@5445 | 3144 | href="#flow-into"><code class=property>flow-into</code></a>’ (same |
stearns@5445 | 3145 | email). |
stearns@5445 | 3146 | |
stearns@5445 | 3147 | <li>Added note about nested region styling following <a |
stearns@5445 | 3148 | href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0650.html">a |
stearns@5445 | 3149 | mailing list discussion</a>. |
stearns@5445 | 3150 | |
stearns@5445 | 3151 | <li>Added additional DOM interface following <a |
stearns@5445 | 3152 | href="http://www.w3.org/Style/CSS/Tracker/actions/350">Action 350</a>. |
stearns@5445 | 3153 | |
stearns@5445 | 3154 | <li>Clarified that a region becomes a region only if its ‘<code |
stearns@5445 | 3155 | class=property>content</code>’ property computes to normal, |
stearns@5445 | 3156 | following the resolution of <a |
stearns@5445 | 3157 | href="http://wiki.csswg.org/spec/css3-regions#issue-22content-vs-flow-from-precedence">Issue |
stearns@5445 | 3158 | 22</a>. |
stearns@5445 | 3159 | |
stearns@5445 | 3160 | <li>Removed text about special iframe behavior as a result of <a |
stearns@5445 | 3161 | href="http://www.w3.org/Style/CSS/Tracker/actions/376">ACTION 376</a>. |
stearns@5445 | 3162 | |
stearns@5445 | 3163 | <li>Made the selectors explicit in the initial section code examples, |
stearns@5445 | 3164 | following discussion in <a |
stearns@5445 | 3165 | href="http://krijnhoetmer.nl/irc-logs/css/20111030">San Jose, October |
stearns@5445 | 3166 | 2011</a> face to face meeting. |
stearns@5445 | 3167 | |
stearns@5445 | 3168 | <li>Added section on use cases following <a |
stearns@5445 | 3169 | href="http://www.w3.org/Style/CSS/Tracker/actions/377">ACTION-377</a>. |
stearns@5445 | 3170 | </ul> |
stearns@5445 | 3171 | |
stearns@5445 | 3172 | <h2 class=no-num id=acknowledgments>Acknowledgments</h2> |
stearns@5445 | 3173 | |
stearns@5445 | 3174 | <p>The editors are grateful to the CSS working group for their feedback and |
stearns@5445 | 3175 | help with the genesis of this specification. |
stearns@5445 | 3176 | |
stearns@5445 | 3177 | <p>In addition, the editors would like to thank the following individuals |
stearns@5445 | 3178 | for their contributions, either during the conception of CSS regions or |
stearns@5445 | 3179 | during its development and specification review process: |
stearns@5445 | 3180 | |
stearns@5445 | 3181 | <ul> |
stearns@5445 | 3182 | <li>Rossen Atanassov |
stearns@5445 | 3183 | |
stearns@5445 | 3184 | <li>Tab Atkins |
stearns@5445 | 3185 | |
stearns@5445 | 3186 | <li>Andrei Bucur |
stearns@5445 | 3187 | |
stearns@5445 | 3188 | <li>Alexandru Chiculita |
stearns@5445 | 3189 | |
stearns@5445 | 3190 | <li>Phil Cupp |
stearns@5445 | 3191 | |
stearns@5445 | 3192 | <li>Arron Eicholz |
stearns@5445 | 3193 | |
stearns@5445 | 3194 | <li>John Jansen |
stearns@5445 | 3195 | |
stearns@5445 | 3196 | <li>Daniel Glazman |
stearns@5445 | 3197 | |
stearns@5445 | 3198 | <li>Arno Gourdol |
stearns@5445 | 3199 | |
stearns@5445 | 3200 | <li>David Hyatt |
stearns@5445 | 3201 | |
stearns@5445 | 3202 | <li>Brian Heuston |
stearns@5445 | 3203 | |
stearns@5445 | 3204 | <li>Ian Hickson |
stearns@5445 | 3205 | |
stearns@5445 | 3206 | <li>Jonathan Hoersch |
stearns@5445 | 3207 | |
stearns@5445 | 3208 | <li>Michael Jolson |
stearns@5445 | 3209 | |
stearns@5445 | 3210 | <li>Brad Kemper |
stearns@5445 | 3211 | |
stearns@5445 | 3212 | <li>HÃ¥kon Wium Lie |
stearns@5445 | 3213 | |
stearns@5445 | 3214 | <li>Markus Mielke |
stearns@5445 | 3215 | |
stearns@5445 | 3216 | <li>Robert O'Callahan |
stearns@5445 | 3217 | |
stearns@5445 | 3218 | <li>Edward O'Connor |
stearns@5445 | 3219 | |
stearns@5445 | 3220 | <li>Mihnea Ovidenie |
stearns@5445 | 3221 | |
stearns@5445 | 3222 | <li>Virgil Palanciuc |
stearns@5445 | 3223 | |
stearns@5445 | 3224 | <li>Olga Popiv |
stearns@5445 | 3225 | |
stearns@5445 | 3226 | <li>Christoph Päper |
stearns@5445 | 3227 | |
stearns@5445 | 3228 | <li>Anton Prowse |
stearns@5445 | 3229 | |
stearns@5445 | 3230 | <li>Peter Sorotokin |
stearns@5445 | 3231 | |
stearns@5445 | 3232 | <li>Alan Stearns |
stearns@5445 | 3233 | |
stearns@5445 | 3234 | <li>Christian Stockwell |
stearns@5445 | 3235 | |
stearns@5445 | 3236 | <li>Eugene Veselov |
stearns@5445 | 3237 | |
stearns@5445 | 3238 | <li>Boris Zbarsky |
stearns@5445 | 3239 | |
stearns@5445 | 3240 | <li>Stephen Zilles |
stearns@5445 | 3241 | </ul> |
stearns@5445 | 3242 | |
stearns@5445 | 3243 | <h2 class=no-num id=intro-example-code>Appendix A. Example Code for |
stearns@5445 | 3244 | Introduction</h2> |
stearns@5445 | 3245 | |
stearns@5445 | 3246 | <p>The following is one possible way to code the example from the <a |
stearns@5445 | 3247 | href="#introduction">introduction</a>. This code uses grid cells to |
stearns@5445 | 3248 | define, size and position the region areas but table layout, absolute |
stearns@5445 | 3249 | positioning, or any other CSS layout facility could be used. |
stearns@5445 | 3250 | |
stearns@5445 | 3251 | <p>The following code snippet shows the content to flow through the region |
stearns@5445 | 3252 | chain. |
vhardy@3130 | 3253 | |
vhardy@3130 | 3254 | <pre> |
vhardy@3130 | 3255 | <div <em>id="article"</em>> |
vhardy@3301 | 3256 | <h1>Introduction</h1> |
vhardy@3301 | 3257 | <p>This is an example ...</p> |
vhardy@3130 | 3258 | |
vhardy@5377 | 3259 | <h2>More Details</h2> |
vhardy@3301 | 3260 | <p>This illustrates ...</p> |
vhardy@3301 | 3261 | <p>Then, the example ...</p> |
vhardy@3301 | 3262 | <p>Finally, this ...</p> |
vhardy@3130 | 3263 | </div> |
stearns@5423 | 3264 | </pre> |
vhardy@3130 | 3265 | |
vhardy@5377 | 3266 | <p>And the following snippet shows an example using grid cells to define, |
stearns@5445 | 3267 | size and position boxes: |
vhardy@3940 | 3268 | |
vhardy@3940 | 3269 | <pre> |
vhardy@4413 | 3270 | <style> |
stearns@5423 | 3271 | #grid { |
stearns@5423 | 3272 | width: 80vw; |
stearns@5423 | 3273 | height: 60vw; |
stearns@5423 | 3274 | grid-template: "aaa.d" |
stearns@5423 | 3275 | "....d" |
stearns@5423 | 3276 | "bbb.d" |
stearns@5423 | 3277 | "....d" |
stearns@5423 | 3278 | "ccc.d"; |
stearns@5423 | 3279 | grid-rows: 52% 4% 20% 4% 20%; |
stearns@5423 | 3280 | grid-columns: 30% 5% 30% 5% 30%; |
stearns@5423 | 3281 | } |
stearns@5423 | 3282 | #region1 { grid-cell: a; } |
stearns@5423 | 3283 | #region2 { grid-cell: b; } |
stearns@5423 | 3284 | #boxA { grid-cell: c; } |
stearns@5423 | 3285 | #region3 { grid-cell: d; } |
stearns@5423 | 3286 | |
stearns@5423 | 3287 | #region4 { |
stearns@5423 | 3288 | width: 80vw; |
stearns@5423 | 3289 | } |
stearns@5423 | 3290 | |
stearns@5423 | 3291 | #region2 { |
stearns@5423 | 3292 | column-count: 2; |
stearns@5423 | 3293 | } |
vhardy@4413 | 3294 | </style> |
vhardy@4413 | 3295 | |
vhardy@5377 | 3296 | <div id="grid"> |
stearns@5423 | 3297 | <div id="region1"></div> |
stearns@5423 | 3298 | <div id="region2"></div> |
stearns@5423 | 3299 | <div id="boxA"></div> |
stearns@5423 | 3300 | <div id="region3"></div> |
vhardy@4413 | 3301 | </div> |
vhardy@5377 | 3302 | <div id="region4"></div> |
vhardy@3940 | 3303 | </pre> |
vhardy@3940 | 3304 | |
stearns@5445 | 3305 | <p>Then finally this snippet (from the introduction) creates the named flow |
stearns@5445 | 3306 | and associates it with the intended boxes, which creates a region chain |
stearns@5445 | 3307 | for the named flow. |
stearns@5445 | 3308 | |
stearns@5445 | 3309 | <pre> |
vhardy@3130 | 3310 | <style> |
stearns@5445 | 3311 | |
vhardy@3130 | 3312 | #article { |
stearns@5423 | 3313 | <strong>flow-into: article_flow;</strong> |
vhardy@3130 | 3314 | } |
vhardy@3130 | 3315 | |
vhardy@3940 | 3316 | #region1, #region2, #region3, #region4 { |
stearns@5423 | 3317 | <strong>flow-from: article_flow;</strong> |
vhardy@3130 | 3318 | } |
vhardy@3130 | 3319 | </style> |
stearns@5445 | 3320 | </pre> |
stearns@5445 | 3321 | |
stearns@5445 | 3322 | <div class=note><span class=note-prefix>Note </span> |
stearns@5445 | 3323 | <p> Note that a multi-column element is used for #region2, which is a bit |
stearns@5445 | 3324 | gratuitous here (because grid cells could be used). The reason to use a |
stearns@5445 | 3325 | multi-column element is to illustrate that regions can be multi-column.</p> |
vhardy@3130 | 3326 | </div> |
vhardy@3130 | 3327 | |
vhardy@3130 | 3328 | <h2 class=no-num id=references>References</h2> |
vhardy@3130 | 3329 | |
vhardy@3130 | 3330 | <h3 class=no-num id=normative-references>Normative references</h3> |
vhardy@3130 | 3331 | <!--begin-normative--> |
vhardy@3130 | 3332 | <!-- Sorted by label --> |
vhardy@3130 | 3333 | |
vhardy@3130 | 3334 | <dl class=bibliography> |
vhardy@3130 | 3335 | <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> |
vhardy@3130 | 3336 | <!----> |
vhardy@3130 | 3337 | |
vhardy@3130 | 3338 | <dt id=CSS21>[CSS21] |
vhardy@3130 | 3339 | |
vhardy@3130 | 3340 | <dd>Bert Bos; et al. <a |
vhardy@3711 | 3341 | href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style |
vhardy@3130 | 3342 | Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June |
vhardy@3130 | 3343 | 2011. W3C Recommendation. URL: <a |
vhardy@3711 | 3344 | href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a> |
vhardy@3130 | 3345 | </dd> |
vhardy@3130 | 3346 | <!----> |
vhardy@3130 | 3347 | |
vhardy@5289 | 3348 | <dt id=CSS3-BREAK>[CSS3-BREAK] |
vhardy@5289 | 3349 | |
vhardy@5289 | 3350 | <dd>Rossen Atanassov; Elika J. Etemad. <a |
vhardy@5289 | 3351 | href="http://www.w3.org/TR/2012/WD-css3-break-20120228/"><cite>CSS |
vhardy@5289 | 3352 | Fragmentation Module Level 3.</cite></a> 28 February 2012. W3C Working |
vhardy@5289 | 3353 | Draft. (Work in progress.) URL: <a |
vhardy@5289 | 3354 | href="http://www.w3.org/TR/2012/WD-css3-break-20120228/">http://www.w3.org/TR/2012/WD-css3-break-20120228/</a> |
vhardy@5289 | 3355 | </dd> |
vhardy@5289 | 3356 | <!----> |
vhardy@5289 | 3357 | |
vhardy@5390 | 3358 | <dt id=CSS3-PAGE-TEMPLATE>[CSS3-PAGE-TEMPLATE] |
vhardy@5390 | 3359 | |
vhardy@5390 | 3360 | <dd>Alan Stearns. <a |
vhardy@5390 | 3361 | href="http://dev.w3.org/csswg/css3-page-template/"><cite>CSS Pagination |
vhardy@5390 | 3362 | Templates Module Level 3.</cite></a> Proposal for a CSS module. |
vhardy@5390 | 3363 | (Retrieved 4 April 2012) URL: <a |
vhardy@5390 | 3364 | href="http://dev.w3.org/csswg/css3-page-template/">http://dev.w3.org/csswg/css3-page-template/</a> |
vhardy@5390 | 3365 | </dd> |
vhardy@5390 | 3366 | <!----> |
vhardy@5390 | 3367 | |
vhardy@5289 | 3368 | <dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES] |
vhardy@5289 | 3369 | |
vhardy@5289 | 3370 | <dd>Elika J. Etemad; Koji Ishii; Shinyu Murakami. <a |
vhardy@5289 | 3371 | href="http://www.w3.org/TR/2011/WD-css3-writing-modes-20110901/"><cite>CSS |
vhardy@5289 | 3372 | Writing Modes Module Level 3.</cite></a> 1 September 2011. W3C Working |
vhardy@5289 | 3373 | Draft. (Work in progress.) URL: <a |
vhardy@5289 | 3374 | href="http://www.w3.org/TR/2011/WD-css3-writing-modes-20110901/">http://www.w3.org/TR/2011/WD-css3-writing-modes-20110901/</a> |
vhardy@5289 | 3375 | </dd> |
vhardy@5289 | 3376 | <!----> |
vhardy@5289 | 3377 | |
vhardy@3130 | 3378 | <dt id=CSS3COL>[CSS3COL] |
vhardy@3130 | 3379 | |
vhardy@3130 | 3380 | <dd>Håkon Wium Lie. <a |
vhardy@3130 | 3381 | href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412"><cite>CSS |
vhardy@3130 | 3382 | Multi-column Layout Module.</cite></a> 12 April 2011. W3C Candidate |
vhardy@3130 | 3383 | Recommendation. (Work in progress.) URL: <a |
vhardy@3130 | 3384 | href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412">http://www.w3.org/TR/2011/CR-css3-multicol-20110412</a> |
vhardy@3130 | 3385 | </dd> |
vhardy@3130 | 3386 | <!----> |
vhardy@3130 | 3387 | |
vhardy@5094 | 3388 | <dt id=DOM>[DOM] |
vhardy@5094 | 3389 | |
vhardy@5094 | 3390 | <dd>Anne van Kesteren; Aryeh Gregor; Ms2ger. <a |
vhardy@5095 | 3391 | href="http://www.w3.org/TR/2012/WD-dom-20120105/"><cite>DOM4.</cite></a> |
vhardy@5095 | 3392 | 5 January 2012. W3C Working Draft. (Work in progress.) URL: <a |
vhardy@5095 | 3393 | href="http://www.w3.org/TR/2012/WD-dom-20120105/">http://www.w3.org/TR/2012/WD-dom-20120105/</a> |
vhardy@5094 | 3394 | </dd> |
vhardy@5094 | 3395 | <!----> |
vhardy@5094 | 3396 | |
vhardy@5094 | 3397 | <dt id=DOM-LEVEL-3-EVENTS>[DOM-LEVEL-3-EVENTS] |
vhardy@5094 | 3398 | |
vhardy@5094 | 3399 | <dd>Doug Schepers; et al. <a |
vhardy@5094 | 3400 | href="http://www.w3.org/TR/2011/WD-DOM-Level-3-Events-20110531"><cite>Document |
vhardy@5094 | 3401 | Object Model (DOM) Level 3 Events Specification.</cite></a> 31 May 2011. |
vhardy@5094 | 3402 | W3C Working Draft. (Work in progress.) URL: <a |
vhardy@5094 | 3403 | href="http://www.w3.org/TR/2011/WD-DOM-Level-3-Events-20110531">http://www.w3.org/TR/2011/WD-DOM-Level-3-Events-20110531</a> |
vhardy@5094 | 3404 | </dd> |
vhardy@5094 | 3405 | <!----> |
vhardy@5094 | 3406 | |
vhardy@3130 | 3407 | <dt id=SELECT>[SELECT] |
vhardy@3130 | 3408 | |
vhardy@3130 | 3409 | <dd>Tantek Çelik; et al. <a |
vhardy@3711 | 3410 | href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/"><cite>Selectors |
vhardy@3711 | 3411 | Level 3.</cite></a> 29 September 2011. W3C Recommendation. URL: <a |
vhardy@3711 | 3412 | href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/">http://www.w3.org/TR/2011/REC-css3-selectors-20110929/</a> |
vhardy@3130 | 3413 | </dd> |
vhardy@3130 | 3414 | <!----> |
vhardy@3130 | 3415 | </dl> |
vhardy@3130 | 3416 | <!--end-normative--> |
vhardy@3130 | 3417 | |
vhardy@3130 | 3418 | <h3 class=no-num id=other-references>Other references</h3> |
vhardy@3130 | 3419 | <!--begin-informative--> |
vhardy@3130 | 3420 | <!-- Sorted by label --> |
vhardy@3130 | 3421 | |
vhardy@3130 | 3422 | <dl class=bibliography> |
vhardy@3130 | 3423 | <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> |
vhardy@3130 | 3424 | <!----> |
vhardy@3130 | 3425 | |
vhardy@3940 | 3426 | <dt id=CSS3-EXCLUSIONS>[CSS3-EXCLUSIONS] |
vhardy@3940 | 3427 | |
vhardy@4119 | 3428 | <dd>Vincent Hardy; Rossen Atanassov. <a |
vhardy@4119 | 3429 | href="http://www.w3.org/TR/2011/WD-css3-exclusions-20111213/"><cite>CSS |
vhardy@4119 | 3430 | Exclusions and Shapes Module Level 3.</cite></a> 13 December 2011. W3C |
vhardy@4119 | 3431 | Working Draft. (Work in progress.) URL: <a |
vhardy@4119 | 3432 | href="http://www.w3.org/TR/2011/WD-css3-exclusions-20111213/">http://www.w3.org/TR/2011/WD-css3-exclusions-20111213/</a> |
vhardy@3940 | 3433 | </dd> |
vhardy@3940 | 3434 | <!----> |
vhardy@3940 | 3435 | |
bert@3956 | 3436 | <dt id=CSS3-FLEXBOX>[CSS3-FLEXBOX] |
bert@3956 | 3437 | |
bert@3956 | 3438 | <dd>Tab Atkins Jr.; Alex Mogilevsky; L. David Baron. <a |
vhardy@4119 | 3439 | href="http://www.w3.org/TR/2011/WD-css3-flexbox-20111129/"><cite>CSS |
vhardy@4119 | 3440 | Flexible Box Layout Module.</cite></a> 29 November 2011. W3C Working |
vhardy@4119 | 3441 | Draft. (Work in progress.) URL: <a |
vhardy@4119 | 3442 | href="http://www.w3.org/TR/2011/WD-css3-flexbox-20111129/">http://www.w3.org/TR/2011/WD-css3-flexbox-20111129/</a> |
bert@3956 | 3443 | </dd> |
bert@3956 | 3444 | <!----> |
bert@3956 | 3445 | |
vhardy@3130 | 3446 | <dt id=CSS3-GRID-LAYOUT>[CSS3-GRID-LAYOUT] |
vhardy@3130 | 3447 | |
vhardy@3130 | 3448 | <dd>Alex Mogilevsky; et al. <a |
vhardy@3130 | 3449 | href="http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407"><cite>Grid |
vhardy@3130 | 3450 | Layout.</cite></a> 7 April 2011. W3C Working Draft. (Work in progress.) |
vhardy@3130 | 3451 | URL: <a |
vhardy@3130 | 3452 | href="http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407">http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407</a> |
vhardy@3130 | 3453 | </dd> |
vhardy@3130 | 3454 | <!----> |
vhardy@3130 | 3455 | |
vhardy@3940 | 3456 | <dt id=CSS3-LINE-GRID>[CSS3-LINE-GRID] |
vhardy@3940 | 3457 | |
vhardy@3940 | 3458 | <dd>Koji Ishii. <a href="http://dev.w3.org/csswg/css-line-grid/"><cite>CSS |
vhardy@3940 | 3459 | Line Grid Module.</cite></a> Proposal for a CSS module. (Retrieved 26 |
vhardy@3940 | 3460 | October 2011) URL: <a |
vhardy@3940 | 3461 | href="http://dev.w3.org/csswg/css-line-grid/">http://dev.w3.org/csswg/css-line-grid/</a> |
vhardy@3940 | 3462 | </dd> |
vhardy@3940 | 3463 | <!----> |
vhardy@3940 | 3464 | |
bert@3956 | 3465 | <dt id=CSS3GRID>[CSS3GRID] |
bert@3956 | 3466 | |
bert@3956 | 3467 | <dd>Alex Mogilevsky; Markus Mielke. <a |
bert@3956 | 3468 | href="http://www.w3.org/TR/2007/WD-css3-grid-20070905"><cite>CSS Grid |
bert@3956 | 3469 | Positioning Module Level 3.</cite></a> 5 September 2007. W3C Working |
bert@3956 | 3470 | Draft. (Work in progress.) URL: <a |
bert@3956 | 3471 | href="http://www.w3.org/TR/2007/WD-css3-grid-20070905">http://www.w3.org/TR/2007/WD-css3-grid-20070905</a> |
bert@3956 | 3472 | </dd> |
bert@3956 | 3473 | <!----> |
bert@3956 | 3474 | |
bert@3956 | 3475 | <dt id=CSS3LAYOUT>[CSS3LAYOUT] |
bert@3956 | 3476 | |
bert@3956 | 3477 | <dd>Bert Bos; César Acebal. <a |
bert@3956 | 3478 | href="http://www.w3.org/TR/2010/WD-css3-layout-20100429"><cite>CSS |
bert@3956 | 3479 | Template Layout Module.</cite></a> 29 April 2010. W3C Working Draft. |
bert@3956 | 3480 | (Work in progress.) URL: <a |
bert@3956 | 3481 | href="http://www.w3.org/TR/2010/WD-css3-layout-20100429">http://www.w3.org/TR/2010/WD-css3-layout-20100429</a> |
bert@3956 | 3482 | </dd> |
bert@3956 | 3483 | <!----> |
bert@3956 | 3484 | |
vhardy@3130 | 3485 | <dt id=CSS3PAGE>[CSS3PAGE] |
vhardy@3130 | 3486 | |
vhardy@3130 | 3487 | <dd>Håkon Wium Lie; Melinda Grant. <a |
vhardy@3130 | 3488 | href="http://www.w3.org/TR/2006/WD-css3-page-20061010"><cite>CSS3 Module: |
vhardy@3130 | 3489 | Paged Media.</cite></a> 10 October 2006. W3C Working Draft. (Work in |
vhardy@3130 | 3490 | progress.) URL: <a |
vhardy@3130 | 3491 | href="http://www.w3.org/TR/2006/WD-css3-page-20061010">http://www.w3.org/TR/2006/WD-css3-page-20061010</a> |
vhardy@3130 | 3492 | </dd> |
vhardy@3130 | 3493 | <!----> |
vhardy@3130 | 3494 | |
vhardy@3130 | 3495 | <dt id=MEDIAQ>[MEDIAQ] |
vhardy@3130 | 3496 | |
vhardy@3130 | 3497 | <dd>Håkon Wium Lie; et al. <a |
vhardy@3130 | 3498 | href="http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/"><cite>Media |
vhardy@3130 | 3499 | Queries.</cite></a> 27 July 2010. W3C Candidate Recommendation. (Work in |
vhardy@3130 | 3500 | progress.) URL: <a |
vhardy@3130 | 3501 | href="http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/">http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/</a> |
vhardy@3130 | 3502 | </dd> |
vhardy@3130 | 3503 | <!----> |
vhardy@3130 | 3504 | </dl> |
vhardy@3130 | 3505 | <!--end-informative--> |
vhardy@3130 | 3506 | |
vhardy@3130 | 3507 | <h2 class=no-num id=index>Index</h2> |
vhardy@3130 | 3508 | <!--begin-index--> |
vhardy@3130 | 3509 | |
vhardy@3130 | 3510 | <ul class=indexlist> |
vhardy@3130 | 3511 | <li>break-after, <a href="#break-after" |
vhardy@5289 | 3512 | title=break-after><strong>3.3.</strong></a> |
vhardy@3130 | 3513 | |
vhardy@3130 | 3514 | <li>break-before, <a href="#break-before" |
vhardy@5289 | 3515 | title=break-before><strong>3.3.</strong></a> |
vhardy@3130 | 3516 | |
vhardy@3130 | 3517 | <li>break-inside, <a href="#break-inside" |
vhardy@5289 | 3518 | title=break-inside><strong>3.3.</strong></a> |
vhardy@3130 | 3519 | |
vhardy@3130 | 3520 | <li>current-region, <a href="#current-region" |
vhardy@3301 | 3521 | title=current-region><strong>2.3.</strong></a> |
vhardy@3130 | 3522 | |
vhardy@5349 | 3523 | <li>firstEmptyRegionIndex, <a |
vhardy@5349 | 3524 | href="#dom-named-flow-first-empty-region-index" |
vhardy@5337 | 3525 | title=firstEmptyRegionIndex><strong>6.1.</strong></a> |
vhardy@5264 | 3526 | |
vhardy@5255 | 3527 | <li>flowFrom, <a href="#dom-region-flowfrom" |
vhardy@5289 | 3528 | title=flowFrom><strong>6.2.</strong></a> |
vhardy@5255 | 3529 | |
vhardy@3547 | 3530 | <li>flow-from, <a href="#flow-from" |
vhardy@5289 | 3531 | title=flow-from><strong>3.2.</strong></a> |
vhardy@3277 | 3532 | |
vhardy@3277 | 3533 | <li>flow-into, <a href="#flow-into" |
vhardy@5289 | 3534 | title=flow-into><strong>3.1.</strong></a> |
vhardy@3130 | 3535 | |
vhardy@5349 | 3536 | <li>getContent(), <a href="#dom-named-flow-get-content" |
vhardy@5289 | 3537 | title="getContent()"><strong>6.1.</strong></a> |
vhardy@5255 | 3538 | |
vhardy@5349 | 3539 | <li><a href="#document-getflowbyname"><code |
vhardy@5349 | 3540 | class=idl>getFlowByName</code></a>, <a href="#document-getflowbyname" |
vhardy@5349 | 3541 | title=getFlowByName><strong>6.1.</strong></a> |
vhardy@5349 | 3542 | |
vhardy@5255 | 3543 | <li>getRegionFlowRanges, <a href="#dom-region-getregionflowranges" |
vhardy@5289 | 3544 | title=getRegionFlowRanges><strong>6.2.</strong></a> |
vhardy@3130 | 3545 | |
vhardy@5349 | 3546 | <li><a href="#dom-named-flow-get-regions"><code |
vhardy@5349 | 3547 | class=idl>getRegions()</code></a>, <a href="#dom-named-flow-get-regions" |
vhardy@5289 | 3548 | title="getRegions()"><strong>6.1.</strong></a> |
vhardy@5255 | 3549 | |
vhardy@5255 | 3550 | <li>getRegionsByContent(), <a |
vhardy@5349 | 3551 | href="#dom-named-flow-get-regions-by-content" |
vhardy@5289 | 3552 | title="getRegionsByContent()"><strong>6.1.</strong></a> |
vhardy@3681 | 3553 | |
vhardy@5349 | 3554 | <li><a href="#dom-named-flow-collection-item"><code |
vhardy@4400 | 3555 | class=idl>item(index)</code></a>, <a |
vhardy@5349 | 3556 | href="#dom-named-flow-collection-item" |
vhardy@5289 | 3557 | title="item(index)"><strong>6.1.</strong></a> |
vhardy@4400 | 3558 | |
vhardy@5349 | 3559 | <li><a href="#dom-named-flow-collection-length"><code |
vhardy@5349 | 3560 | class=idl>length</code></a>, <a href="#dom-named-flow-collection-length" |
vhardy@5289 | 3561 | title=length><strong>6.1.</strong></a> |
vhardy@4400 | 3562 | |
vhardy@5349 | 3563 | <li><a href="#dom-named-flow-name"><code class=idl>name</code></a>, <a |
vhardy@5349 | 3564 | href="#dom-named-flow-name" title=name><strong>6.1.</strong></a> |
vhardy@5349 | 3565 | |
vhardy@5349 | 3566 | <li><a href="#dom-named-flow"><code class=idl>NamedFlow</code></a>, <a |
vhardy@5349 | 3567 | href="#dom-named-flow" title=NamedFlow><strong>6.1.</strong></a> |
vhardy@3130 | 3568 | |
vhardy@3940 | 3569 | <li>named flow, <a href="#named-flow0" |
vhardy@3940 | 3570 | title="named flow"><strong>2.2.</strong></a> |
vhardy@3940 | 3571 | |
vhardy@5349 | 3572 | <li><a href="#dom-named-flow-collection"><code |
vhardy@4400 | 3573 | class=idl>NamedFlowCollection</code></a>, <a |
vhardy@5349 | 3574 | href="#dom-named-flow-collection" |
vhardy@5289 | 3575 | title=NamedFlowCollection><strong>6.1.</strong></a> |
vhardy@4400 | 3576 | |
vhardy@5349 | 3577 | <li><a href="#document-namedflows"><code class=idl>namedFlows</code></a>, |
vhardy@5349 | 3578 | <a href="#document-namedflows" title=namedFlows><strong>6.1.</strong></a> |
vhardy@5349 | 3579 | |
vhardy@5349 | 3580 | |
vhardy@5349 | 3581 | <li><a href="#dom-named-flow-overset"><code class=idl>overset</code></a>, |
vhardy@5349 | 3582 | <a href="#dom-named-flow-overset" title=overset><strong>6.1.</strong></a> |
vhardy@5349 | 3583 | |
vhardy@3277 | 3584 | |
vhardy@3277 | 3585 | <li>region, <a href="#region" title=region>2.1.</a> |
vhardy@3130 | 3586 | |
vhardy@5255 | 3587 | <li><code class=idl>Region</code> interface, <a href="#region-interface" |
vhardy@5289 | 3588 | title="Region interface"><strong>6.2.</strong></a> |
vhardy@3130 | 3589 | |
vhardy@3130 | 3590 | <li>region-overflow, <a href="#region-overflow" |
vhardy@5289 | 3591 | title=region-overflow><strong>3.4.</strong></a> |
vhardy@3130 | 3592 | |
vhardy@5255 | 3593 | <li><a href="#dom-region-regionoverset"><code |
vhardy@5255 | 3594 | class=idl>regionOverset</code></a>, <a href="#dom-region-regionoverset" |
vhardy@5289 | 3595 | title=regionOverset><strong>6.2.</strong></a> |
vhardy@5255 | 3596 | |
vhardy@3660 | 3597 | <li>specified flow, <a href="#specified-flow" |
vhardy@5289 | 3598 | title="specified flow"><strong>3.1.</strong></a> |
vhardy@3130 | 3599 | </ul> |
vhardy@3130 | 3600 | <!--end-index--> |
vhardy@3130 | 3601 | |
vhardy@3130 | 3602 | <h2 class=no-num id=property-index>Property index</h2> |
vhardy@4412 | 3603 | <!-- template markup for issues pulled from Bugzilla --> |
vhardy@4412 | 3604 | <script id=issue-template type="text/template"> |
vhardy@4412 | 3605 | </script> |
vhardy@4412 | 3606 | |
vhardy@4412 | 3607 | <div class=issue-marker data-bug_id="{{bug_id}}" |
vhardy@4678 | 3608 | data-bug_status="{{bug_status}}" style="display:none"> <a |
vhardy@4412 | 3609 | href="https://www.w3.org/Bugs/Public/show_bug.cgi?id={{bug_id}}">Bug-{{bug_id}}</a> |
vhardy@4412 | 3610 | |
vhardy@4412 | 3611 | <div class=issue-details> |
vhardy@4412 | 3612 | <p class=short-desc>{{short_desc}}</p> |
vhardy@4412 | 3613 | </div> |
vhardy@4412 | 3614 | </div> |
vhardy@4437 | 3615 | <script src=BugzillaTracker.js type="text/javascript"></script> |
vhardy@4437 | 3616 | <script src=BugzillaTrackerCSSRegions.js type="text/javascript"></script> |
vhardy@4412 | 3617 | |
vhardy@4412 | 3618 | <div id=issue-manager> |
vhardy@5289 | 3619 | <h2 id=issue-manager0><span class=secno>13. </span>Issue manager</h2> |
vhardy@4412 | 3620 | |
vhardy@4412 | 3621 | <form action="#"></form> |
vhardy@4412 | 3622 | <label> <input checked name=issue-filter type=radio value=all> All issues |
vhardy@4412 | 3623 | </label> <label> <input name=issue-filter type=radio value=updated> |
vhardy@4412 | 3624 | Updated issues </label> <label> <input name=issue-filter type=radio |
vhardy@4412 | 3625 | value=new> New issues </label> |
vhardy@4412 | 3626 | <!-- all the bugs are dumped the #issue-list after being retreived and matched to the ones in the page --> |
vhardy@4412 | 3627 | |
vhardy@4412 | 3628 | <div id=issue-list></div> |
vhardy@4412 | 3629 | </div> |
vhardy@3547 | 3630 | </html> |
vhardy@3547 | 3631 | <!-- Keep this comment at the end of the file |
vhardy@3130 | 3632 | Local variables: |
vhardy@3130 | 3633 | mode: sgml |
vhardy@3130 | 3634 | sgml-declaration:"~/SGML/HTML4.decl" |
vhardy@3130 | 3635 | sgml-default-doctype-name:"html" |
vhardy@3130 | 3636 | sgml-minimize-attributes:t |
vhardy@3130 | 3637 | sgml-nofill-elements:("pre" "style" "br") |
vhardy@3130 | 3638 | sgml-live-element-indicator:t |
vhardy@3130 | 3639 | sgml-omittag:nil |
vhardy@3130 | 3640 | sgml-shorttag:nil |
vhardy@3130 | 3641 | sgml-namecase-general:t |
vhardy@3130 | 3642 | sgml-general-insert-case:lower |
vhardy@3130 | 3643 | sgml-always-quote-attributes:t |
vhardy@3130 | 3644 | sgml-indent-step:nil |
vhardy@3130 | 3645 | sgml-indent-data:t |
vhardy@3130 | 3646 | sgml-parent-document:nil |
vhardy@3130 | 3647 | sgml-exposed-tags:nil |
vhardy@3130 | 3648 | sgml-local-catalogs:nil |
vhardy@3130 | 3649 | sgml-local-ecat-files:nil |
vhardy@3130 | 3650 | End: |
vhardy@3130 | 3651 | --> |