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' |
vhardy@3547 | 2 | 'http://www.w3.org/TR/html4/strict.dtd'> |
vhardy@3547 | 3 | <html lang="en"> |
vhardy@3547 | 4 | <head profile="http://www.w3.org/2006/03/hcard"> |
vhardy@3547 | 5 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
vhardy@3548 | 6 | <title>CSS Regions Module Level 3</title> |
vhardy@5373 | 7 | <link rel="stylesheet" type="text/css" href="../default.css"> |
vhardy@2779 | 8 | |
vhardy@3660 | 9 | <style type="text/css"> |
vhardy@3732 | 10 | |
vhardy@3732 | 11 | /* Alternate stylesheet fonts are here because in some browsers (Opera 11.5) */ |
vhardy@3732 | 12 | /* The fonts are not applied if only loaded from the alternate stylesheet */ |
vhardy@3972 | 13 | |
vhardy@3972 | 14 | /* License font the following two fonts: fonts/Droid-Serif-fontfacekit/Google Android License.txt */ |
vhardy@3972 | 15 | @import url(fonts/Droid-Serif-fontfacekit/stylesheet.css); |
vhardy@3972 | 16 | @import url(fonts/Droid-Sans-Mono-fontfacekit/stylesheet.css); |
vhardy@3732 | 17 | |
vhardy@3660 | 18 | a.toggle { |
vhardy@3660 | 19 | position: fixed; |
vhardy@3660 | 20 | top: 0.5em; |
vhardy@3660 | 21 | right: 0.5em; |
vhardy@3660 | 22 | font-size: smaller; |
vhardy@3660 | 23 | color: gray; |
vhardy@3660 | 24 | opacity: 0.2; |
vhardy@3660 | 25 | } |
vhardy@3660 | 26 | |
vhardy@3660 | 27 | a.toggle:hover { |
vhardy@3660 | 28 | opacity: 1; |
vhardy@3660 | 29 | color: #46A4E9; |
vhardy@3660 | 30 | } |
vhardy@3728 | 31 | |
vhardy@3728 | 32 | .issue.resolved, .issue.stale, .issue.moved { |
vhardy@3728 | 33 | display: none; |
vhardy@3728 | 34 | } |
vhardy@3973 | 35 | |
vhardy@3973 | 36 | |
vhardy@3973 | 37 | #region-style-example p, #region-style-example pre { |
vhardy@3973 | 38 | clear: both; |
vhardy@3973 | 39 | } |
vhardy@3973 | 40 | |
vhardy@3973 | 41 | #region_styling_illustration { |
vhardy@3973 | 42 | margin: 0px auto; |
vhardy@3973 | 43 | width: 70ex; |
vhardy@3973 | 44 | } |
vhardy@3977 | 45 | |
vhardy@3977 | 46 | .big.note { |
vhardy@3977 | 47 | font-size: 1.2em; |
vhardy@3977 | 48 | line-height: 1.3em; |
vhardy@3977 | 49 | color: #2f2f2f; |
vhardy@3973 | 50 | } |
vhardy@3977 | 51 | |
vhardy@4119 | 52 | #mobile-logo { |
vhardy@4119 | 53 | display: none; |
vhardy@4119 | 54 | } |
vhardy@4395 | 55 | |
vhardy@4412 | 56 | @media screen and (min-width: 68em){ |
vhardy@4412 | 57 | |
vhardy@4395 | 58 | .issue-marker { |
vhardy@4395 | 59 | position: absolute; |
vhardy@4395 | 60 | width: 20ex; |
vhardy@4395 | 61 | margin-left: -22ex; |
vhardy@4395 | 62 | text-align: right; |
vhardy@4412 | 63 | margin-bottom: 1em; |
vhardy@4412 | 64 | } |
vhardy@4412 | 65 | |
vhardy@4412 | 66 | div.issue-marker .issue-marker { |
vhardy@4412 | 67 | position: static; |
vhardy@4412 | 68 | width: auto; |
vhardy@4412 | 69 | margin-left: 0; |
vhardy@4412 | 70 | text-align: right; |
vhardy@4412 | 71 | } |
vhardy@4412 | 72 | |
vhardy@4412 | 73 | div.issue-marker { |
vhardy@4412 | 74 | position: absolute; |
vhardy@4412 | 75 | width: 20ex; |
vhardy@4412 | 76 | margin-left: -22ex; |
vhardy@4395 | 77 | } |
vhardy@4395 | 78 | } |
vhardy@4395 | 79 | |
vhardy@4400 | 80 | @media screen and (max-width: 68em){ |
vhardy@4395 | 81 | .issue-marker { |
vhardy@4412 | 82 | margin-bottom: 1em; |
vhardy@4395 | 83 | } |
vhardy@4395 | 84 | |
vhardy@4395 | 85 | .issue-marker a:link { |
vhardy@4395 | 86 | padding-left: 0.5em; |
vhardy@4395 | 87 | } |
vhardy@4412 | 88 | } |
vhardy@4412 | 89 | |
vhardy@4412 | 90 | #issue-manager form{ |
vhardy@4412 | 91 | background: #eee; |
vhardy@4412 | 92 | padding:10px 1em; |
vhardy@4395 | 93 | } |
vhardy@4412 | 94 | |
vhardy@4412 | 95 | /* hide all non-"updated" issues */ |
vhardy@4412 | 96 | #issue-manager[data-view_state="updated"] #issue-list>div:not([data-issue_state="updated"]){ |
vhardy@4412 | 97 | display:none; |
vhardy@4412 | 98 | } |
vhardy@4412 | 99 | |
vhardy@4412 | 100 | /* hide all non-"new" issues */ |
vhardy@4412 | 101 | #issue-manager[data-view_state="new"] #issue-list>div:not([data-issue_state="new"]){ |
vhardy@4412 | 102 | display:none; |
vhardy@4412 | 103 | } |
vhardy@4412 | 104 | |
vhardy@4412 | 105 | #issue-manager .issue-marker{ |
vhardy@4412 | 106 | background: none; |
vhardy@4412 | 107 | position: relative; |
vhardy@4412 | 108 | margin:0; |
vhardy@4412 | 109 | width:auto; |
vhardy@4412 | 110 | text-align:left; |
vhardy@4412 | 111 | padding:0.5em 0; |
vhardy@4412 | 112 | } |
vhardy@4412 | 113 | |
vhardy@4412 | 114 | #issue-manager .issue-marker a:link{ |
vhardy@4412 | 115 | padding:0.5em; |
vhardy@4412 | 116 | } |
vhardy@4412 | 117 | |
vhardy@4412 | 118 | #issue-list div[data-issue_state="new"]{ |
vhardy@4412 | 119 | background:#C1FFC1; |
vhardy@4412 | 120 | } |
vhardy@4395 | 121 | |
vhardy@4412 | 122 | #issue-list div[data-issue_state="resolved"]{ |
vhardy@4412 | 123 | background:white; |
vhardy@4412 | 124 | color: #a0a0a0; |
vhardy@4412 | 125 | } |
vhardy@4395 | 126 | |
vhardy@4412 | 127 | #issue-list div[data-issue_state="updated"]{ |
vhardy@4412 | 128 | background:papayawhip; |
vhardy@4412 | 129 | } |
vhardy@4412 | 130 | |
vhardy@4412 | 131 | #issue-list{ |
vhardy@4412 | 132 | margin-top:20px; |
vhardy@4412 | 133 | } |
vhardy@4395 | 134 | |
vhardy@4412 | 135 | #issue-list pre{ |
vhardy@4412 | 136 | padding:1em; |
vhardy@4412 | 137 | margin:0; |
vhardy@4412 | 138 | } |
vhardy@4412 | 139 | |
vhardy@4412 | 140 | #issue-list>div{ |
vhardy@4412 | 141 | position:relative; |
vhardy@4412 | 142 | } |
vhardy@4412 | 143 | |
vhardy@4412 | 144 | #issue-list a.issue-markup-trigger{ |
vhardy@4412 | 145 | font-size: 0.8em; |
vhardy@4412 | 146 | padding: 0.2em 0.5em; |
vhardy@4412 | 147 | background: #eee; |
vhardy@4412 | 148 | text-decoration: none; |
vhardy@4412 | 149 | color: #444; |
vhardy@4412 | 150 | position: absolute; |
vhardy@4412 | 151 | right: 10px; |
vhardy@4412 | 152 | top: 10px; |
vhardy@4412 | 153 | z-index: 1; |
vhardy@4412 | 154 | } |
vhardy@4412 | 155 | |
vhardy@4412 | 156 | #issue-list a.issue-markup-trigger:hover{ |
vhardy@4412 | 157 | background: #ddd; |
vhardy@4412 | 158 | color: #000; |
vhardy@4412 | 159 | } |
vhardy@4412 | 160 | |
vhardy@4412 | 161 | #issue-list .showMarkup pre{ |
vhardy@4412 | 162 | display: block; |
vhardy@4412 | 163 | } |
vhardy@4412 | 164 | |
vhardy@4412 | 165 | #issue-list .showMarkup .issue-marker, |
vhardy@4412 | 166 | #issue-list pre{ |
vhardy@4412 | 167 | display: none; |
vhardy@4412 | 168 | } |
vhardy@4412 | 169 | |
vhardy@4395 | 170 | .issue-marker { |
vhardy@4395 | 171 | background:#eee; |
vhardy@4395 | 172 | border:1px solid #ddd; |
vhardy@4395 | 173 | font-size: 1em; |
vhardy@4395 | 174 | } |
vhardy@4412 | 175 | |
vhardy@4412 | 176 | .issue-marker.wrapper { |
vhardy@4412 | 177 | background: none; |
vhardy@4412 | 178 | border: none; |
vhardy@4412 | 179 | } |
vhardy@4395 | 180 | |
vhardy@4395 | 181 | .issue-marker a:link { |
vhardy@4395 | 182 | color: #c00; |
vhardy@4395 | 183 | background: none; |
vhardy@4395 | 184 | font-weight: normal; |
vhardy@4395 | 185 | padding-right: 0.5em; |
vhardy@4395 | 186 | } |
vhardy@4395 | 187 | |
vhardy@4395 | 188 | .issue-details { |
vhardy@4395 | 189 | padding:0.5em; |
vhardy@4395 | 190 | font-size: 0.8em; |
vhardy@4395 | 191 | line-height: 1.5; |
vhardy@4395 | 192 | } |
vhardy@4395 | 193 | |
vhardy@4395 | 194 | .issue-details p{ |
vhardy@4395 | 195 | padding:0; |
vhardy@4395 | 196 | margin:0; |
vhardy@4395 | 197 | } |
vhardy@4395 | 198 | |
vhardy@4395 | 199 | .issue-details .status{ |
vhardy@4395 | 200 | background:#333; |
vhardy@4395 | 201 | color:white; |
vhardy@4395 | 202 | float:left; |
vhardy@4395 | 203 | padding:0.15em 0.8em; |
vhardy@4395 | 204 | font-size:0.8em; |
vhardy@4395 | 205 | margin-right:0.8em; |
vhardy@4395 | 206 | text-transform:uppercase; |
vhardy@4395 | 207 | } |
vhardy@3660 | 208 | </style> |
vhardy@3973 | 209 | |
vhardy@3973 | 210 | <link rel="stylesheet" type="text/css" |
bert@3953 | 211 | href="http://www.w3.org/StyleSheets/TR/W3C-ED.css"> |
vhardy@3972 | 212 | |
vhardy@4397 | 213 | <link id="st" href="../alternate-spec-style.css" rel="stylesheet" |
vhardy@4119 | 214 | type="text/css" title="alternate spec style"> |
vhardy@2779 | 215 | </head> |
vhardy@2779 | 216 | |
vhardy@3547 | 217 | |
vhardy@2779 | 218 | <body> |
vhardy@2779 | 219 | <div class="head" id="div-head"> |
vhardy@4119 | 220 | <p><a href="http://www.w3.org/"><img id="mobile-logo" alt="W3C" height="53" src= |
vhardy@4119 | 221 | "http://www.w3.org/2008/site/images/logo-w3c-mobile-lg" width="90"></a> |
vhardy@4119 | 222 | |
vhardy@4119 | 223 | |
vhardy@2779 | 224 | <!--begin-logo--> |
vhardy@2779 | 225 | |
vhardy@4119 | 226 | <p><a href="http://www.w3.org/"><img id="logo" alt="W3C" height="48" src= |
vhardy@2779 | 227 | "http://www.w3.org/Icons/w3c_home" width="72"></a> <!--end-logo--></p> |
vhardy@2779 | 228 | |
bert@3938 | 229 | <h1 id="css-regions-module">CSS Regions Module Level 3</h1> |
vhardy@2779 | 230 | |
bert@3938 | 231 | <h2 class="no-num no-toc" id="longstatus-date">[LONGSTATUS] |
vhardy@2779 | 232 | [DATE]</h2> |
vhardy@2779 | 233 | |
vhardy@2779 | 234 | <dl> |
vhardy@2779 | 235 | <dt>This version:</dt> |
vhardy@2779 | 236 | |
vhardy@2779 | 237 | <dd><a href= |
vhardy@3073 | 238 | "[VERSION]">http://www.w3.org/csswg/css3-regions</a></dd> |
vhardy@2779 | 239 | |
vhardy@2779 | 240 | <dt>Latest version:</dt> |
vhardy@2779 | 241 | |
vhardy@2779 | 242 | <dd><a href= |
bert@3938 | 243 | "http://www.w3.org/TR/css3-regions/">http://www.w3.org/TR/css3-regions/</a></dd> |
vhardy@2779 | 244 | |
vhardy@2779 | 245 | <dt>Previous version:</dt> |
vhardy@2779 | 246 | |
vhardy@4397 | 247 | <dd><a href="http://www.w3.org/TR/2011/WD-css3-regions-20111129/">http://www.w3.org/TR/2011/WD-css3-regions-20111129/</a></dd> |
vhardy@4395 | 248 | |
vhardy@2779 | 249 | <dt>Editors:</dt> |
vhardy@2779 | 250 | |
vhardy@2779 | 251 | <dd class="vcard"><span class="fn">Vincent Hardy</span>, |
vhardy@2779 | 252 | <span class="org">Adobe Systems, Inc.</span>, <span class= |
vhardy@2779 | 253 | "email">vhardy@adobe.com</span></dd> |
vhardy@3073 | 254 | <dd class="vcard"><span class="fn">Alex Mogilevsky</span>, |
vhardy@3073 | 255 | <span class="org">Microsoft</span>, <span class= |
vhardy@3073 | 256 | "email">alexmog@microsoft.com</span></dd> |
vhardy@4679 | 257 | |
vhardy@4679 | 258 | <dt>Issues List:</dt> |
stearns@5453 | 259 | <dd><a href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&component=Regions&resolution=---">Bugzilla Bugs for CSS regions</a></dd> |
vhardy@4679 | 260 | <dt>Discussion:</dt> |
vhardy@4679 | 261 | <dd><a href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> with subject line "<code>[css3-regions] message topic</code>"</dd> |
vhardy@2779 | 262 | </dl><!--begin-copyright--><!--end-copyright--> |
vhardy@2779 | 263 | <hr title="Separator for header"> |
vhardy@2779 | 264 | </div> |
vhardy@4395 | 265 | |
vhardy@2779 | 266 | <h2 class="no-num no-toc" id="abstract">Abstract</h2> |
vhardy@3277 | 267 | |
vhardy@3301 | 268 | <p>The CSS regions module allows content to flow across multiple areas |
vhardy@3549 | 269 | called regions. The regions are not necessarily contiguous in the document order. |
vhardy@3301 | 270 | The CSS regions module provides an advanced content flow mechanism, which |
vhardy@2791 | 271 | can be combined with positioning schemes as defined by other CSS modules |
vhardy@3073 | 272 | such as the Multi-Column Module [[CSS3COL]] or the Grid Layout Module |
vhardy@2791 | 273 | [[CSS3-GRID-LAYOUT]] to position the regions where content flows.</p> |
vhardy@2779 | 274 | |
vhardy@2945 | 275 | <h2 class="no-num no-toc" id="status-of-this-document">Status of this |
vhardy@3977 | 276 | document</h2> |
vhardy@3977 | 277 | |
vhardy@4314 | 278 | <p class="big note"><span class="note-prefix">Note </span>This document uses an experimental style |
vhardy@3977 | 279 | sheet. We welcome your feedback on the styles at |
vhardy@3977 | 280 | <a href="mailto:site-comments@w3.org">site-comments@w3.org</a>.</p> |
vhardy@3977 | 281 | |
vhardy@3977 | 282 | <!--begin-status--> |
vhardy@2779 | 283 | <p><em>This section describes the status of this document at the time of |
vhardy@2779 | 284 | its publication. Other documents may supersede this document. A list of |
vhardy@2779 | 285 | current W3C publications and the latest revision of this technical report |
vhardy@2779 | 286 | can be found in the <a href="http://www.w3.org/TR/">W3C technical reports |
vhardy@2779 | 287 | index at http://www.w3.org/TR/.</a></em></p> |
vhardy@2779 | 288 | |
vhardy@2779 | 289 | <p>This is a public copy of the editors' draft. It is provided for |
vhardy@2779 | 290 | discussion only and may change at any moment. Its publication here does not |
vhardy@2779 | 291 | imply endorsement of its contents by W3C. Don't cite this document other |
vhardy@2779 | 292 | than as work in progress.</p> |
vhardy@2779 | 293 | |
vhardy@2779 | 294 | <p>The archived public mailing list www-style@w3.org is preferred for |
vhardy@2779 | 295 | discussion of this specification. When sending e-mail, please put the text |
vhardy@2779 | 296 | "css3-regions" in the subject, preferably like this: "[css3-regions] |
vhardy@2779 | 297 | …summary of comment…"</p> |
bert@3938 | 298 | <!--end-status--> |
vhardy@2779 | 299 | |
bert@3953 | 300 | <p>This draft is related to the drafts about Multi-column Layout |
bert@3953 | 301 | [[CSS3COL]], Grid Layout [[CSS3GRID]], Flexible Box Layout |
bert@3953 | 302 | [[CSS3-FLEXBOX]], and Template Layout [[CSS3LAYOUT]].</p> |
vhardy@2779 | 303 | |
vhardy@2945 | 304 | <h2 class="no-num no-toc" id="table-of-contents">Table of contents</h2> |
vhardy@2779 | 305 | <!--begin-toc--><!--end-toc--> |
vhardy@2779 | 306 | |
vhardy@2779 | 307 | <h2 id="introduction">Introduction</h2> |
vhardy@2779 | 308 | |
vhardy@3073 | 309 | <p><em>This section is non-normative.</em></p> |
vhardy@4395 | 310 | |
stearns@5445 | 311 | <p>Displaying the complex layouts |
stearns@5445 | 312 | of a typical magazine, newspaper, or textbook on the web |
stearns@5445 | 313 | requires capabilities beyond those available in existing CSS modules. |
stearns@5445 | 314 | Dynamic magazine layout in particular requires flexibility |
stearns@5445 | 315 | in placement of boxes for content flows. |
stearns@5445 | 316 | This is the purpose of the CSS regions module.</p> |
vhardy@4395 | 317 | |
vhardy@4412 | 318 | <div class="issue-marker" data-bug_id="15733" data-bug_status="NEW"> |
vhardy@4395 | 319 | <a href= |
vhardy@4404 | 320 | "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15733">Bug-15733</a> |
vhardy@2779 | 321 | |
vhardy@4395 | 322 | <div class="issue-details"> |
vhardy@4395 | 323 | <p class="short-desc">Should the region specification define a |
vhardy@4395 | 324 | mechanism to create blocks that can be regions with CSS |
vhardy@4395 | 325 | syntax?</p> |
vhardy@4395 | 326 | </div> |
vhardy@4395 | 327 | </div> |
vhardy@2779 | 328 | |
stearns@5445 | 329 | <p>For more complex layouts, |
stearns@5445 | 330 | content needs to flow from one area of the page to the next |
stearns@5445 | 331 | without limitation on the areas' sizes and positions. |
stearns@5445 | 332 | These arbitrary areas are the target of specific content flows |
stearns@5445 | 333 | which this document calls <span>named flows</span>. |
stearns@5445 | 334 | Each <span>named flow</span> can be associated |
stearns@5445 | 335 | with a set of CSS Regions called a region chain. |
stearns@5445 | 336 | CSS Regions are based on the rectangular geometry |
stearns@5445 | 337 | of the CSS box model. |
stearns@5445 | 338 | Elements in a <span>named flow</span> |
stearns@5445 | 339 | are taken out of the normal visual formatting |
stearns@5445 | 340 | and rendered in a chain of CSS Regions.</p> |
stearns@5445 | 341 | |
stearns@5445 | 342 | <h3 id="named-flows-and-regions">Named flows and region chains</h3> |
vhardy@2779 | 343 | |
vhardy@2779 | 344 | <p>Consider the layout illustrated in figure 1.</p> |
vhardy@2779 | 345 | |
vhardy@4395 | 346 | |
vhardy@2779 | 347 | <div class="figure"> |
vhardy@5373 | 348 | <img src="images/intro-example-layout.svg" width="400" alt= |
vhardy@2779 | 349 | "multiple chained regions which should receive content from a flow"> |
vhardy@2779 | 350 | |
vhardy@2779 | 351 | <p class="caption">Layout requiring sophisticated content flow</p> |
vhardy@2779 | 352 | </div> |
vhardy@4395 | 353 | |
stearns@5445 | 354 | <p>The designer's intent is |
stearns@5445 | 355 | to position an image in box 'A' |
stearns@5445 | 356 | and to flow an article's content |
stearns@5445 | 357 | from box '1' through boxes '2', '3' and '4'. |
stearns@5445 | 358 | Note that the second box should have two columns, |
stearns@5445 | 359 | and the image is not contained in the article. |
stearns@5445 | 360 | Box '4' should auto-size to render |
stearns@5445 | 361 | the remainder of the article content |
stearns@5445 | 362 | that did not fit in the earlier boxes.</p> |
vhardy@2779 | 363 | |
stearns@5423 | 364 | <p>Figure 2 shows an example |
stearns@5423 | 365 | of the intended visual rendering |
stearns@5423 | 366 | of the content.</p> |
alexmog@2565 | 367 | |
vhardy@2779 | 368 | <div class="figure"> |
vhardy@2779 | 369 | <img src="images/regions-intro-rendering.png" width="450" alt= |
vhardy@2779 | 370 | "Sample rendering showing a single thread of text flowing through a chain of regions"> |
alexmog@2565 | 371 | |
vhardy@2779 | 372 | <p class="caption">Sample rendering for desired layout</p> |
vhardy@2779 | 373 | </div> |
alexmog@2565 | 374 | |
vhardy@3940 | 375 | |
stearns@5445 | 376 | <p>There is no existing mechanism in CSS |
stearns@5445 | 377 | to associate the content with these boxes |
stearns@5445 | 378 | arranged in this manner |
stearns@5423 | 379 | so that content flows as intended. |
stearns@5423 | 380 | The CSS regions module properties provide that mechanism.</p> |
vhardy@4413 | 381 | |
stearns@5445 | 382 | <p>The following example illustrates |
stearns@5445 | 383 | how the content of an <code>article</code> element |
stearns@5445 | 384 | becomes a <span>named flow</span> |
stearns@5445 | 385 | and how boxes marked with 'region1', 'region2', 'region3' and 'region4' IDs |
stearns@5445 | 386 | become CSS Regions that consume the 'article_flow' content.</p> |
alexmog@2565 | 387 | |
vhardy@2779 | 388 | <div class="example"> |
stearns@5423 | 389 | <pre> |
vhardy@2779 | 390 | <style> |
stearns@5445 | 391 | article { |
stearns@5445 | 392 | <strong>flow-into: article_flow;</strong> |
stearns@5445 | 393 | } |
alexmog@2565 | 394 | |
stearns@5445 | 395 | #region1, #region2, #region3, #region4 { |
stearns@5445 | 396 | <strong>flow-from: article_flow;</strong> |
stearns@5445 | 397 | } |
vhardy@2779 | 398 | </style> |
stearns@5423 | 399 | </pre> |
vhardy@2779 | 400 | </div> |
vhardy@3301 | 401 | |
stearns@5423 | 402 | <p>The 'article_flow' value on the 'flow-into' property |
stearns@5445 | 403 | directs the <code>article</code> element |
stearns@5423 | 404 | to the 'article_flow' <span>named flow</span>. |
stearns@5445 | 405 | Setting the 'flow-from' property on stylable boxes |
stearns@5445 | 406 | to 'article_flow' makes them CSS Regions |
stearns@5445 | 407 | and associates the resulting region chain |
stearns@5423 | 408 | with the <span>named flow</span>: |
stearns@5423 | 409 | the flow is ''poured'' |
stearns@5445 | 410 | into the region chain.</p> |
alexmog@2565 | 411 | |
stearns@5445 | 412 | <p>See <a href="#intro-example-code">Appendix A</a> |
stearns@5445 | 413 | for sample code using grid layout |
stearns@5445 | 414 | that implements this example</p> |
vhardy@5373 | 415 | |
stearns@5445 | 416 | <div class="note"><span class="note-prefix">Note </span> |
stearns@5445 | 417 | <p><strong>CSS Regions are independent from layout</strong></p> |
stearns@5445 | 418 | |
stearns@5445 | 419 | <p>Any of the CSS layout facilities can be used |
stearns@5445 | 420 | to create, position and size boxes that can become CSS Regions. |
stearns@5445 | 421 | Using a grid layout [[CSS3-GRID-LAYOUT]] is just an example. |
stearns@5445 | 422 | The example could use |
stearns@5445 | 423 | a flexible box layout [[CSS3-FLEXBOX]] instead.</p> |
stearns@5445 | 424 | <p>The CSS regions specification does not |
stearns@5445 | 425 | define a layout mechanism |
stearns@5445 | 426 | and is meant to integrate |
stearns@5445 | 427 | with existing and future CSS layout facilities.</p> |
vhardy@5373 | 428 | |
stearns@5445 | 429 | <p><strong>CSS Regions do not have to be elements</strong></p> |
stearns@5445 | 430 | |
stearns@5445 | 431 | <p>The CSS regions module is independent |
stearns@5445 | 432 | of the layout of boxes and |
stearns@5445 | 433 | the mechanism used to create them. |
stearns@5445 | 434 | For simplicity, |
stearns@5445 | 435 | our example code in <a href="#intro-example-code">Appendix A</a> |
stearns@5445 | 436 | uses elements to define the boxes.</p> |
vhardy@5373 | 437 | |
vhardy@5373 | 438 | |
stearns@5445 | 439 | <p>While the example uses elements for CSS Regions |
stearns@5445 | 440 | (since [[CSS3-GRID-LAYOUT]] requires elements to create grid items) |
stearns@5445 | 441 | it is important to note that |
stearns@5445 | 442 | this is not required. |
stearns@5445 | 443 | CSS Regions can be pseudo-elements, |
stearns@5445 | 444 | such as '::before' and '::after'. |
stearns@5445 | 445 | The only requirement |
stearns@5445 | 446 | for an element or pseudo-element |
stearns@5445 | 447 | to become a CSS Region |
stearns@5445 | 448 | is that it needs to be subject |
stearns@5445 | 449 | to CSS styling |
stearns@5445 | 450 | to receive the 'flow-from' property. |
stearns@5445 | 451 | The CSS page template module |
stearns@5445 | 452 | (see [[CSS3-PAGE-TEMPLATE]]) |
stearns@5445 | 453 | proposes another mechanism |
stearns@5445 | 454 | to create stylable boxes that can become CSS Regions |
stearns@5445 | 455 | with the <code class="css">@slot</code> syntax.</p> |
vhardy@5373 | 456 | </div> |
vhardy@5373 | 457 | |
stearns@5445 | 458 | <h3 id="region-styling">CSS Region names and styling</h3> |
alexmog@2565 | 459 | |
stearns@5445 | 460 | <p>Content can be styled depending on |
stearns@5445 | 461 | the CSS Region it flows into. |
stearns@5445 | 462 | It is an extension |
stearns@5423 | 463 | of pseudo-element styling such as |
stearns@5423 | 464 | <a href="http://www.w3.org/TR/css3-selectors/#first-line"> |
stearns@5423 | 465 | <code class="css">::first-line</code> |
stearns@5423 | 466 | </a> |
stearns@5445 | 467 | which applies a particular style |
stearns@5423 | 468 | to a fragment of content. |
stearns@5445 | 469 | With CSS Region styling, |
stearns@5423 | 470 | additional selectors may apply |
stearns@5445 | 471 | depending on the CSS Region |
stearns@5423 | 472 | into which content flows.</p> |
alexmog@2565 | 473 | |
stearns@5423 | 474 | <p>In our example, |
stearns@5423 | 475 | the designer wants to make |
stearns@5445 | 476 | text flowing into #region1 |
stearns@5423 | 477 | dark blue and bold.</p> |
alexmog@2565 | 478 | |
stearns@5445 | 479 | <p>This design can be expressed as shown below.</p> |
alexmog@2565 | 480 | |
vhardy@2779 | 481 | <div class="example"> |
vhardy@2779 | 482 | <pre> |
vhardy@2779 | 483 | <style> |
stearns@5445 | 484 | #region1 { |
stearns@5445 | 485 | region-name: region1; |
stearns@5445 | 486 | } |
stearns@5445 | 487 | |
stearns@5445 | 488 | p::in-region(region1) { |
stearns@5423 | 489 | color: #0C3D5F; |
stearns@5423 | 490 | font-weight: bold; |
stearns@5423 | 491 | } |
stearns@5445 | 492 | </style> |
vhardy@4413 | 493 | |
stearns@5445 | 494 | TODO: This section is out of sync with section 3.5, |
stearns@5445 | 495 | which needs to be updated. |
stearns@5423 | 496 | </pre> |
vhardy@2779 | 497 | </div> |
alexmog@2565 | 498 | |
stearns@5445 | 499 | <p>The ::in-region(region1) pseudo-element |
stearns@5423 | 500 | limits its selectors to content |
stearns@5445 | 501 | flowing into #region1. |
stearns@5423 | 502 | The following figure shows how |
stearns@5423 | 503 | the rendering changes |
stearns@5445 | 504 | if we apply styling specific to #region1. |
stearns@5445 | 505 | Note how less text fits into this box |
stearns@5423 | 506 | now that the 'font-weight' is |
stearns@5423 | 507 | bold instead of normal.</p> |
vhardy@2945 | 508 | |
vhardy@2779 | 509 | <div class="figure"> |
vhardy@2779 | 510 | <img src="images/region-styling.png" width="450" alt= |
vhardy@2779 | 511 | "Illustrate how changing region styling affects the flow of content."> |
alexmog@2565 | 512 | |
vhardy@2779 | 513 | <p class="caption">Different rendering with a different region |
vhardy@2779 | 514 | styling</p> |
vhardy@2779 | 515 | </div> |
alexmog@2565 | 516 | |
vhardy@3272 | 517 | <h2 id="css-regions-concepts">CSS regions concepts</h2> |
alexmog@2565 | 518 | |
vhardy@3267 | 519 | <h3 id="regions">Regions</h3> |
alexmog@2565 | 520 | |
vhardy@4412 | 521 | <div class="issue-marker wrapper"> |
vhardy@4412 | 522 | <div class="issue-marker" data-bug_id="15186" data-bug_status="NEW"> |
vhardy@4395 | 523 | <a href= |
vhardy@4404 | 524 | "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15186">Bug-15186</a> |
vhardy@4395 | 525 | |
vhardy@4395 | 526 | <div class="issue-details"> |
vhardy@4395 | 527 | <p class="short-desc">Is a mechanism to auto-generate regions |
vhardy@4395 | 528 | necessary in order to support reusable style sheets?</p> |
vhardy@4395 | 529 | </div> |
vhardy@4395 | 530 | </div> |
vhardy@4395 | 531 | |
vhardy@4412 | 532 | <div class="issue-marker" data-bug_id="15187" data-bug_status="NEW"> |
vhardy@4412 | 533 | <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15187">Bug-15187</a> |
vhardy@4412 | 534 | <div class="issue-details"> |
vhardy@4412 | 535 | <p class="short-desc">Explain how regions and pages interact. How can regions be placed onto certain pages, and how can they be positiond wrt. pages.</p> |
vhardy@4412 | 536 | </div> |
vhardy@4412 | 537 | </div> |
vhardy@4412 | 538 | </div> |
vhardy@4412 | 539 | |
stearns@5445 | 540 | <p class="index" title="region" id="region"> |
stearns@5445 | 541 | A CSS Region is a stylable box |
stearns@5445 | 542 | that generates a |
stearns@5445 | 543 | <a href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes">block container box</a> |
stearns@5445 | 544 | and has an associated <em><span>named flow</span></em> |
stearns@5445 | 545 | (see the 'flow-from' property). |
stearns@5445 | 546 | The <a href="http://dev.w3.org/csswg/css3-multicol/#column-box">column boxes</a> |
stearns@5445 | 547 | of multi-column elements which have an associated <em><span>named flow</span></em> |
stearns@5445 | 548 | are also regions |
stearns@5445 | 549 | (see the <a href="#multi-column-regions">section on multi-column regions</a>).</p> |
vhardy@4395 | 550 | |
stearns@5445 | 551 | <h3 id="named-flow">Named flows</h3> |
vhardy@3267 | 552 | |
bert@3938 | 553 | <p>A <dfn>named flow</dfn> is the ordered sequence of elements |
stearns@5445 | 554 | associated with a flow with a given identifier. |
stearns@5445 | 555 | Elements in a <span>named flow</span> are ordered |
vhardy@3267 | 556 | according to the document order.</p> |
vhardy@3267 | 557 | |
stearns@5445 | 558 | <p>Elements are placed into a <span>named flow</span> |
stearns@5445 | 559 | with the 'flow-into' property. |
stearns@5445 | 560 | The elements in a <span>named flow</span> are laid out |
stearns@5445 | 561 | in the <span title="region-chain">region chain</span> |
stearns@5445 | 562 | that is associated with this <span>named flow</span>. |
stearns@5445 | 563 | <span title="region">CSS Regions</span> are organized |
stearns@5445 | 564 | into a <span title="region-chain">region chain</span> |
stearns@5445 | 565 | according to the document order.</p> |
vhardy@3267 | 566 | |
stearns@5445 | 567 | <p>Content from a <span>named flow</span> |
stearns@5445 | 568 | is broken up between regions |
stearns@5445 | 569 | according to the regions flow breaking rules.</p> |
vhardy@3267 | 570 | |
alexmog@2565 | 571 | |
vhardy@3272 | 572 | <h3 id="regions-flow-breaking-rules">Regions flow breaking rules</h3> |
alexmog@2565 | 573 | |
stearns@5445 | 574 | <p>Breaking a <span>named flow</span> across a region chain |
stearns@5445 | 575 | is similar to breaking a document's content across pages |
stearns@5445 | 576 | (see [[CSS3PAGE]]) |
stearns@5445 | 577 | or a multi-column element's content across column boxes |
stearns@5445 | 578 | (see [[CSS3COL]]). |
stearns@5445 | 579 | One difference is that page boxes are generated |
stearns@5445 | 580 | based on the available content |
stearns@5445 | 581 | whereas a region chain is a set of recipient boxes |
stearns@5445 | 582 | for the <span>named flow</span> content |
stearns@5445 | 583 | whose dynamic generation is not in the scope |
stearns@5445 | 584 | of this specification.</p> |
alexmog@2565 | 585 | |
stearns@5445 | 586 | <p>Each CSS Region in turn |
stearns@5445 | 587 | consumes content from its associated <span>named flow</span>. |
stearns@5445 | 588 | The <span>named flow</span> content is positioned |
stearns@5445 | 589 | in the <dfn title="current-region">current region</dfn> |
stearns@5445 | 590 | until a natural or forced region break occurs, |
stearns@5445 | 591 | at which point the next region |
stearns@5445 | 592 | in the <span title="region-chain">region chain</span> |
stearns@5445 | 593 | becomes the <span title="current-region">current region</span>. |
stearns@5445 | 594 | If there are no more <span>region</span>s |
stearns@5445 | 595 | in the region chain |
stearns@5445 | 596 | and there is still content in the flow, |
stearns@5445 | 597 | the positioning of the remaining content |
stearns@5445 | 598 | is controlled by the 'region-overflow' property |
stearns@5445 | 599 | on the last <span>region</span> in the chain.</p> |
vhardy@5373 | 600 | |
stearns@5445 | 601 | <p>The CSS regions module follows |
stearns@5445 | 602 | the fragmentation rules defined |
stearns@5445 | 603 | in the CSS Fragmentation Module Level 3 |
stearns@5445 | 604 | (see [[!CSS3-BREAK]]).</p> |
vhardy@2945 | 605 | |
alexmog@2565 | 606 | |
vhardy@3272 | 607 | <h2 id="properties-and-rules">Properties and rules</h2> |
alexmog@2565 | 608 | |
vhardy@3262 | 609 | <h3 id="the-flow-into-property">The 'flow-into' property</h3> |
alexmog@2565 | 610 | |
vhardy@4412 | 611 | <div class="issue-marker" data-bug_id="15811" data-bug_status="NEW"> |
vhardy@4398 | 612 | <a href= |
vhardy@4404 | 613 | "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15811">Bug-15811</a> |
vhardy@4398 | 614 | |
vhardy@4398 | 615 | <div class="issue-details"> |
vhardy@4398 | 616 | <p class="short-desc">Creating a named flow from external resource</p> |
vhardy@4398 | 617 | </div> |
vhardy@4398 | 618 | </div> |
vhardy@4398 | 619 | |
vhardy@4398 | 620 | |
stearns@5453 | 621 | <p>The ‘flow-into’ property can place an element |
stearns@5453 | 622 | into a <span>named flow</span>. |
stearns@5453 | 623 | Elements that belong to the same flow |
stearns@5453 | 624 | are laid out in the region chain |
stearns@5453 | 625 | associated with that flow.</p> |
alexmog@2565 | 626 | |
vhardy@2779 | 627 | <table class="propdef" summary="flow property definition"> |
vhardy@2779 | 628 | <tr> |
vhardy@2779 | 629 | <th>Name:</th> |
alexmog@2565 | 630 | |
vhardy@3272 | 631 | <td><dfn id="flow-into">flow-into</dfn></td> |
vhardy@2779 | 632 | </tr> |
alexmog@2565 | 633 | |
vhardy@2779 | 634 | <tr> |
vhardy@2779 | 635 | <th>Value:</th> |
alexmog@2565 | 636 | |
vhardy@3660 | 637 | <td><ident> | none | inherit</td> |
vhardy@2779 | 638 | </tr> |
alexmog@2565 | 639 | |
vhardy@2779 | 640 | <tr> |
vhardy@2779 | 641 | <th>Initial:</th> |
alexmog@2565 | 642 | |
vhardy@3660 | 643 | <td>none</td> |
vhardy@2779 | 644 | </tr> |
alexmog@2565 | 645 | |
vhardy@2779 | 646 | <tr> |
vhardy@2779 | 647 | <th>Applies to:</th> |
alexmog@2565 | 648 | |
vhardy@5267 | 649 | <td>any element. <p>The 'flow-into' property does not apply to any <a href="http://www.w3.org/TR/selectors/#pseudo-elements">pseudo-element</a> such as |
vhardy@5267 | 650 | <code class="css">::first-line</code>, <code class="css">::first-letter</code>, |
vhardy@5267 | 651 | <code class="css">::before</code> or <code class="css">::after</code>.</p></td> |
vhardy@2779 | 652 | </tr> |
alexmog@2565 | 653 | |
vhardy@2779 | 654 | <tr> |
vhardy@2779 | 655 | <th>Inherited:</th> |
alexmog@2565 | 656 | |
vhardy@2779 | 657 | <td>no</td> |
vhardy@2779 | 658 | </tr> |
alexmog@2565 | 659 | |
vhardy@2779 | 660 | <tr> |
vhardy@2779 | 661 | <th>Percentages:</th> |
alexmog@2565 | 662 | |
vhardy@2779 | 663 | <td>N/A</td> |
vhardy@2779 | 664 | </tr> |
alexmog@2565 | 665 | |
vhardy@2779 | 666 | <tr> |
vhardy@2779 | 667 | <th>Media:</th> |
alexmog@2565 | 668 | |
vhardy@2779 | 669 | <td>visual</td> |
vhardy@2779 | 670 | </tr> |
alexmog@2565 | 671 | |
vhardy@2779 | 672 | <tr> |
vhardy@2779 | 673 | <th>Computed value:</th> |
alexmog@2565 | 674 | |
vhardy@2779 | 675 | <td>as specified</td> |
vhardy@2779 | 676 | </tr> |
vhardy@2779 | 677 | </table> |
alexmog@2565 | 678 | |
vhardy@2779 | 679 | <dl> |
vhardy@3660 | 680 | <dt>none</dt> |
alexmog@2565 | 681 | |
vhardy@5352 | 682 | <dd>The element is not moved to a <span>named flow</span> and normal CSS processing takes place.</dd> |
alexmog@2565 | 683 | |
vhardy@3073 | 684 | <dt><a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier"><ident></a></dt> |
alexmog@2565 | 685 | |
stearns@5453 | 686 | <dd>The element is taken out |
stearns@5453 | 687 | of its parent's flow |
stearns@5453 | 688 | and placed into the flow |
stearns@5453 | 689 | with the name '<ident>'. |
stearns@5453 | 690 | The element is said to have |
stearns@5453 | 691 | a <dfn id="specified-flow">specified flow</dfn>. |
stearns@5453 | 692 | The values 'none', 'inherit', 'default', 'auto' and 'initial' |
stearns@5453 | 693 | are invalid flow names.</dd> |
vhardy@2779 | 694 | </dl> |
alexmog@2565 | 695 | |
stearns@5453 | 696 | <p>A <span>named flow</span> needs to be associated |
stearns@5453 | 697 | with a region chain |
stearns@5453 | 698 | (one or more CSS regions) |
stearns@5453 | 699 | for its elements to be visually formatted. |
stearns@5453 | 700 | If no region chain is associated |
stearns@5453 | 701 | with a given <span>named flow</span>, |
stearns@5453 | 702 | the elements in the <span>named flow</span> |
stearns@5453 | 703 | are not rendered: |
stearns@5453 | 704 | they do not generate boxes |
stearns@5453 | 705 | and are not displayed.</p> |
alexmog@2565 | 706 | |
stearns@5453 | 707 | <p>The children of an element |
stearns@5453 | 708 | with a specified flow |
stearns@5453 | 709 | may themselves have a specified flow.</p> |
alexmog@2565 | 710 | |
stearns@5453 | 711 | <p>If an element has the same specified flow |
stearns@5453 | 712 | as one of its ancestors, |
stearns@5453 | 713 | it becomes a sibling of its ancestor |
stearns@5453 | 714 | for the purpose of layout |
stearns@5453 | 715 | in the region chain |
stearns@5453 | 716 | laying out content |
stearns@5453 | 717 | from that flow.</p> |
alexmog@2565 | 718 | |
stearns@5453 | 719 | <p>The 'flow-into' property does not affect |
stearns@5453 | 720 | the CSS cascade and inheritance |
stearns@5453 | 721 | for the elements on which it is specified. |
stearns@5453 | 722 | The 'flow-into' property affects |
stearns@5453 | 723 | the visual formatting of elements |
stearns@5453 | 724 | placed into a <span>named flow</span> |
stearns@5453 | 725 | and of the region chain laying out content |
stearns@5453 | 726 | from a <span>named flow</span>.</p> |
vhardy@3301 | 727 | |
vhardy@4412 | 728 | <div class="issue-marker wrapper"> |
vhardy@4412 | 729 | |
vhardy@4412 | 730 | <div class="issue-marker" data-bug_id="15870" data-bug_status="NEW"> |
vhardy@4412 | 731 | <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15870">Bug-15870</a> |
vhardy@4412 | 732 | <div class="issue-details"> |
vhardy@4412 | 733 | <p class="short-desc">Describe how containing blocks are used for element fragments</p> |
vhardy@4412 | 734 | </div> |
vhardy@4412 | 735 | </div> |
vhardy@4412 | 736 | </div> |
vhardy@4412 | 737 | |
stearns@5453 | 738 | <p>The edges of the first region in a region chain |
stearns@5453 | 739 | associated with a <span>named flow</span> |
stearns@5453 | 740 | establish the rectangle that is the |
stearns@5453 | 741 | <a href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">containing block</a> |
stearns@5453 | 742 | used for absolutely positioned elements |
stearns@5453 | 743 | in the <span>named flow</span> |
stearns@5453 | 744 | which do not have an ancestor |
stearns@5453 | 745 | with a 'position' of 'absolute', 'relative' or 'fixed' |
stearns@5453 | 746 | (see [[!CSS21]]). |
stearns@5453 | 747 | That first region rectangle is used |
stearns@5453 | 748 | as the containing block |
stearns@5453 | 749 | instead of the initial containing block.</p> |
vhardy@3301 | 750 | |
stearns@5453 | 751 | <p>The first region defines the |
stearns@5453 | 752 | <a href="http://www.w3.org/TR/css3-writing-modes/#writing-mode">writing mode</a> |
stearns@5453 | 753 | for the entire flow. |
stearns@5453 | 754 | The writing mode |
stearns@5453 | 755 | on subsequent regions is ignored.</p> |
vhardy@3660 | 756 | |
stearns@5453 | 757 | <p>Elements in a <span>named flow</span> |
stearns@5453 | 758 | are sequenced in document order.</p> |
vhardy@3301 | 759 | |
vhardy@4314 | 760 | <div class="note"><span class="note-prefix">Note </span> |
stearns@5453 | 761 | <p>The 'flow-into' property moves an element into the flow |
stearns@5453 | 762 | and the interplay with selectors should be considered carefully.</p> |
vhardy@3301 | 763 | <p>For example, </p> |
vhardy@3272 | 764 | <pre>table {flow-into: table-content}</pre> |
stearns@5453 | 765 | <p>will move all tables in the 'table-content' |
stearns@5453 | 766 | <span>named flow</span>. |
stearns@5453 | 767 | However, the</p> |
vhardy@4415 | 768 | <pre>table > * {flow-into: table-content} ...</pre> |
stearns@5453 | 769 | <p>selector will move all immediate children |
stearns@5453 | 770 | of all table elements |
stearns@5453 | 771 | into the ‘table-content’ <span>named flow</span> |
stearns@5453 | 772 | (which may be useful as it will usually result, |
stearns@5453 | 773 | if the immediate children are rows, |
stearns@5453 | 774 | in merging rows of multiple tables), |
stearns@5453 | 775 | but the</p> |
vhardy@3272 | 776 | <pre>table * {flow-into: table-content}</pre> |
stearns@5453 | 777 | <p>selector will move all descendants |
stearns@5453 | 778 | of table elements into the ‘table-content’ <span>named flow</span>, |
stearns@5453 | 779 | transforming the element tree |
stearns@5453 | 780 | into a flat list in order of opening tags |
stearns@5453 | 781 | (which is probably not intentional). |
stearns@5453 | 782 | This will make all the descendants |
stearns@5453 | 783 | of table elements siblings |
stearns@5453 | 784 | in the <span>named flow</span>. |
stearns@5453 | 785 | Having the descendants become siblings |
stearns@5453 | 786 | in the <span>named flow</span> |
stearns@5453 | 787 | results in a different processing |
stearns@5453 | 788 | (see <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#anonymous-boxes">CSS 2.1's anonymous table objects</a>). |
stearns@5453 | 789 | This note illustrates how authors must exercise caution |
stearns@5453 | 790 | when choosing a particular selector |
stearns@5453 | 791 | for setting the 'flow-into' property |
stearns@5453 | 792 | to avoid unintended results.</p> |
vhardy@2945 | 793 | </div> |
vhardy@3272 | 794 | |
vhardy@3660 | 795 | |
vhardy@3302 | 796 | |
vhardy@3302 | 797 | |
vhardy@3547 | 798 | <h3 id="the-flow-from-property">The 'flow-from' property</h3> |
alexmog@2565 | 799 | |
vhardy@5352 | 800 | <p>The 'flow-from' property makes an element a region and associates it with a <span>named flow</span>.</p> |
vhardy@4412 | 801 | <div class="issue-marker" data-bug_id="15191" data-bug_status="NEW"> |
vhardy@4395 | 802 | <a href= |
vhardy@4404 | 803 | "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15191">Bug-15191</a> |
vhardy@4395 | 804 | |
vhardy@4395 | 805 | <div class="issue-details"> |
vhardy@4395 | 806 | <p class="short-desc">Should we allow multi-column elements to |
vhardy@4395 | 807 | be regions?</p> |
vhardy@4395 | 808 | </div> |
vhardy@4395 | 809 | </div> |
vhardy@3547 | 810 | <table class="propdef" summary="flow-from property definition"> |
vhardy@2779 | 811 | <tr> |
vhardy@2779 | 812 | <th>Name:</th> |
alexmog@2565 | 813 | |
vhardy@3547 | 814 | <td><dfn id="flow-from">flow-from</dfn></td> |
vhardy@2779 | 815 | </tr> |
alexmog@2565 | 816 | |
vhardy@2779 | 817 | <tr> |
vhardy@2779 | 818 | <th>Value:</th> |
alexmog@2565 | 819 | |
vhardy@3660 | 820 | <td><ident> | none | inherit</td> |
vhardy@2779 | 821 | </tr> |
alexmog@2565 | 822 | |
vhardy@2779 | 823 | <tr> |
vhardy@2779 | 824 | <th>Initial:</th> |
alexmog@2565 | 825 | |
vhardy@3547 | 826 | <td>none</td> |
vhardy@2779 | 827 | </tr> |
alexmog@2565 | 828 | |
vhardy@2779 | 829 | <tr> |
vhardy@2779 | 830 | <th>Applies to:</th> |
alexmog@2565 | 831 | |
vhardy@3547 | 832 | <td>Elements that generate a <a href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes">block container box</a>. |
vhardy@3547 | 833 | <br /> |
vhardy@3547 | 834 | This might be expanded in future versions of the specification |
vhardy@3547 | 835 | to allow other types of containers to receive flow content.</td> |
vhardy@2779 | 836 | </tr> |
alexmog@2565 | 837 | |
vhardy@2779 | 838 | <tr> |
vhardy@2779 | 839 | <th>Inherited:</th> |
vhardy@2779 | 840 | |
vhardy@2779 | 841 | <td>no</td> |
vhardy@2779 | 842 | </tr> |
vhardy@2779 | 843 | |
vhardy@2779 | 844 | <tr> |
vhardy@2779 | 845 | <th>Percentages:</th> |
vhardy@2779 | 846 | |
vhardy@2779 | 847 | <td>N/A</td> |
vhardy@2779 | 848 | </tr> |
vhardy@2779 | 849 | |
vhardy@2779 | 850 | <tr> |
vhardy@2779 | 851 | <th>Media:</th> |
vhardy@2779 | 852 | |
vhardy@2779 | 853 | <td>visual</td> |
vhardy@2779 | 854 | </tr> |
vhardy@2779 | 855 | |
vhardy@2779 | 856 | <tr> |
vhardy@2779 | 857 | <th>Computed value:</th> |
vhardy@2779 | 858 | |
vhardy@2779 | 859 | <td>as specified</td> |
vhardy@2779 | 860 | </tr> |
vhardy@2779 | 861 | </table> |
vhardy@2779 | 862 | |
vhardy@2779 | 863 | <dl> |
vhardy@3547 | 864 | <dt><strong>none</strong></dt> |
vhardy@2779 | 865 | |
vhardy@3547 | 866 | <dd>The element is not a <span title="region">region</span>.</dd> |
vhardy@2779 | 867 | |
vhardy@3547 | 868 | <dt><strong><ident></strong></dt> |
vhardy@2779 | 869 | |
vhardy@3547 | 870 | <dd> |
stearns@5453 | 871 | If the 'content' property computes |
stearns@5453 | 872 | to something else than 'normal', |
stearns@5453 | 873 | the element does not become a <span>CSS Region</span>. |
stearns@5453 | 874 | If the 'content' property computes to 'normal', |
stearns@5453 | 875 | then the element becomes a <span>CSS Region</span> |
stearns@5453 | 876 | and is ordered in a <span>region chain</span> |
stearns@5453 | 877 | according to its document order. |
stearns@5453 | 878 | The content from the flow |
stearns@5453 | 879 | with the <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier"><ident></a> |
stearns@5453 | 880 | name will be <a href="#region-flow-break">broken |
stearns@5453 | 881 | into fragments</a> and visually formatted in the |
stearns@5453 | 882 | <a href="http://www.w3.org/TR/CSS21/visuren.html#principal-box">principal boxes</a> |
stearns@5453 | 883 | of the <span>regions</span> |
stearns@5453 | 884 | in the <span>region chain</span>. |
stearns@5453 | 885 | <br/> |
stearns@5453 | 886 | If there is no flow with name <ident>, |
stearns@5453 | 887 | then the element does not |
stearns@5453 | 888 | format any content visually. |
stearns@5453 | 889 | <br/> |
stearns@5453 | 890 | Likewise, if the element is part |
stearns@5453 | 891 | of the flow with name <ident>, |
stearns@5453 | 892 | then the element does not format any content visually. |
vhardy@3262 | 893 | </dd> |
vhardy@2779 | 894 | </dl> |
vhardy@2779 | 895 | |
stearns@5453 | 896 | <p>A <span>CSS Region</span>'s document children |
stearns@5453 | 897 | are not visually formatted |
stearns@5453 | 898 | unless they are directed |
stearns@5453 | 899 | to a <span>named flow</span> |
stearns@5453 | 900 | with an associated <span>region chain</span>.</p> |
vhardy@3267 | 901 | |
stearns@5453 | 902 | <div class="note"><span class="note-prefix">Note </span> |
stearns@5453 | 903 | <p>An element becomes a <span>CSS Region</span> |
stearns@5453 | 904 | when its 'flow-from' property is set |
stearns@5453 | 905 | to a valid <ident> value, |
stearns@5453 | 906 | even if there is no content contributing |
stearns@5453 | 907 | to the referenced flow. |
vhardy@3728 | 908 | For example:</p> |
bert@3938 | 909 | <pre> |
vhardy@3728 | 910 | <style> |
vhardy@3728 | 911 | .article{ |
vhardy@3728 | 912 | flow-into: thread; |
vhardy@3728 | 913 | } |
vhardy@3728 | 914 | .region{ |
vhardy@3728 | 915 | flow-from: thread; |
vhardy@3728 | 916 | } |
vhardy@3728 | 917 | </style> |
vhardy@3728 | 918 | <html> |
vhardy@3728 | 919 | <body> |
vhardy@3728 | 920 | <div class=region>div content</div> |
vhardy@3728 | 921 | </body> |
vhardy@3728 | 922 | </html> |
bert@3938 | 923 | </pre> |
vhardy@3728 | 924 | |
stearns@5453 | 925 | There is no element matching the <code>.article</code> selector |
stearns@5453 | 926 | and therefore no content |
stearns@5453 | 927 | in the <code>thread</code> flow. |
stearns@5453 | 928 | However, the element matching the <code>.region</code> selector |
stearns@5453 | 929 | is still associated with that empty <span>named flow</span> |
stearns@5453 | 930 | and, consequently, |
stearns@5453 | 931 | its children are not formatted visually. |
vhardy@3728 | 932 | </div> |
vhardy@3138 | 933 | |
vhardy@4412 | 934 | <div class="issue-marker wrapper"> |
vhardy@4412 | 935 | <div class="issue-marker" data-bug_id="15189" data-bug_status="NEW"> |
vhardy@4395 | 936 | <a href= |
vhardy@4404 | 937 | "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15189">Bug-15189</a> |
vhardy@4395 | 938 | |
vhardy@4395 | 939 | <div class="issue-details"> |
vhardy@4395 | 940 | <p class="short-desc">Should regions be non-breakable?</p> |
vhardy@4395 | 941 | </div> |
vhardy@4412 | 942 | </div> |
vhardy@4412 | 943 | <div class="issue-marker" data-bug_id="15824" data-bug_status="NEW"> |
vhardy@4400 | 944 | |
vhardy@4400 | 945 | <a href= |
vhardy@4404 | 946 | "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15824">Bug-15824</a> |
vhardy@4400 | 947 | |
vhardy@4400 | 948 | <div class="issue-details"> |
vhardy@4400 | 949 | <p class="short-desc">Should regions not create a new stacking context?</p> |
vhardy@4412 | 950 | </div> |
vhardy@4412 | 951 | </div> |
vhardy@4412 | 952 | <div class="issue-marker" data-bug_id="15827" data-bug_status="NEW"> |
vhardy@4400 | 953 | |
vhardy@4400 | 954 | <a href= |
vhardy@4404 | 955 | "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15824">Bug-15827</a> |
vhardy@4400 | 956 | |
vhardy@4400 | 957 | <div class="issue-details"> |
vhardy@4400 | 958 | <p class="short-desc">Specify behavior of stacking contexts that are split between regions</p> |
vhardy@4400 | 959 | </div> |
vhardy@4412 | 960 | </div> |
vhardy@4412 | 961 | </div> |
vhardy@2779 | 962 | |
stearns@5453 | 963 | <p><span title="region">CSS Regions</span> create a new <a href="http://www.w3.org/TR/CSS2/visuren.html#z-index">stacking context</a>. <span title="region">CSS Regions</span> establish a new <a href="http://www.w3.org/TR/CSS2/visuren.html#block-formatting">block formatting Context</a>.</p> |
vhardy@3301 | 964 | |
vhardy@4314 | 965 | <div class="note"><span class="note-prefix">Note </span> |
stearns@5453 | 966 | <p>With <span>region chains</span>, |
stearns@5453 | 967 | an element may be split across multiple boxes |
stearns@5453 | 968 | and these boxes may overlap |
stearns@5453 | 969 | (for example if they are absolutely positioned). |
stearns@5453 | 970 | So fragments of the same element |
stearns@5453 | 971 | can overlap each other. |
stearns@5453 | 972 | Since each element has a single z-index, |
stearns@5453 | 973 | it would be required to find another mechanism |
stearns@5453 | 974 | to decide in which order |
stearns@5453 | 975 | the fragments are rendered. |
stearns@5453 | 976 | Since each <span>CSS Region</span> creates |
stearns@5453 | 977 | a new stacking context, |
stearns@5453 | 978 | it is clear that each fragment is rendered separately |
stearns@5453 | 979 | and their rendering order follows |
stearns@5453 | 980 | the regular CSS rendering model.</p> |
vhardy@3301 | 981 | </div> |
vhardy@3301 | 982 | |
stearns@5453 | 983 | <p>Floats or other exclusions |
stearns@5453 | 984 | (see [[CSS3-EXCLUSIONS]]) |
stearns@5453 | 985 | potentially impact the content |
stearns@5453 | 986 | laid out in region chains, |
stearns@5453 | 987 | just as for non-regions.</p> |
vhardy@3301 | 988 | |
stearns@5453 | 989 | <p>See the |
stearns@5453 | 990 | <a href="#regions-visual-formatting-details">regions visual formatting details</a> |
stearns@5453 | 991 | section for a description of how |
stearns@5453 | 992 | 'width' and 'height' values are resolved |
stearns@5453 | 993 | for <span>CSS Region</span> boxes.</p> |
vhardy@5289 | 994 | |
vhardy@2945 | 995 | <h3 id= |
vhardy@3377 | 996 | "region-flow-break">Region |
vhardy@2945 | 997 | flow break properties: 'break-before', 'break-after', 'break-inside'</h3> |
vhardy@2779 | 998 | |
vhardy@3547 | 999 | <p>User agents laying out content in multiple regions must |
vhardy@2819 | 1000 | determine where content breaks occur. The problem of breaking content into |
vhardy@5353 | 1001 | fragments fitting in regions is similar to breaking content into pages or |
vhardy@2779 | 1002 | columns.</p> |
vhardy@2779 | 1003 | |
vhardy@2779 | 1004 | <p>Each break ends layout in the current region and causes remaining pieces |
vhardy@5352 | 1005 | of content from the <span>named flow</span> to be visually formatted in the following |
vhardy@4415 | 1006 | region in the region chain, if there is one.</p> |
vhardy@2779 | 1007 | |
vhardy@2779 | 1008 | <p>The following extends the 'break-before', 'break-after' and |
vhardy@2779 | 1009 | 'break-inside' properties from the [[!CSS3COL]] specification to account |
vhardy@2779 | 1010 | for regions. The additional values are described below.</p> |
vhardy@2779 | 1011 | |
vhardy@2779 | 1012 | <table class="propdef" summary="break-before property definition"> |
vhardy@2779 | 1013 | <tr> |
vhardy@2779 | 1014 | <td><em>Name:</em></td> |
vhardy@2779 | 1015 | |
vhardy@2779 | 1016 | <td><dfn>break-before</dfn></td> |
vhardy@2779 | 1017 | </tr> |
vhardy@2779 | 1018 | |
vhardy@2779 | 1019 | <tr> |
vhardy@2779 | 1020 | <td><em>Value:</em></td> |
vhardy@2779 | 1021 | |
vhardy@2779 | 1022 | <td>auto | always | avoid | left | right | page | column | region | |
vhardy@2779 | 1023 | avoid-page | avoid-column | avoid-region</td> |
vhardy@2779 | 1024 | </tr> |
vhardy@2779 | 1025 | |
vhardy@2779 | 1026 | <tr> |
vhardy@2779 | 1027 | <td><em>Initial:</em></td> |
vhardy@2779 | 1028 | |
vhardy@2779 | 1029 | <td>auto</td> |
vhardy@2779 | 1030 | </tr> |
vhardy@2779 | 1031 | |
vhardy@2779 | 1032 | <tr> |
vhardy@2779 | 1033 | <td><em>Applies to:</em></td> |
vhardy@2779 | 1034 | |
vhardy@2779 | 1035 | <td>block-level elements</td> |
vhardy@2779 | 1036 | </tr> |
vhardy@2779 | 1037 | |
vhardy@2779 | 1038 | <tr> |
vhardy@2779 | 1039 | <td><em>Inherited:</em></td> |
vhardy@2779 | 1040 | |
vhardy@2779 | 1041 | <td>no</td> |
vhardy@2779 | 1042 | </tr> |
vhardy@2779 | 1043 | |
vhardy@2779 | 1044 | <tr> |
vhardy@2779 | 1045 | <td><em>Percentages:</em></td> |
vhardy@2779 | 1046 | |
vhardy@2779 | 1047 | <td>N/A</td> |
vhardy@2779 | 1048 | </tr> |
vhardy@2779 | 1049 | |
vhardy@2779 | 1050 | <tr> |
vhardy@2779 | 1051 | <td><em>Media:</em></td> |
vhardy@2779 | 1052 | |
stearns@5453 | 1053 | <td>visual</td> |
vhardy@2779 | 1054 | </tr> |
vhardy@2779 | 1055 | |
vhardy@2779 | 1056 | <tr> |
vhardy@2779 | 1057 | <td><em>Computed value:</em></td> |
vhardy@2779 | 1058 | |
vhardy@2779 | 1059 | <td>specified value</td> |
vhardy@2779 | 1060 | </tr> |
vhardy@2779 | 1061 | </table> |
vhardy@2779 | 1062 | |
vhardy@2779 | 1063 | <table class="propdef" summary="break-after property definition"> |
vhardy@2779 | 1064 | <tr> |
vhardy@2779 | 1065 | <td><em>Name:</em></td> |
vhardy@2779 | 1066 | |
vhardy@2779 | 1067 | <td><dfn>break-after</dfn></td> |
vhardy@2779 | 1068 | </tr> |
vhardy@2779 | 1069 | |
vhardy@2779 | 1070 | <tr> |
vhardy@2779 | 1071 | <td><em>Value:</em></td> |
vhardy@2779 | 1072 | |
vhardy@2779 | 1073 | <td>auto | always | avoid | left | right | page | column | region | |
vhardy@2779 | 1074 | avoid-page | avoid-column | avoid-region</td> |
vhardy@2779 | 1075 | </tr> |
vhardy@2779 | 1076 | |
vhardy@2779 | 1077 | <tr> |
vhardy@2779 | 1078 | <td><em>Initial:</em></td> |
vhardy@2779 | 1079 | |
vhardy@2779 | 1080 | <td>auto</td> |
vhardy@2779 | 1081 | </tr> |
vhardy@2779 | 1082 | |
vhardy@2779 | 1083 | <tr> |
vhardy@2779 | 1084 | <td><em>Applies to:</em></td> |
vhardy@2779 | 1085 | |
vhardy@2779 | 1086 | <td>block-level elements</td> |
vhardy@2779 | 1087 | </tr> |
vhardy@2779 | 1088 | |
vhardy@2779 | 1089 | <tr> |
vhardy@2779 | 1090 | <td><em>Inherited:</em></td> |
vhardy@2779 | 1091 | |
vhardy@2779 | 1092 | <td>no</td> |
vhardy@2779 | 1093 | </tr> |
vhardy@2779 | 1094 | |
vhardy@2779 | 1095 | <tr> |
vhardy@2779 | 1096 | <td><em>Percentages:</em></td> |
vhardy@2779 | 1097 | |
vhardy@2779 | 1098 | <td>N/A</td> |
vhardy@2779 | 1099 | </tr> |
vhardy@2779 | 1100 | |
vhardy@2779 | 1101 | <tr> |
vhardy@2779 | 1102 | <td><em>Media:</em></td> |
vhardy@2779 | 1103 | |
stearns@5453 | 1104 | <td>visual</td> |
vhardy@2779 | 1105 | </tr> |
vhardy@2779 | 1106 | |
vhardy@2779 | 1107 | <tr> |
vhardy@2779 | 1108 | <td><em>Computed value:</em></td> |
vhardy@2779 | 1109 | |
vhardy@2779 | 1110 | <td>specified value</td> |
vhardy@2779 | 1111 | </tr> |
vhardy@2779 | 1112 | </table> |
vhardy@2779 | 1113 | |
vhardy@2779 | 1114 | <table class="propdef" summary="break-inside property definition"> |
vhardy@2779 | 1115 | <tr> |
vhardy@2779 | 1116 | <td><em>Name:</em></td> |
vhardy@2779 | 1117 | |
vhardy@2779 | 1118 | <td><dfn>break-inside</dfn></td> |
vhardy@2779 | 1119 | </tr> |
vhardy@2779 | 1120 | |
vhardy@2779 | 1121 | <tr> |
vhardy@2779 | 1122 | <td><em>Value:</em></td> |
vhardy@2779 | 1123 | |
vhardy@2779 | 1124 | <td>auto | avoid | avoid-page | avoid-column | avoid-region</td> |
vhardy@2779 | 1125 | </tr> |
vhardy@2779 | 1126 | |
vhardy@2779 | 1127 | <tr> |
vhardy@2779 | 1128 | <td><em>Initial:</em></td> |
vhardy@2779 | 1129 | |
vhardy@2779 | 1130 | <td>auto</td> |
vhardy@2779 | 1131 | </tr> |
vhardy@2779 | 1132 | |
vhardy@2779 | 1133 | <tr> |
vhardy@2779 | 1134 | <td><em>Applies to:</em></td> |
vhardy@2779 | 1135 | |
vhardy@2779 | 1136 | <td>block-level elements</td> |
vhardy@2779 | 1137 | </tr> |
vhardy@2779 | 1138 | |
vhardy@2779 | 1139 | <tr> |
vhardy@2779 | 1140 | <td><em>Inherited:</em></td> |
vhardy@2779 | 1141 | |
vhardy@2779 | 1142 | <td>no</td> |
vhardy@2779 | 1143 | </tr> |
vhardy@2779 | 1144 | |
vhardy@2779 | 1145 | <tr> |
vhardy@2779 | 1146 | <td><em>Percentages:</em></td> |
vhardy@2779 | 1147 | |
vhardy@2779 | 1148 | <td>N/A</td> |
vhardy@2779 | 1149 | </tr> |
vhardy@2779 | 1150 | |
vhardy@2779 | 1151 | <tr> |
vhardy@2779 | 1152 | <td><em>Media:</em></td> |
vhardy@2779 | 1153 | |
stearns@5453 | 1154 | <td>visual</td> |
vhardy@2779 | 1155 | </tr> |
vhardy@2779 | 1156 | |
vhardy@2779 | 1157 | <tr> |
vhardy@2779 | 1158 | <td><em>Computed value:</em></td> |
vhardy@2779 | 1159 | |
vhardy@2779 | 1160 | <td>specified value</td> |
vhardy@2779 | 1161 | </tr> |
vhardy@2779 | 1162 | </table> |
vhardy@2779 | 1163 | |
vhardy@2779 | 1164 | <p>These properties describe page, column and region break behavior |
vhardy@2779 | 1165 | before/after/inside the generated box. These values are normatively defined |
vhardy@2779 | 1166 | in [[!CSS3COL]]:</p> |
vhardy@2779 | 1167 | |
vhardy@2779 | 1168 | <p>This specification adds the following new values:</p> |
vhardy@2779 | 1169 | |
vhardy@2779 | 1170 | <dl> |
vhardy@2779 | 1171 | <dt>region</dt> |
vhardy@2779 | 1172 | |
vhardy@2779 | 1173 | <dd>Always force a region break before (after) the generated box.</dd> |
vhardy@2779 | 1174 | |
vhardy@2779 | 1175 | <dt>avoid-region</dt> |
vhardy@2779 | 1176 | |
vhardy@2779 | 1177 | <dd>Avoid a region break before (after, inside) the generated box.</dd> |
vhardy@2779 | 1178 | </dl> |
vhardy@2779 | 1179 | |
vhardy@4336 | 1180 | <p>The behavior of region breaks with regards to regions is identical to the behavior |
vhardy@4336 | 1181 | of page breaks with regards to pages, as defined in the [[!CSS21]].</p> |
vhardy@3267 | 1182 | |
vhardy@2945 | 1183 | <h3 id="the-region-overflow-property">The region-overflow property</h3> |
vhardy@2779 | 1184 | |
vhardy@4415 | 1185 | <div class="issue-marker" data-bug_id="15878" data-bug_status="NEW"> |
vhardy@4415 | 1186 | <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15878">Bug-15878</a> |
vhardy@4415 | 1187 | <div class="issue-details"> |
vhardy@4415 | 1188 | <p class="short-desc">region-overflow:nobreak</p> |
vhardy@4415 | 1189 | </div> |
vhardy@4415 | 1190 | </div> |
vhardy@4415 | 1191 | |
vhardy@2945 | 1192 | <table class="propdef" summary="break-after property definition"> |
vhardy@2945 | 1193 | <tr> |
vhardy@2945 | 1194 | <td><em>Name:</em></td> |
vhardy@2779 | 1195 | |
vhardy@2945 | 1196 | <td><dfn>region-overflow</dfn></td> |
vhardy@2945 | 1197 | </tr> |
vhardy@2945 | 1198 | |
vhardy@2945 | 1199 | <tr> |
vhardy@2945 | 1200 | <td><em>Value:</em></td> |
vhardy@2945 | 1201 | |
vhardy@2945 | 1202 | <td>auto | break</td> |
vhardy@2945 | 1203 | </tr> |
vhardy@2945 | 1204 | |
vhardy@2945 | 1205 | <tr> |
vhardy@2945 | 1206 | <td><em>Initial:</em></td> |
vhardy@2945 | 1207 | |
vhardy@2945 | 1208 | <td>auto</td> |
vhardy@2945 | 1209 | </tr> |
vhardy@2945 | 1210 | |
vhardy@2945 | 1211 | <tr> |
vhardy@2945 | 1212 | <td><em>Applies to:</em></td> |
vhardy@2945 | 1213 | |
vhardy@2945 | 1214 | <td><em title="region element">region elements</em></td> |
vhardy@2945 | 1215 | </tr> |
vhardy@2945 | 1216 | |
vhardy@2945 | 1217 | <tr> |
vhardy@2945 | 1218 | <td><em>Inherited:</em></td> |
vhardy@2945 | 1219 | |
vhardy@2945 | 1220 | <td>no</td> |
vhardy@2945 | 1221 | </tr> |
vhardy@2945 | 1222 | |
vhardy@2945 | 1223 | <tr> |
vhardy@2945 | 1224 | <td><em>Percentages:</em></td> |
vhardy@2945 | 1225 | |
vhardy@2945 | 1226 | <td>N/A</td> |
vhardy@2945 | 1227 | </tr> |
vhardy@2945 | 1228 | |
vhardy@2945 | 1229 | <tr> |
vhardy@2945 | 1230 | <td><em>Media:</em></td> |
vhardy@2945 | 1231 | |
stearns@5453 | 1232 | <td>visual</td> |
vhardy@2945 | 1233 | </tr> |
vhardy@2945 | 1234 | |
vhardy@2945 | 1235 | <tr> |
vhardy@2945 | 1236 | <td><em>Computed value:</em></td> |
vhardy@2945 | 1237 | |
vhardy@2945 | 1238 | <td>specified value</td> |
vhardy@2945 | 1239 | </tr> |
vhardy@2945 | 1240 | </table> |
vhardy@4404 | 1241 | |
vhardy@4412 | 1242 | <div class="issue-marker" data-bug_id="15832" data-bug_status="NEW"> |
vhardy@4404 | 1243 | <a href= |
vhardy@4404 | 1244 | "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15832">Bug-15832</a> |
vhardy@4404 | 1245 | |
vhardy@4404 | 1246 | <div class="issue-details"> |
vhardy@5232 | 1247 | <p class="short-desc">Should we have region-overflow:nobreak and have 'region-overflow' apply to all regions, not just the last?</p> |
vhardy@4404 | 1248 | </div> |
vhardy@4404 | 1249 | </div> |
vhardy@4404 | 1250 | |
vhardy@2945 | 1251 | |
vhardy@2945 | 1252 | <p>The 'region-overflow' property controls the behavior of the <em id= |
vhardy@2945 | 1253 | "last-region">last region</em> associated with a <span>named |
vhardy@2945 | 1254 | flow</span>.</p> |
vhardy@2945 | 1255 | |
vhardy@2945 | 1256 | <dl> |
vhardy@2945 | 1257 | <dt>auto</dt> |
vhardy@2945 | 1258 | |
vhardy@2945 | 1259 | <dd>Content flows as it would in a regular content element. If the |
vhardy@2945 | 1260 | content exceeds the container box, it is subject to the <a href= |
vhardy@3073 | 1261 | "http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow">overflow</a> |
vhardy@3138 | 1262 | property's computed value on the region element. Region breaks must be |
vhardy@3138 | 1263 | ignored on the last region.</dd> |
vhardy@2945 | 1264 | |
vhardy@2945 | 1265 | <dt>break</dt> |
vhardy@2945 | 1266 | |
vhardy@3660 | 1267 | <dd><p>If the content fits within the <em>region element</em>, then this |
vhardy@2945 | 1268 | property has no effect. If the content does not fit within the |
vhardy@2945 | 1269 | <em>region element</em>, the content breaks as if flow was going to |
vhardy@3073 | 1270 | continue in a subsequent region. See the <a href= |
bert@3938 | 1271 | "#regions-flow-breaking-rules">breaking rules</a> section. A forced region break takes precedence over |
vhardy@3660 | 1272 | a natural break point.</p> |
vhardy@3660 | 1273 | |
vhardy@3660 | 1274 | <p>Flow content that follows the last break in the last region, if any is not rendered.</p> |
vhardy@3660 | 1275 | |
vhardy@3660 | 1276 | |
vhardy@3660 | 1277 | </dd> |
vhardy@2945 | 1278 | </dl> |
vhardy@2945 | 1279 | |
stearns@5423 | 1280 | <p>The 'region-overflow' property does not influence |
stearns@5423 | 1281 | the size of the region it applies to.</p> |
vhardy@3660 | 1282 | |
stearns@5423 | 1283 | <p>The following code sample illustrates |
stearns@5423 | 1284 | the usage of the 'region-overflow' property.</p> |
vhardy@2779 | 1285 | |
vhardy@2779 | 1286 | <div class="example"> |
stearns@5423 | 1287 | <pre> |
alexmog@2565 | 1288 | <style> |
vhardy@2945 | 1289 | #article { |
stearns@5423 | 1290 | flow-into: "article"; |
vhardy@2779 | 1291 | } |
vhardy@2779 | 1292 | |
vhardy@2945 | 1293 | #region_1, #region_2 { |
stearns@5423 | 1294 | flow-from: article; |
stearns@5423 | 1295 | <strong>region-overflow: break;</strong> /* or none */ |
stearns@5423 | 1296 | <strong>overflow: visible;</strong> /* or hidden */ |
vhardy@2779 | 1297 | } |
vhardy@2779 | 1298 | |
vhardy@2779 | 1299 | </style> |
vhardy@2945 | 1300 | |
vhardy@2945 | 1301 | <div id="article">...</div> |
vhardy@2945 | 1302 | |
vhardy@2945 | 1303 | <div id="region_1"></div> |
vhardy@2945 | 1304 | <div id="region_2"></div> |
vhardy@2945 | 1305 | |
stearns@5423 | 1306 | </pre> |
vhardy@2779 | 1307 | </div> |
vhardy@2779 | 1308 | |
vhardy@2945 | 1309 | <div class="figure"> |
vhardy@2945 | 1310 | <table style="border: 1px solid gray;width: 100%;" summary= |
vhardy@2945 | 1311 | "Different values for the region-overflow property - Illustration."> |
vhardy@2945 | 1312 | <tr> |
vhardy@3262 | 1313 | <td>''flow-into: "article"''</td> |
vhardy@2945 | 1314 | |
vhardy@2945 | 1315 | <td><code class="html">region_1</code> and <code class= |
vhardy@2945 | 1316 | "html">region_2</code></td> |
vhardy@2945 | 1317 | |
vhardy@2945 | 1318 | <td>''region-overflow: auto''<br> |
vhardy@2945 | 1319 | ''overflow:visible''</td> |
vhardy@2945 | 1320 | </tr> |
vhardy@2945 | 1321 | |
vhardy@2945 | 1322 | <tr> |
vhardy@2945 | 1323 | <td rowspan="3" style="vertical-align: top;"><img src= |
vhardy@2945 | 1324 | "images/region-overflow-flow.png" alt= |
vhardy@2945 | 1325 | "regions receiving the flow content"></td> |
vhardy@2945 | 1326 | |
vhardy@2945 | 1327 | <td><img src="images/region-overflow-regions.png" alt= |
vhardy@2945 | 1328 | "result if region-overflow is set to 'break'"></td> |
vhardy@2945 | 1329 | |
vhardy@2945 | 1330 | <td><img src="images/region-overflow-auto-overflow-visible.png" |
vhardy@2945 | 1331 | alt="regions receiving the flow content"></td> |
vhardy@2945 | 1332 | </tr> |
vhardy@2945 | 1333 | |
vhardy@2945 | 1334 | <tr> |
vhardy@2945 | 1335 | <td>''region-overflow: break''</td> |
vhardy@2945 | 1336 | |
vhardy@2945 | 1337 | <td>''region-overflow: auto''<br> |
vhardy@2945 | 1338 | ''overflow:hidden''</td> |
vhardy@2945 | 1339 | </tr> |
vhardy@2945 | 1340 | |
vhardy@2945 | 1341 | <tr> |
vhardy@2945 | 1342 | <td><img src="images/region-overflow-break.png" alt= |
vhardy@2945 | 1343 | "result if region-overflow is set to 'break'"></td> |
vhardy@2945 | 1344 | |
vhardy@2945 | 1345 | <td><img src="images/region-overflow-auto-overflow-hidden.png" |
vhardy@2945 | 1346 | alt="regions receiving the flow content"></td> |
vhardy@2945 | 1347 | </tr> |
vhardy@2945 | 1348 | </table> |
vhardy@2945 | 1349 | |
vhardy@2945 | 1350 | <p class="caption">Different values for the region-overflow |
vhardy@2945 | 1351 | property</p> |
vhardy@2945 | 1352 | </div> |
vhardy@3377 | 1353 | |
vhardy@4314 | 1354 | <div class="note"><span class="note-prefix">Note </span> |
vhardy@3377 | 1355 | <p>The 'overflow' property is honored on a region: if region content overflows, |
vhardy@3377 | 1356 | such as the borders of elements on the |
vhardy@3377 | 1357 | last line, the 'overflow' property controls the visibility of the overflowing |
vhardy@3377 | 1358 | content. See the 'overflow' property definition |
vhardy@3377 | 1359 | ([[CSS21]]).</p> |
vhardy@3377 | 1360 | </div> |
vhardy@2945 | 1361 | |
vhardy@2945 | 1362 | <h3 id="the-at-region-style-rule">The @region rule</h3> |
vhardy@2945 | 1363 | |
vhardy@4412 | 1364 | <div class="issue-marker" data-bug_id="15116" data-bug_status="NEW"> |
vhardy@4412 | 1365 | <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15116">Bug-15116</a> |
vhardy@4412 | 1366 | <div class="issue-details"> |
vhardy@4412 | 1367 | <p class="short-desc">Add CSS OM Interface for @region style rules</p> |
vhardy@4412 | 1368 | </div> |
vhardy@4412 | 1369 | </div> |
vhardy@4412 | 1370 | |
vhardy@2945 | 1371 | <p>An '@region' rule contains style declarations specific to particular |
vhardy@2945 | 1372 | regions.</p> |
vhardy@2945 | 1373 | |
vhardy@3660 | 1374 | <pre> |
vhardy@3660 | 1375 | @region <selector> { |
vhardy@3660 | 1376 | ... CSS styling rules ... |
vhardy@3660 | 1377 | } |
vhardy@3660 | 1378 | </pre> |
vhardy@3660 | 1379 | |
vhardy@2945 | 1380 | <p>The '@region' rule consists of the keyword '@region' followed by a |
vhardy@2945 | 1381 | <a href="http://www.w3.org/TR/css3-selectors/#selector-syntax">selector</a> |
vhardy@4314 | 1382 | and a block of style rules. The '@region' rule and the selector constitute |
vhardy@5353 | 1383 | the region's 'flow fragment' selector. The region's flow fragment selector |
vhardy@4314 | 1384 | specifies which range of elements in the flow are subject to the style rules in the |
vhardy@4314 | 1385 | following block: it applies to the range (see |
vhardy@5094 | 1386 | [[!DOM]]) from the region's flow that flows in the |
vhardy@2945 | 1387 | selected region(s).</p> |
vhardy@2945 | 1388 | |
vhardy@4412 | 1389 | <div class="issue-marker" data-bug_id="15713" data-bug_status="NEW"> |
vhardy@4395 | 1390 | <a href= |
vhardy@4404 | 1391 | "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15713">Bug-15713</a> |
vhardy@4395 | 1392 | |
vhardy@4395 | 1393 | <div class="issue-details"> |
vhardy@4395 | 1394 | <p class="short-desc">Model for styling element fragments</p> |
vhardy@4395 | 1395 | </div> |
vhardy@4395 | 1396 | </div> |
vhardy@4395 | 1397 | |
vhardy@5353 | 1398 | <p>Elements that are fully or partially in the 'flow fragment' may match any of the |
vhardy@4338 | 1399 | selectors found in the style rule. However, the style rules only apply to the |
vhardy@4338 | 1400 | portion of the element that falls into the corresponding region.</p> |
vhardy@4338 | 1401 | |
vhardy@4338 | 1402 | |
vhardy@2945 | 1403 | |
vhardy@3547 | 1404 | <p>Only a limited list of properties can be set in a region style rule:</p> |
vhardy@4395 | 1405 | |
vhardy@4412 | 1406 | <div class="issue-marker" data-bug_id="15190" data-bug_status="NEW"> |
vhardy@4395 | 1407 | <a href= |
vhardy@4404 | 1408 | "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15190">Bug-15190</a> |
vhardy@4395 | 1409 | |
vhardy@4395 | 1410 | <div class="issue-details"> |
vhardy@4395 | 1411 | <p class="short-desc">List of region style properties</p> |
vhardy@4395 | 1412 | </div> |
vhardy@4395 | 1413 | </div> |
vhardy@3547 | 1414 | |
vhardy@3547 | 1415 | <ol> |
bert@3938 | 1416 | <li><a href="http://www.w3.org/TR/CSS2/fonts.html">font properties</a></li> |
bert@3938 | 1417 | <li><a href="http://www.w3.org/TR/CSS2/colors.html">color property</a></li> |
stearns@5453 | 1418 | <li><a href="http://www.w3.org/TR/css3-color/#transparency">opacity property</a></li> |
bert@3938 | 1419 | <li><a href="http://www.w3.org/TR/css3-background/#backgrounds">background property</a></li> |
bert@3938 | 1420 | <li><a href="http://www.w3.org/TR/CSS2/text.html#propdef-word-spacing">'word-spacing'</a></li> |
bert@3938 | 1421 | <li><a href="http://www.w3.org/TR/CSS2/text.html#propdef-letter-spacing">'letter-spacing'</a></li> |
bert@3938 | 1422 | <li><a href="http://www.w3.org/TR/CSS2/text.html#propdef-text-decoration">'text-decoration'</a></li> |
bert@3938 | 1423 | <li><a href="http://www.w3.org/TR/CSS2/text.html#propdef-text-transform">'text-transform'</a></li> |
bert@3938 | 1424 | <li><a href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">'line-height'</a></li> |
bert@3938 | 1425 | <li><a href="http://www.w3.org/TR/css3-background/#borders">border properties</a></li> |
bert@3938 | 1426 | <li><a href="http://www.w3.org/TR/css3-background/#corners">rounded corner properties</a></li> |
bert@3938 | 1427 | <li><a href="http://www.w3.org/TR/css3-background/#border-images">border images properties</a></li> |
bert@3938 | 1428 | <li><a href="http://www.w3.org/TR/CSS2/box.html#margin-properties">margin properties</a></li> |
bert@3938 | 1429 | <li><a href="http://www.w3.org/TR/CSS2/box.html#padding-properties">padding properties</a></li> |
bert@3938 | 1430 | <li><a href="http://www.w3.org/TR/css3-text/#text-shadow">'text-shadow' property</a></li> |
bert@3938 | 1431 | <li><a href="http://www.w3.org/TR/css3-background/#the-box-shadow">'box-shadow' property</a></li> |
bert@3938 | 1432 | <li><a href="http://www.w3.org/TR/css3-background/#the-box-decoration-break">'box-decoration-break' property</a></li> |
vhardy@3547 | 1433 | <li><a href="http://www.w3.org/TR/CSS2/visudet.html#the-width-property">'width' property</a></li> |
vhardy@3547 | 1434 | </ol> |
vhardy@3547 | 1435 | |
vhardy@3547 | 1436 | |
vhardy@2945 | 1437 | |
vhardy@2945 | 1438 | <div class="example" id="region-style-example"> |
vhardy@5352 | 1439 | <p>In the following example, the <span>named flow</span> 'article_flow' flows |
vhardy@2945 | 1440 | through 'region_1' and 'region_2'.</p> |
vhardy@2945 | 1441 | <pre> |
vhardy@2945 | 1442 | <style> |
vhardy@2945 | 1443 | #div_1 { |
vhardy@3262 | 1444 | <strong>flow-into: article_flow;</strong> |
vhardy@2945 | 1445 | } |
vhardy@2945 | 1446 | |
vhardy@4119 | 1447 | #region1, #region2 { |
vhardy@3547 | 1448 | <strong>flow-from: article_flow;</strong> |
vhardy@2945 | 1449 | } |
vhardy@2945 | 1450 | |
vhardy@4119 | 1451 | /* region style "RSA" */ |
vhardy@4119 | 1452 | <strong>@region #region1, #region2</strong> { |
vhardy@2945 | 1453 | div {...} |
vhardy@2945 | 1454 | p {...} |
vhardy@2945 | 1455 | } |
vhardy@2945 | 1456 | |
vhardy@4119 | 1457 | /* region style "RSB" */ |
vhardy@4119 | 1458 | <strong>@region #region1</strong> { |
vhardy@2945 | 1459 | p {...} |
vhardy@2945 | 1460 | } |
vhardy@2945 | 1461 | |
vhardy@2945 | 1462 | </style> |
vhardy@2945 | 1463 | |
vhardy@2945 | 1464 | <div id="div_1"> |
vhardy@2945 | 1465 | <p id="p_1">...</p> |
vhardy@2945 | 1466 | <p id="p_2">...</p> |
vhardy@2945 | 1467 | </div> |
vhardy@2945 | 1468 | |
vhardy@4119 | 1469 | <div id="region1"></div> |
vhardy@4119 | 1470 | <div id="region2"></div> |
vhardy@2945 | 1471 | |
vhardy@2945 | 1472 | </pre> |
vhardy@2945 | 1473 | |
vhardy@2945 | 1474 | <div id="region_styling_illustration"> |
vhardy@2945 | 1475 | <img id="region_styling_img_2" src="images/region-styling-2.png" |
vhardy@2945 | 1476 | alt= |
vhardy@2945 | 1477 | "Illustration showing how a named flow content fits into regions to illustrate the @region styling." |
vhardy@2945 | 1478 | name="region_styling_img_2"> |
vhardy@2945 | 1479 | |
vhardy@2945 | 1480 | <ul class="swatch-list"> |
vhardy@2945 | 1481 | <li><span class="swatch" style= |
vhardy@2945 | 1482 | "background:#1C75BC"> </span>div div_1</li> |
vhardy@2945 | 1483 | |
vhardy@2945 | 1484 | <li><span class="swatch" style= |
vhardy@2945 | 1485 | "background:crimson"> </span>paragraph p_1</li> |
vhardy@2945 | 1486 | |
vhardy@2945 | 1487 | <li><span class="swatch" style= |
vhardy@2945 | 1488 | "background:white"> </span>paragraph p_2</li> |
vhardy@2945 | 1489 | |
vhardy@2945 | 1490 | <li><span class="swatch" style= |
vhardy@2945 | 1491 | "background:#E6E7E8"> </span>range of flow that fits into |
vhardy@2945 | 1492 | region_1</li> |
vhardy@2945 | 1493 | |
vhardy@2945 | 1494 | <li><span class="swatch" style= |
vhardy@2945 | 1495 | "background:#BCBEC0"> </span>range of flow that fits into |
vhardy@2945 | 1496 | region_2</li> |
vhardy@2945 | 1497 | </ul> |
vhardy@2945 | 1498 | </div> |
vhardy@2945 | 1499 | |
vhardy@3547 | 1500 | <p>The region style ''RSA'' applies to flow content that is laid out in either |
vhardy@2945 | 1501 | 'region_1' or 'region_2'.</p> |
vhardy@2945 | 1502 | |
vhardy@3547 | 1503 | <p>The first rule set ''div {...}'' applies to all <code class= |
vhardy@3547 | 1504 | "html"><div></code> elements that fit partially or fully into 'region_1' or |
vhardy@3547 | 1505 | 'region_2'. <code class="html">div_1</code> is split between 'region_1' and |
vhardy@3547 | 1506 | 'region_2' and gets the style from this style rule.</p> |
vhardy@2945 | 1507 | |
vhardy@3547 | 1508 | <p>The second rule set ''p {...}'' applies to all <code class= |
vhardy@3547 | 1509 | "html"><p></code> elements that fit into 'region_1' or |
vhardy@3547 | 1510 | 'region_2'. In our example, both <code class="html">p_1</code> |
vhardy@3547 | 1511 | and <code class="html">p_2</code> are selected.</p> |
vhardy@2945 | 1512 | |
vhardy@2945 | 1513 | <p>The region style ''RSB'' applies to flow content that fits in |
vhardy@2945 | 1514 | 'region_1'.</p> |
vhardy@2945 | 1515 | |
vhardy@2945 | 1516 | <p>The first rule set ''p {...}'' matches <code class="html">p_1</code> |
vhardy@3547 | 1517 | and <code class="html">p_2</code> |
vhardy@5353 | 1518 | because these paragraphs flow into 'region_1'. Only the fragment of |
vhardy@3547 | 1519 | <code class="html">p_2</code> that flows into <code class="html">region_1</code> |
vhardy@3547 | 1520 | is styled with this rule.</p> |
vhardy@2945 | 1521 | </div> |
vhardy@2945 | 1522 | |
vhardy@2779 | 1523 | |
vhardy@2779 | 1524 | |
vhardy@4412 | 1525 | <div class="issue-marker" data-bug_id="15734" data-bug_status="NEW"> |
vhardy@4395 | 1526 | <a href= |
vhardy@4404 | 1527 | "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15734">Bug-15734</a> |
vhardy@4395 | 1528 | |
vhardy@4395 | 1529 | <div class="issue-details"> |
vhardy@4395 | 1530 | <p class="short-desc">@region and specificity</p> |
vhardy@4395 | 1531 | </div> |
vhardy@4395 | 1532 | </div> |
vhardy@4395 | 1533 | |
vhardy@2945 | 1534 | <p>The specificity of the selectors in a '@region' rule is calculated as |
vhardy@2945 | 1535 | <a href="http://www.w3.org/TR/css3-selectors/#specificity">defined</a> in |
vhardy@3073 | 1536 | the CSS Selectors module (see [[SELECT]]). In other words, the '@region' |
vhardy@2945 | 1537 | rule adds an extra condition to the selector's matching, but does not |
vhardy@2945 | 1538 | change the selector's specificity. This is the same behavior as selectors |
vhardy@2945 | 1539 | appearing in '@media' rules declaration blocks (see [[MEDIAQ]]), where the |
vhardy@2945 | 1540 | rule does not influence the selectors' specificity.</p> |
vhardy@2779 | 1541 | |
vhardy@2779 | 1542 | <p>Consequently, selectors that match a given element (as describe above), |
bert@3938 | 1543 | participate in the <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascading-order">CSS Cascading |
vhardy@3073 | 1544 | order</a> as defined in [[!CSS21]].</p> |
vhardy@3660 | 1545 | |
vhardy@4314 | 1546 | <div> |
vhardy@4314 | 1547 | Region styling does not apply to nested regions. For example, if a region |
vhardy@3660 | 1548 | 'A' receives content from a flow that contains region 'B', the content that |
vhardy@3660 | 1549 | flows into 'B' does not receive the region styling specified for region 'A'. |
vhardy@3660 | 1550 | </div> |
vhardy@5131 | 1551 | |
vhardy@5131 | 1552 | <h2 id="multi-column-regions">Multi-column regions</h2> |
vhardy@5131 | 1553 | |
vhardy@5131 | 1554 | <p>Column boxes of a <a href="http://dev.w3.org/csswg/css3-multicol/#multi-column-element">multi-column</a> element |
vhardy@5352 | 1555 | that has an assigned <em><span>named flow</span></em> are regions. This means that a multi-column element can be used as a |
stearns@5422 | 1556 | convenient short-hand to create multiple column-box regions into which content flows. </p> |
vhardy@5133 | 1557 | |
stearns@5422 | 1558 | <p>The fragment of content that flows into column-box regions is laid out according to the |
vhardy@5133 | 1559 | multi-column specification. In particular, |
vhardy@5373 | 1560 | when <a href="#flow-fragment-height-resolution">computing the flow fragment height</a> |
vhardy@5373 | 1561 | of a multi-column element |
vhardy@5352 | 1562 | that is associated with a <em><span>named flow</span></em>, |
stearns@5422 | 1563 | the 'column-fill' property is honored to balance the fragments of content that would flow across |
stearns@5422 | 1564 | the column-box regions.</p> |
vhardy@2779 | 1565 | |
vhardy@5131 | 1566 | <div class="example"> |
vhardy@5131 | 1567 | <p>The following example:</p> |
vhardy@5131 | 1568 | <pre> |
vhardy@5131 | 1569 | <style> |
vhardy@5131 | 1570 | #multi-col { |
vhardy@5131 | 1571 | column-count: 2; |
vhardy@5131 | 1572 | flow-from: article; |
vhardy@5131 | 1573 | height: 6em; |
vhardy@5131 | 1574 | column-gap: 1em; |
vhardy@5131 | 1575 | } |
vhardy@5131 | 1576 | |
vhardy@5131 | 1577 | #remainder { |
vhardy@5131 | 1578 | flow-from: article; |
vhardy@5131 | 1579 | height: auto; |
vhardy@5131 | 1580 | } |
vhardy@5131 | 1581 | </style> |
vhardy@5131 | 1582 | |
vhardy@5131 | 1583 | <div id="article">...<div> |
vhardy@5131 | 1584 | <div id="multicol"></div> |
vhardy@5131 | 1585 | <div id="remainder"></div></pre> |
vhardy@5131 | 1586 | <p>is equivalent but simpler than, for example:</p> |
vhardy@5131 | 1587 | <pre> |
vhardy@5131 | 1588 | <style> |
vhardy@5131 | 1589 | #flex { |
vhardy@5131 | 1590 | display: flex; |
vhardy@5131 | 1591 | flex-pack: justify; |
vhardy@5131 | 1592 | } |
vhardy@5131 | 1593 | #flex > div { |
vhardy@5131 | 1594 | flow-from: article; |
vhardy@5131 | 1595 | width: calc(50% - 0.5em); |
vhardy@5131 | 1596 | } |
vhardy@5131 | 1597 | |
vhardy@5131 | 1598 | #remainder { |
vhardy@5131 | 1599 | flow-from: article; |
vhardy@5131 | 1600 | height: auto; |
vhardy@5131 | 1601 | } |
vhardy@5131 | 1602 | </style> |
vhardy@5131 | 1603 | |
vhardy@5131 | 1604 | <div id="article">...<div> |
vhardy@5131 | 1605 | <div id="flex"> |
vhardy@5131 | 1606 | <div /> |
vhardy@5131 | 1607 | <div /> |
vhardy@5131 | 1608 | </div> |
vhardy@5131 | 1609 | <div id="remainder"></div></pre> |
vhardy@5131 | 1610 | |
vhardy@5131 | 1611 | |
vhardy@5131 | 1612 | |
vhardy@5131 | 1613 | </div> |
vhardy@5131 | 1614 | |
stearns@5423 | 1615 | <p>Overflow of column-box regions is mostly handled |
stearns@5423 | 1616 | according to the same rules as other regions. |
stearns@5423 | 1617 | If the content does not fit in the region, |
stearns@5423 | 1618 | then the rest of the content flows into regions |
stearns@5423 | 1619 | that follow in the region chain. |
stearns@5423 | 1620 | However, if a column-box region is |
stearns@5423 | 1621 | the last region in a <span>region chain</a>, |
stearns@5423 | 1622 | then the multi-column element must generate |
stearns@5423 | 1623 | additional column-box regions |
stearns@5423 | 1624 | if its flow fragment overflows |
stearns@5423 | 1625 | as it would with normal content).</p> |
vhardy@5131 | 1626 | |
vhardy@3272 | 1627 | <h2 id="pseudo_elements">Pseudo-elements</h2> |
vhardy@3558 | 1628 | |
vhardy@4412 | 1629 | <div class="issue-marker" data-bug_id="15188" data-bug_status="NEW"> |
vhardy@4395 | 1630 | <a href= |
vhardy@4404 | 1631 | "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15188">Bug-15188</a> |
vhardy@4395 | 1632 | |
vhardy@4395 | 1633 | <div class="issue-details"> |
vhardy@4412 | 1634 | <p class="short-desc">add functionality for having textual description like "continued here" or "continued on page x" to regions.</p> |
vhardy@4395 | 1635 | </div> |
vhardy@4395 | 1636 | </div> |
vhardy@3272 | 1637 | |
vhardy@3272 | 1638 | <p>It can be useful to visually mark the content to highlight |
vhardy@3547 | 1639 | that a content thread is flowing from region to region. For example, a marker such |
vhardy@3272 | 1640 | as <em>'continues on page 3'</em> clearly indicates, at the end of a |
vhardy@3272 | 1641 | region, that there is more content in the flow which can be found |
vhardy@3272 | 1642 | on 'page 3' (in this example, the notion of page is application specific).</p> |
vhardy@3272 | 1643 | |
vhardy@3547 | 1644 | <p>The '::before' and |
vhardy@3547 | 1645 | '::after' pseudo-elements (see [[!SELECT]]) let content authors mark the beginning and |
vhardy@3272 | 1646 | end of a region with such markers.</p> |
stearns@5422 | 1647 | |
stearns@5423 | 1648 | <p>If ::before or ::after pseudo-elements are used on a |
stearns@5423 | 1649 | <a href="http://dev.w3.org/csswg/css3-multicol/#multi-column-element">multi-column</a> |
stearns@5423 | 1650 | element that has an assigned <em><span>named flow</span></em> |
stearns@5423 | 1651 | then the ::before pseudo-element is only applied to the first column-box region, |
stearns@5423 | 1652 | and the ::after pseudo-element is only applied to the last column-box region |
stearns@5423 | 1653 | in that multi-column element. |
vhardy@3272 | 1654 | |
vhardy@3547 | 1655 | <h3 id="processing-model">Processing model</h3> |
vhardy@3272 | 1656 | |
vhardy@3547 | 1657 | <p>The '::before' content is laid out in the region prior to any other content coming from the |
vhardy@3547 | 1658 | flow. Note that it is possible to set the '::before' pseudo-element's 'display' property |
vhardy@3547 | 1659 | to 'run-in' to align it with the content's inline boxes.</p> |
vhardy@3547 | 1660 | |
vhardy@3547 | 1661 | <p>The '::after' content is laid out in the region after laying out the flow content. |
vhardy@3547 | 1662 | Then, flow content is removed from the region to accommodate for the '::after' content. |
vhardy@3547 | 1663 | Accommodating means that the '::after' content is laid out without overflowing the region. |
vhardy@3547 | 1664 | If there is still not enough room to accommodate for the '::after' content |
vhardy@3547 | 1665 | after removing all flow content, then the '::after' content overflows. The 'display' |
vhardy@4337 | 1666 | property of the '::after' content can be set to 'run-in' to align with the |
vhardy@3547 | 1667 | region's content's inline boxes. In that case, the '::after' content becomes the |
vhardy@3547 | 1668 | last inline box of the previous element in the flow that has some visual rendering in the |
vhardy@3547 | 1669 | region and can accommodate for the '::after' box.</p> |
vhardy@3272 | 1670 | |
vhardy@3272 | 1671 | <h2 id="cssom_view_and_css_regions">CSSOM view and CSS regions</h2> |
vhardy@2779 | 1672 | |
vhardy@4412 | 1673 | <div class="issue-marker" data-bug_id="15679" data-bug_status="NEW"> |
vhardy@4395 | 1674 | <a href= |
vhardy@4404 | 1675 | "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15679">Bug-15679</a> |
vhardy@4395 | 1676 | |
vhardy@4395 | 1677 | <div class="issue-details"> |
vhardy@4395 | 1678 | <p class="short-desc">elementFromPoint and CSS regions</p> |
vhardy@4395 | 1679 | </div> |
vhardy@4395 | 1680 | </div> |
vhardy@3558 | 1681 | |
vhardy@2779 | 1682 | <p>Since content may flow into multiple regions, authors need a way to |
vhardy@2945 | 1683 | determine if there are enough regions to flow all the content from a named |
vhardy@5349 | 1684 | flow. This is especially important considering that the size of regions or |
vhardy@5349 | 1685 | the size of the content may change depending on the display context. For |
vhardy@5349 | 1686 | example, flowing the same content on a mobile phone with a small screen may |
vhardy@5349 | 1687 | require more regions than on a large desktop display. Another example is the |
vhardy@5349 | 1688 | user changing the font size of text flowing through regions. Depending on |
vhardy@5349 | 1689 | the change, new regions may be needed to accommodate for the additional |
vhardy@5349 | 1690 | space required to fit the larger text or some regions may need to be removed |
vhardy@5349 | 1691 | for smaller text. |
vhardy@5349 | 1692 | </p> |
vhardy@4395 | 1693 | |
vhardy@2945 | 1694 | <h3 id="the-namedflow-interface">The NamedFlow interface</h3> |
vhardy@5232 | 1695 | |
vhardy@5232 | 1696 | <p>A <span>named flow</span> is created when it becomes referenced by the |
vhardy@5349 | 1697 | 'flow-into' and/or 'flow-from' computed values. The following APIs allow |
vhardy@5232 | 1698 | scripts to reference a <code class="idl">NamedFlow</code> object representation |
vhardy@5232 | 1699 | of a <span>named flow</span>.</p> |
vhardy@5232 | 1700 | |
vhardy@5232 | 1701 | <p>The possible states for a <span>named flow</span> are described in the following |
vhardy@5255 | 1702 | figure. These states are referenced in subsequent text.</p> |
vhardy@5232 | 1703 | |
vhardy@5232 | 1704 | <div class="figure"> |
vhardy@5232 | 1705 | <img src="images/named-flow-states.svg" alt="NamedFlow states" width="600px" /> |
vhardy@5232 | 1706 | <p class="caption"><span>named flow</span> states and transitions</p> |
vhardy@5232 | 1707 | </div> |
vhardy@2945 | 1708 | |
vhardy@5349 | 1709 | <p>An addition method and attribute on the <a href= |
vhardy@5094 | 1710 | "http://www.w3.org/TR/dom/#interface-document"><code class= |
vhardy@5352 | 1711 | "idl">Document</code></a> interface provide access to <span>named flows</span>.</p> |
vhardy@4400 | 1712 | |
vhardy@4400 | 1713 | <pre class="idl"> |
vhardy@5095 | 1714 | partial interface <a href= |
vhardy@5094 | 1715 | "http://www.w3.org/TR/dom/#interface-document">Document</a> { |
stearns@5423 | 1716 | readonly attribute <a href="#dom-named-flow-collection">NamedFlowCollection</a> <a href="#document-namedflows">namedFlows</a>; |
stearns@5423 | 1717 | <a href="#dom-named-flow">NamedFlow?</a> <a href="#document-getflowbyname">getFlowByName(DOMString name)</a>; |
vhardy@4400 | 1718 | }; |
vhardy@4400 | 1719 | </pre> |
vhardy@4400 | 1720 | |
vhardy@5349 | 1721 | <p>The <dfn id="document-namedflows"><code class="idl">namedFlows</code></dfn> attribute on the <a href= |
vhardy@5094 | 1722 | "http://www.w3.org/TR/dom/#interface-document"><code class= |
vhardy@5232 | 1723 | "idl">Document</code></a> interface returns the live list of all the current <span>named |
vhardy@5352 | 1724 | flows</span> in the document.</p> |
vhardy@4400 | 1725 | |
vhardy@5352 | 1726 | <p>The <code class="idl">namedFlows</code> collection must include all <span>named flows</span> |
vhardy@5255 | 1727 | that are currently in the <code>CREATED</code> and <code>CREATED-REFERENCED</code> states. |
vhardy@5232 | 1728 | The list may include <span>named flows</span> |
vhardy@5232 | 1729 | that are in the <code>REFERENCED</code> state. The list |
vhardy@5352 | 1730 | may also include <span>named flows</span>that are in the STALE state.</p> |
vhardy@5232 | 1731 | |
vhardy@5349 | 1732 | <p>The <dfn id="document-getflowbyname"><code class="idl">getFlowByName</code></dfn> method on the <a href= |
vhardy@5094 | 1733 | "http://www.w3.org/TR/dom/#interface-document"><code class= |
vhardy@5352 | 1734 | "idl">Document</code></a> interface provides access to the document's <code class="idl">NamedFlow</code> |
vhardy@5352 | 1735 | instances. The return value depends on the <span>named flow</span> |
vhardy@5232 | 1736 | state:</p> |
vhardy@4400 | 1737 | |
vhardy@5232 | 1738 | <ul> |
vhardy@5255 | 1739 | <li><code class="idl">NULL</code>: the user agent must return <code>null</code>.</li> |
vhardy@5255 | 1740 | <li><code class="idl">STALE</code>: the user agent may return null or a valid |
vhardy@5232 | 1741 | <code class="idl">NamedFlow</code> instance. |
vhardy@5232 | 1742 | If the user agent returns a valid instance, subsequent calls to the <code class="idl">getFlowByName</code> method |
vhardy@5255 | 1743 | for the same name argument must return the same object instance, no matter what the state of the |
vhardy@5232 | 1744 | <span>named flow</span> is.</li> |
vhardy@5232 | 1745 | <li><code class="idl">CREATED</code> or <code class="idl">CREATED-REFERENCED</code>: the |
vhardy@5232 | 1746 | user agent must return a valid <code class="idl">NamedFlow</code> instance.</li> |
vhardy@5232 | 1747 | <li><code class="idl">REFERENCED</code>: the user agent may return <code>null</code> or it may return a |
vhardy@5232 | 1748 | valid <code class="idl">NamedFlow</code> instance. If the user agent returns a |
vhardy@5232 | 1749 | valid object, subsequent calls to the <code class="idl">getFlowByName</code> method |
vhardy@5255 | 1750 | with the same name argument must return the same object instance, no matter what the state of the |
vhardy@5232 | 1751 | <span>named flow</span> is.</li> |
vhardy@5232 | 1752 | </ul> |
vhardy@4400 | 1753 | |
vhardy@5349 | 1754 | <p>The <dfn id="dom-named-flow-collection"><code class="idl">NamedFlowCollection</code></dfn> |
vhardy@4400 | 1755 | interface provides a list of current <code class="idl">NamedFlow</code> instances in the |
vhardy@4400 | 1756 | document. The collection is live and methods operate on the underlying data, not a snapshot of |
vhardy@4400 | 1757 | the data.</p> |
vhardy@4400 | 1758 | |
vhardy@2945 | 1759 | <pre class="idl"> |
vhardy@4400 | 1760 | interface NamedFlowCollection { |
stearns@5423 | 1761 | readonly attribute unsigned long <a href="#dom-named-flow-collection-length">length</a>; |
stearns@5423 | 1762 | getter <a href="#dom-named-flow">NamedFlow?</a> <a href="#named-flow-collection-item">item (unsigned long index)</a>; |
stearns@5423 | 1763 | };</pre> |
vhardy@4400 | 1764 | |
vhardy@5349 | 1765 | <p>The <dfn id="dom-named-flow-collection-length"><code class="idl">length</code></dfn> |
vhardy@4415 | 1766 | attribute returns the number of items in the collection.</p> |
vhardy@5349 | 1767 | <p>The <dfn id="dom-named-flow-collection-item"><code class="idl">item(index)</code></dfn> |
vhardy@4400 | 1768 | method returns the item at index <em>index</em> |
vhardy@5095 | 1769 | in the collection or <code class="idl">null</code> if <em>index</em> is out of range. |
vhardy@5095 | 1770 | An object <code>collection</code> implementing <code>NamedFlowCollection</code> supports |
vhardy@5095 | 1771 | indices in the range <code>0 ≤ index < collection.length</code>.</p> |
vhardy@2945 | 1772 | |
vhardy@5349 | 1773 | <p>The <dfn id="dom-named-flow"><code class="idl">NamedFlow</code></dfn> |
vhardy@5255 | 1774 | interface offers a representation of the <span>named flow</span>. A <code class="idl">NamedFlow</code> |
vhardy@5255 | 1775 | object is live meaning that it always represents the <span>named flow</span> with the corresponding |
vhardy@5255 | 1776 | name, even if that <span>named flow</span> has transitioned to the <code>REFERENCED</code> or |
vhardy@5255 | 1777 | the <code>STALE</code> states.</p> |
vhardy@4415 | 1778 | |
vhardy@2945 | 1779 | <pre class="idl"> |
vhardy@5349 | 1780 | interface <a href="#dom-named-flow">NamedFlow</a> implements <a href="http://www.w3.org/TR/dom/#interface-eventtarget">EventTarget</a> { |
vhardy@5349 | 1781 | readonly attribute DOMString <a href="#dom-named-flow-name">name</a>; |
vhardy@5349 | 1782 | readonly attribute boolean <a href="#dom-named-flow-overset">overset</a>; |
vhardy@5349 | 1783 | sequence<<a href="#region-interface">Region</a>> <a href="#dom-named-flow-get-regions">getRegions()</a>; |
vhardy@5349 | 1784 | readonly attribute integer <a href="#dom-named-flow-first-empty-region-index">firstEmptyRegionIndex</a>; |
vhardy@5349 | 1785 | <a href="http://www.w3.org/TR/dom/#interface-nodelist">NodeList</a> <a href="#dom-named-flow-get-content">getContent()</a>; |
vhardy@5349 | 1786 | sequence<<a href="#region-interface">Region</a>> <a href="#dom-named-flow-get-regions-by-content">getRegionsByContent</a>(<a href="http://www.w3.org/TR/dom/#interface-node">Node</a> node)</a>; |
vhardy@3681 | 1787 | };</pre> |
vhardy@2945 | 1788 | |
vhardy@5349 | 1789 | <p>The <dfn id="dom-named-flow-name"><code class="idl">name</code></dfn> attribute |
vhardy@4415 | 1790 | returns the name of the <code class="idl">NamedFlow</code> instance.</p> |
vhardy@4400 | 1791 | |
vhardy@5349 | 1792 | <p>The <dfn id="dom-named-flow-overset"><code class= |
vhardy@5352 | 1793 | "idl">overset</code></dfn> attribute returns true if the <span>named flow</span> does not |
vhardy@5255 | 1794 | fully fit in the associated regions. Otherwise, it returns false. </p> |
vhardy@3681 | 1795 | |
vhardy@5349 | 1796 | <p>The <dfn id="dom-named-flow-get-regions"><code class="idl">getRegions()</code></dfn> |
vhardy@5255 | 1797 | method returns the sequence of regions in the <span>region chain</span> associated |
vhardy@5255 | 1798 | with the <span>named flow</span>. Note that the returned values is a static sequence.</p> |
vhardy@5255 | 1799 | |
vhardy@5349 | 1800 | <p>The <dfn id="dom-named-flow-first-empty-region-index">firstEmptyRegionIndex</dfn> is the index |
vhardy@5349 | 1801 | of the first region in the region chain with the <code>regionOverset</code> attribute |
vhardy@5264 | 1802 | set to <code>empty</code>. If all regions have the <code>regionOverset</code> attribute |
vhardy@5264 | 1803 | set to <code>fit</code> or <code>overset</code>, the value for |
vhardy@5349 | 1804 | <code>firstEmptyRegionIndex</code> is <code>-1</code>. If there are no regions in the |
vhardy@5349 | 1805 | <span>region chain</span>, the value is <code>-1</code> as well. </p> |
vhardy@5264 | 1806 | |
vhardy@5349 | 1807 | <p>The <dfn id="dom-named-flow-get-content">getContent()</dfn> methods returns |
vhardy@5352 | 1808 | an ordered collection of nodes that constitute the <span>named flow</span>. The returned list |
vhardy@5352 | 1809 | is a static snapshot of the <span>named flow</span> content at the time the method is invoked. |
vhardy@5352 | 1810 | This list contains the elements that were moved to the <span>named flow</span> but not their |
vhardy@5352 | 1811 | descendants (unless the descendants are themselves moved to the <span>named flow</span>). |
vhardy@3681 | 1812 | </p> |
vhardy@3681 | 1813 | |
vhardy@5349 | 1814 | <p>The <dfn id="dom-named-flow-get-regions-by-content">getRegionsByContent()</dfn> method returns the |
vhardy@5255 | 1815 | sequence of regions that contain at least part of the target content node. |
vhardy@5255 | 1816 | Note that the returned values is a static sequence.</p> |
vhardy@5255 | 1817 | |
vhardy@5255 | 1818 | <p>The <code class="idl">NamedFlow</code> interface can be used for different purposes. |
vhardy@5255 | 1819 | For example, the <code>getRegionsByContent()</code> method can help navigate by bookmark: |
vhardy@5255 | 1820 | a script can find the <span>region</span>s that display a particular anchor and bring them |
vhardy@5255 | 1821 | to view.</p> |
vhardy@2945 | 1822 | |
vhardy@5255 | 1823 | <p>Likewise, the interface allows authors to check if all content has been fitted into |
vhardy@5255 | 1824 | existing regions. If it has, the <code>overset</code> attribute would be false.</p> |
vhardy@5255 | 1825 | |
vhardy@5255 | 1826 | |
vhardy@5255 | 1827 | |
vhardy@5255 | 1828 | <h3 id="the-region-interface">The Region interface</h3> |
vhardy@2945 | 1829 | |
vhardy@5255 | 1830 | <p>The <dfn id='region-interface'><code class="idl">Region</code> interface</dfn> |
vhardy@5255 | 1831 | provides an abstraction for <a href= |
vhardy@5255 | 1832 | "http://www.w3.org/TR/dom/#interface-element"><code class= |
vhardy@5255 | 1833 | "idl">Element</code>s</a>, pseudo-elements or other CSS constructs (such as |
vhardy@5390 | 1834 | <a href="http://dev.w3.org/csswg/css3-page-template/#templates-and-slots">slots</a> |
vhardy@5390 | 1835 | [[!CSS3-PAGE-TEMPLATE]]) which can be regions.</p> |
vhardy@5255 | 1836 | |
vhardy@5255 | 1837 | <pre class="idl"> |
stearns@5423 | 1838 | interface Region { |
stearns@5423 | 1839 | readonly attribute DOMString <a href="#dom-region-regionoverset">regionOverset</a>; |
stearns@5423 | 1840 | readonly attribute DOMString <a href="#dom-region-flowfrom">flowFrom</a>; |
stearns@5423 | 1841 | sequence<<a href="#">Range</a>>? <a href= |
stearns@5423 | 1842 | "#dom-region-getregionflowranges">getRegionFlowRanges()</a>; |
stearns@5423 | 1843 | };</pre> |
vhardy@2945 | 1844 | |
vhardy@5255 | 1845 | <p>The <dfn id="dom-region-regionoverset"><code class= |
vhardy@5255 | 1846 | "idl">regionOverset</code></dfn> attribute returns one of the following |
vhardy@5255 | 1847 | values:</p> |
vhardy@2945 | 1848 | |
vhardy@5255 | 1849 | <dl> |
vhardy@5255 | 1850 | <dt>'overset'</dt> |
vhardy@2945 | 1851 | |
vhardy@5349 | 1852 | <dd>The region is the last one in the |
vhardy@5255 | 1853 | <span title="region-chain">region chain</span> and |
vhardy@5255 | 1854 | not able to fit the remaining content from the <span>named flow</span>. |
vhardy@5255 | 1855 | Note that the region's <a href= |
vhardy@5255 | 1856 | "http://www.w3.org/TR/CSS21/visufx.html#overflow"><code class= |
vhardy@5255 | 1857 | "idl">overflow</code></a> property value can be used to control the |
vhardy@5255 | 1858 | visibility of the overflowing content and the |
vhardy@5255 | 1859 | 'region-overflow' property controls whether or not fragmentation happens |
vhardy@5349 | 1860 | on the content that overflows the last region.</dd> |
vhardy@2945 | 1861 | |
vhardy@5255 | 1862 | <dt>'fit'</dt> |
vhardy@2945 | 1863 | |
vhardy@5349 | 1864 | <dd>The region's flow fragment content fits into the region's <a href= |
vhardy@5255 | 1865 | "http://www.w3.org/TR/CSS21/box.html#box-dimensions">content box</a>. |
vhardy@5255 | 1866 | If the region is the last one in the <span title= |
vhardy@5255 | 1867 | "region-chain">region chain</span>, it means that the content fits |
vhardy@5255 | 1868 | without overflowing. If the region is not the last one in the region |
vhardy@5255 | 1869 | chain, that means the <span>named flow</span> |
vhardy@5349 | 1870 | content is further fitted in subsequent regions. In this |
vhardy@5349 | 1871 | last case, note that the <span>named flow</span> fragment may be |
vhardy@5349 | 1872 | empty (for example if the region is too small to accommodate any content).</dd> |
vhardy@2945 | 1873 | |
vhardy@5255 | 1874 | <dt>'empty'</dt> |
vhardy@2945 | 1875 | |
vhardy@5349 | 1876 | <dd>All content from the <span>named flow</span> was fitted in prior regions.</dd> |
vhardy@5255 | 1877 | |
vhardy@5255 | 1878 | </dl> |
vhardy@2945 | 1879 | |
vhardy@5352 | 1880 | <p>Note that if there is no content in the <span>named flow</span>, all regions associated |
vhardy@5352 | 1881 | with that <span>named flow</span> should have their <code class="idl">regionOverset</code> |
vhardy@5255 | 1882 | attribute return 'empty'. |
vhardy@5255 | 1883 | If there is content in the flow but that content does not generate any box |
vhardy@5255 | 1884 | for visual formatting, the 'overset' attribute on the first region in the |
vhardy@5255 | 1885 | region chain associated with the flow will return 'fit'.</p> |
vhardy@2945 | 1886 | |
vhardy@5255 | 1887 | <p>The <dfn id="dom-region-flowfrom">flowFrom</dfn> attribute returns the name of the |
vhardy@5255 | 1888 | <span>named flow</span> this region is associated with.</p> |
vhardy@5255 | 1889 | |
vhardy@5255 | 1890 | <p>The <dfn id="dom-region-getregionflowranges">getRegionFlowRanges</dfn> method returns |
vhardy@5255 | 1891 | an array of <a href= |
vhardy@5255 | 1892 | "http://www.w3.org/TR/dom/#interface-range"> |
vhardy@5349 | 1893 | Range</a> instances corresponding to fragment from the <span>named flow</span> that |
vhardy@5349 | 1894 | is laid out in the region. If the region does not received any fragment because it is |
vhardy@5349 | 1895 | too small to accommodate any, the method returns a single <code class="idl">Range</code> where the |
vhardy@5349 | 1896 | <code>startContainer</code> and <code>startOffset</code> have the same values as the |
vhardy@5349 | 1897 | <code>endContainer</code> and <code>endOffset</code>. In that situation, |
vhardy@5349 | 1898 | if the region is the first in the |
vhardy@5349 | 1899 | <span>region chain</span>, the <code>startContainer</code> is the first |
vhardy@5349 | 1900 | <code>Node</code> in the <span>named flow</span> and the <code>startOffset</code> is |
vhardy@5349 | 1901 | zero. If the region is the last region in the region chain (but not the first and only one), |
vhardy@5349 | 1902 | the <code>startContainer</code> and <code>startOffset</code> are the same values as the |
vhardy@5349 | 1903 | <code>endContainer</code> and <code>endOffset</code> on the previous region in the |
vhardy@5349 | 1904 | <span>region chain</span>. The method returns null if the |
vhardy@5255 | 1905 | <span>region</span> object is not (or no longer) a region.</p> |
vhardy@2945 | 1906 | |
vhardy@5255 | 1907 | <div class="note"> |
vhardy@5255 | 1908 | <p>A <code class="idl">Region</code> instance may represent and |
vhardy@5255 | 1909 | object that is no longer a <span>region</span>. This may happen, for example if the |
vhardy@5255 | 1910 | 'flow-from' property on the corresponding pseudo-element, element or other construct |
vhardy@5255 | 1911 | becomes 'none' but a script is still holding a reference to the <code class="idl">Region</code> object.</p> |
vhardy@5350 | 1912 | </div> |
vhardy@5350 | 1913 | |
vhardy@5350 | 1914 | <p>If a <code class="idl">Region</code> instance is no longer a <span>region</span>, |
vhardy@5255 | 1915 | accessing its attributes (<code class="idl">regionOverset</code> and <code class="idl">flowFrom</code>) or |
vhardy@5255 | 1916 | invoking its <code class= |
vhardy@5255 | 1917 | "idl"><span title="#document-element-getregionflowranges">getRegionFlowRanges</span></code> |
vhardy@5255 | 1918 | method throws a <a href="http://www.w3.org/TR/dom/#interface-domexception"><code class="idl">DOMException</code></a> with the |
vhardy@5255 | 1919 | <a href="http://www.w3.org/TR/dom/#dom-domexception-invalid_access_err"><code class="idl">INVALID_ACCESS_ERR</code></a> error code.</p> |
vhardy@5255 | 1920 | </div> |
vhardy@3073 | 1921 | |
vhardy@3272 | 1922 | <h3 id="region-flow-layout-events">Region flow layout events</h3> |
vhardy@4395 | 1923 | |
vhardy@5349 | 1924 | <p><a href="#dom-named-flow"><code class="idl">NamedFlow</code></a> objects are |
vhardy@5264 | 1925 | <a href="">Event Targets</a> which |
vhardy@5352 | 1926 | dispatch <code class="idl">regionLayoutUpdate</code> events when there is a |
vhardy@5353 | 1927 | possible layout change of their <span>named flow</span> fragment. Note that the event is asynchronous.</p> |
vhardy@3073 | 1928 | |
vhardy@3073 | 1929 | <table class="event-desc" border="0" summary="This table contains information about the semantics of the given event type" cellpadding="2" cellspacing="0"> |
vhardy@3073 | 1930 | <tbody><tr class="assert must"><th>Type</th> |
vhardy@3272 | 1931 | <td class="eventname"><strong><code>regionLayoutUpdate</code></strong></td></tr> |
vhardy@5264 | 1932 | <tr class="assert must"><th>Interface</th> <td><code><a href="http://www.w3.org/TR/DOM-Level-3-Events/#webidl-events-UIEvent">UIEvent</a></code> (see [[!DOM-LEVEL-3-EVENTS]])</td></tr> |
vhardy@3302 | 1933 | <tr class="assert must"><th>Sync / Async</th> <td>Async</td></tr> |
vhardy@3073 | 1934 | <tr class="assert must"><th>Bubbles</th> <td>Yes</td></tr> |
vhardy@5349 | 1935 | <tr class="assert must"><th>Target</th> <td><a href="#dom-named-flow"><code class="idl">NamedFlow</code></a></td></tr> |
vhardy@3073 | 1936 | <tr class="assert must"><th>Cancelable</th> <td>Yes</td></tr> |
vhardy@3073 | 1937 | <tr class="assert must"><th>Default action</th> <td>none</td></tr> |
vhardy@3073 | 1938 | <tr class="assert must"><th>Context info</th> |
vhardy@3073 | 1939 | <td> |
vhardy@3073 | 1940 | <ul> |
vhardy@5264 | 1941 | <li><code class="attribute-name">Event.target</code>: |
vhardy@5349 | 1942 | <a href="#dom-named-flow"><code class="idl">NamedFlow</code></a> whose layout may have changed</li> |
vhardy@3073 | 1943 | </ul> |
vhardy@3073 | 1944 | </td> |
vhardy@3073 | 1945 | </tr> |
vhardy@3073 | 1946 | </tbody></table> |
vhardy@2819 | 1947 | |
vhardy@5270 | 1948 | <h3 id="cssomview-and-regions">CSS OM View and CSS Regions</h3> |
vhardy@5270 | 1949 | |
vhardy@5270 | 1950 | |
vhardy@5270 | 1951 | <h4 id="cssomview-getclientrects-and-getboundingclientrect"><code class="idl">getClientRects()</code> and <code>getBoundingClientRects()</code></h4> |
vhardy@5270 | 1952 | |
vhardy@5270 | 1953 | <p>The <a href="http://www.w3.org/TR/cssom-view/">CSSOM View Module</a> defines how user agents compute the bounding client rectangle for an element (<code class="idl">getBoundingClientRect()</code>) and its generated boxes (<code class="idl">getClientRects()</code>). |
vhardy@5270 | 1954 | |
vhardy@5270 | 1955 | <p>This definition applies to CSS regions and the multiple boxes generated for an element flowing |
vhardy@5270 | 1956 | through multiple regions. The <code class="idl">getClientRects()</code> method returns the list |
vhardy@5270 | 1957 | of boxes generated for each of the element fragment laid out different regions. |
vhardy@5270 | 1958 | The <code>getBoundingClientRect()</code> method operates as specified in the |
vhardy@5270 | 1959 | <a href="http://www.w3.org/TR/cssom-view/">CSSOM View Module</a> as well and is computed |
vhardy@5270 | 1960 | from the set of rectangles returned by <code class="idl">getClientRects()</code>.</p> |
vhardy@5270 | 1961 | |
vhardy@5270 | 1962 | <h4 id="cssomview-offset-attributes"><code class="idl">offsetTop</code>, <code class="idl">offsetLeft</code>, |
vhardy@5270 | 1963 | <code class="idl">offsetWidth</code> and <code class="idl">offsetWidth</code></h4> |
vhardy@5270 | 1964 | |
vhardy@5270 | 1965 | <p>The computation of the <a href="http://dev.w3.org/csswg/cssom-view/#offset-attributes">offset attributes</a> |
vhardy@5270 | 1966 | for elements laid out in a <span>named flow</code> follow the <a href="http://dev.w3.org/csswg/cssom-view/#offset-attribute">specification</a>. For the purpose of the |
vhardy@5270 | 1967 | algorithm, the <em>first CSS layout box</em> associated |
vhardy@5270 | 1968 | with an element laid out in a <span>named flow</span> is the box generated for the first region |
vhardy@5270 | 1969 | the element is laid out into.</p> |
vhardy@5270 | 1970 | |
vhardy@5289 | 1971 | <h2 id="regions-visual-formatting-details">Regions visual formatting details</h2> |
vhardy@5289 | 1972 | |
vhardy@5377 | 1973 | <p>Regions are laid out by CSS and take part in the normal box model and other layout models |
vhardy@5335 | 1974 | offered by CSS modules such as flexible boxes ([[CSS3-FLEXBOX]]). However, <span>regions</span> |
vhardy@5378 | 1975 | lay out a fragment of their <span>named flow</span> instead of laying out descendant content as happens with other |
vhardy@5335 | 1976 | boxes.</p> |
vhardy@5289 | 1977 | |
stearns@5423 | 1978 | <p>This section describes the model for laying out <span>regions</span> |
stearns@5423 | 1979 | and for laying out <span>named flow</span> content into regions. |
stearns@5423 | 1980 | The descriptions in this section are biased towards a horizontal writing mode, |
stearns@5423 | 1981 | using <span>width</span> for logical width (or measure) |
stearns@5423 | 1982 | and <span>height</span> for logical height (or extent) |
stearns@5423 | 1983 | as <a href="http://www.w3.org/TR/css3-writing-modes/#abstract-dimensions">defined</a> |
stearns@5423 | 1984 | in the CSS Writing Modes Module [[!CSS3-WRITING-MODES]]). |
stearns@5423 | 1985 | To use this model in a vertical writing mode apply the principles |
stearns@5423 | 1986 | <a href="http://www.w3.org/TR/css3-writing-modes/#vertical-layout">described</a> |
stearns@5423 | 1987 | in that specification.</p> |
vhardy@5335 | 1988 | |
vhardy@5289 | 1989 | <h3 id="regions-flow-content-box">The Region Flow Content Box (RFBC)</h3> |
vhardy@5289 | 1990 | |
vhardy@5289 | 1991 | <p>A region box lays out the following boxes:</p> |
vhardy@5289 | 1992 | |
vhardy@5289 | 1993 | <ul> |
vhardy@5289 | 1994 | <li>The boxes generated by its <code class="css">::before</code> and |
vhardy@5335 | 1995 | <code class="css">::after</code> pseudo-elements, if any.</code> |
vhardy@5335 | 1996 | <li>The anonymous <def>region flow content box</dev> (called <def>RFCB</def> in this document) which |
vhardy@5352 | 1997 | contains the fragment of the <span>named flow</span> that the region receives.</li> |
vhardy@5289 | 1998 | </ul> |
vhardy@5289 | 1999 | |
vhardy@5289 | 2000 | <div class="figure"> |
vhardy@5289 | 2001 | <img src="images/RFCB.svg" width="600px" /> |
vhardy@5289 | 2002 | <p class="caption">The Region Flow Content Box (RFCB)</p> |
vhardy@5289 | 2003 | </div> |
vhardy@5289 | 2004 | |
vhardy@5366 | 2005 | <p>Laying out a <span>region</span> box follows the same processing rules as for any other |
vhardy@5335 | 2006 | <a href="http://www.w3.org/TR/CSS2/visuren.html#block-boxes">block container box</a>.</p> |
vhardy@5289 | 2007 | |
vhardy@5354 | 2008 | <p>The <span>RFCB</span> is a <a href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes">block container box</a> |
vhardy@5354 | 2009 | with a <a href="">computed</a> 'width' of 'auto' and a whose <a href="">used</a> 'height' is |
vhardy@5354 | 2010 | resolved as detailed below.</li> |
vhardy@5335 | 2011 | |
vhardy@5354 | 2012 | <h4 id="rfbc-width-resolution">RFCB 'width' resolution</h4> |
vhardy@5335 | 2013 | |
vhardy@5335 | 2014 | <p>At various points in the visual formatting of documents containing regions, the |
vhardy@5366 | 2015 | used 'width' of RFCBs and regions need to be resolved. In all cases, the resolution is done following the |
vhardy@5354 | 2016 | rules for <a href="http://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins">calculating |
vhardy@5366 | 2017 | widths and margins</a> (see [[!CSS21]]). Sometimes, resolving the used 'width' value |
vhardy@5366 | 2018 | requires measuring the content's |
vhardy@5366 | 2019 | <code class="css">min-content</code> and <code class="css">max-content</code> values (as |
vhardy@5366 | 2020 | <a href="http://www.w3.org/TR/css3-writing-modes/#intrinsic-sizing">defined</a> in the CSS Writing Modes Module [[!CSS3-WRITING-MODES]]). For an RFCB, <strong>these measures are |
vhardy@5366 | 2021 | made on the <em>entire</em> associated <span>named flow</span> content</strong>.</p> |
vhardy@5335 | 2022 | |
vhardy@5366 | 2023 | <p>As a consequence, all <span>RFCBs</span> of <span>regions</span> associated with a given |
vhardy@5366 | 2024 | <span>named flow</span> share the |
vhardy@5366 | 2025 | same <code class="css">min-content</code> and <code class="css">max-content</code> measures.</p> |
vhardy@5366 | 2026 | |
vhardy@5366 | 2027 | <p>This approach is consistent with the <a href="http://www.w3.org/TR/css3-break/#varying-size-boxes">box model for breaking</a> ([[!CSS3-BREAK]]).</p> |
vhardy@5335 | 2028 | |
vhardy@5335 | 2029 | |
vhardy@5335 | 2030 | <h3 id="regions-visual-formatting-steps">Regions visual formatting steps</h3> |
vhardy@5289 | 2031 | |
vhardy@5377 | 2032 | <p>Formatting documents that contain <span>named flows</span> laid out in regions is a three-step |
vhardy@5335 | 2033 | process:</p> |
vhardy@5335 | 2034 | |
vhardy@5335 | 2035 | <ul> |
vhardy@5377 | 2036 | <li><em>Step 1: RFCB <def>flow fragment height</def> resolution</em>. In this step, the heights of fragments |
vhardy@5377 | 2037 | fitting in the regions' RFCBs are resolved.</li> |
vhardy@5366 | 2038 | <li><em>Step 2: document and regions layout</em>. In this step, the document content and regions are |
vhardy@5366 | 2039 | laid out. However, <span>named flow</span> content is not laid out in regions yet.</li> |
vhardy@5352 | 2040 | <li><em>Step 3: <span>named flow</span> layout</em>. In this step, the content of <span>named flows</span> is laid |
vhardy@5335 | 2041 | out in their respective <span>region chains</span>.</li> |
vhardy@5335 | 2042 | </ul> |
vhardy@5291 | 2043 | |
vhardy@5335 | 2044 | <div class="figure"> |
vhardy@5335 | 2045 | <img src="images/regions-layout-three-steps.svg" width="600px" /> |
vhardy@5335 | 2046 | <p class="caption">Regions visual formatting steps</p> |
vhardy@5335 | 2047 | </div> |
vhardy@5335 | 2048 | |
vhardy@5289 | 2049 | |
vhardy@5354 | 2050 | <h4 id="rfcb-flow-fragment-height-resolution">Step 1: RFCB flow fragment height resolution</h4> |
vhardy@5335 | 2051 | |
vhardy@5354 | 2052 | <p>Conceptually, resolving the flow fragment height is a two phase process.</p> |
vhardy@5289 | 2053 | |
vhardy@5354 | 2054 | <h5 id="rfcb-flow-fragment-height-resolution-phase-1">RFCB flow fragment height resolution, Phase 1</h5> |
vhardy@5289 | 2055 | |
vhardy@5291 | 2056 | <p>The document is laid out with a |
vhardy@5289 | 2057 | <a href="http://www.w3.org/TR/CSS2/cascade.html#used-value">used</a> height of zero |
vhardy@5289 | 2058 | for all <span>RFCB</span>s. In this phase, the content of <span>named flows</span> is not laid out in |
vhardy@5291 | 2059 | <span>regions</span>. This phase yields resolved position and sizes for all regions and |
vhardy@5289 | 2060 | their RFCBs in the document.</p> |
vhardy@5289 | 2061 | |
vhardy@5366 | 2062 | <h5 id="rfcb-flow-fragment-height-resolution-phase-2">RFCB flow fragment height resolution, Phase 2</h5> |
vhardy@5289 | 2063 | |
vhardy@5354 | 2064 | <p><span>Named flows</span> are laid out in <span>regions</span>. The |
vhardy@5378 | 2065 | user agent resolves the <em><span>flow fragment height</span></em> for |
vhardy@5354 | 2066 | the <span>RFCB</span>s using the remainder of the flow and accounting for |
vhardy@5354 | 2067 | <a href="http://www.w3.org/TR/css3-break/">fragmentation rules</a>. |
vhardy@5378 | 2068 | This process accounts for constraints such as the 'height' or 'max-height' values, as described |
vhardy@5289 | 2069 | in the CSS 2.1 section on |
vhardy@5289 | 2070 | <a href="http://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins">calculating heights |
vhardy@5302 | 2071 | and margins</a> (see the <a href="http://www.w3.org/TR/CSS2/visudet.html#normal-block">Block-level |
vhardy@5302 | 2072 | non-replaced elements in normal flow when 'overflow' computes to 'visible'</a> section and the |
vhardy@5335 | 2073 | <a href="http://www.w3.org/TR/CSS2/visudet.html#block-root-margin">complicated cases</a> section). |
vhardy@5335 | 2074 | During this phase, generated content is laid out according to the |
vhardy@5378 | 2075 | <a href="#processing-model">rules</a> described earlier in this document. |
vhardy@5335 | 2076 | </p> |
vhardy@5302 | 2077 | |
vhardy@5335 | 2078 | <h4 id="regions-boxes-layout">Step 2: regions boxes layout</h4> |
vhardy@5335 | 2079 | |
vhardy@5366 | 2080 | <p>In this step, the document is laid out according to the normal CSS layout rules.</p> |
vhardy@5366 | 2081 | |
vhardy@5366 | 2082 | <p>If a measure of the content is required to resolve the used 'width' of the region box, the value |
vhardy@5366 | 2083 | is resolved as described in the |
vhardy@5366 | 2084 | <a href="#rfbc-width-resolution">RFCB width resolution</a> section.</p> |
vhardy@5366 | 2085 | |
vhardy@5366 | 2086 | <p>If a measure of the content |
vhardy@5413 | 2087 | is required to resolve the used height of the RFCB (for example if the region box is absolutely positioned), |
vhardy@5366 | 2088 | the <span>flow fragment height</span> resolved in Step 1 is used for the vertical content measure of the |
vhardy@5413 | 2089 | RFCB.</p> |
vhardy@5366 | 2090 | |
vhardy@5335 | 2091 | <p>At the end of this step, regions are laid out and ready to receive |
vhardy@5352 | 2092 | content from their associated <span>named flows</span>.</p> |
vhardy@5335 | 2093 | |
vhardy@5335 | 2094 | <h4 id="named-flows-layout">Step 3: named flows layout</h4> |
vhardy@5335 | 2095 | |
vhardy@5352 | 2096 | <p>In this final step, the content of <span>named flows</span> is laid out in the <span>regions</span>' RFCBs |
vhardy@5335 | 2097 | along with the generated content boxes.</p> |
vhardy@5335 | 2098 | |
vhardy@5366 | 2099 | <p>The used 'width' for RFCBs is resolved <a href="#rfbc-width-resolution">as described before</a>.</p> |
vhardy@5366 | 2100 | |
vhardy@5366 | 2101 | <p>The used 'height' of RFCBs is resolved such that none of the boxes in the region box's normal flow |
vhardy@5366 | 2102 | overflow the region's box. In other words, the RFCB boxes are stretched vertically |
vhardy@5366 | 2103 | to accommodate as much of the flow as possible without overflowing the region box and |
vhardy@5366 | 2104 | accounting for <a href="http://www.w3.org/TR/css3-break/">fragmentation rules</a> and |
vhardy@5366 | 2105 | generated content boxes.</p> |
vhardy@5366 | 2106 | |
vhardy@5366 | 2107 | <p>During this phase, generated content is laid out according to the |
vhardy@5378 | 2108 | <a href="#processing-model">rules</a> |
vhardy@5366 | 2109 | described earlier in this document.</p> |
vhardy@5366 | 2110 | |
vhardy@5413 | 2111 | <div class="note"> |
vhardy@5413 | 2112 | <p>The model for resolving auto sized regions will cause, under certain circumstances, |
vhardy@5413 | 2113 | the flow content to be overset or underset. In other words, it will not fit tightly. |
vhardy@5413 | 2114 | The model prevents having circular dependencies in the layout model. Implementations |
vhardy@5413 | 2115 | may decide to apply further layout steps to ensure that the whole flow content is |
vhardy@5413 | 2116 | displayed to the user, even in edge cases.</p> |
vhardy@5413 | 2117 | </div> |
vhardy@5413 | 2118 | |
vhardy@5335 | 2119 | <h3 id="regions-visual-formatting-implementation-note">Regions visual formatting: implementation note</h3> |
vhardy@5335 | 2120 | |
vhardy@5377 | 2121 | <p>The process for resolving an RFCB's 'height' and the three-step process used to |
vhardy@5378 | 2122 | lay out documents containing regions and <span>named flows</span> are |
vhardy@5335 | 2123 | <em>conceptual</em> descriptions of what the layout |
vhardy@5335 | 2124 | should yield and implementations should optimize to reduce the number of |
vhardy@5335 | 2125 | steps and phases necessary wherever possible.</p> |
vhardy@5335 | 2126 | |
vhardy@5335 | 2127 | <h3 id="regions-visual-formatting-examples">Regions visual formatting example</h3> |
vhardy@5335 | 2128 | |
vhardy@5335 | 2129 | <p>This section is non-normative.</p> |
vhardy@5335 | 2130 | |
vhardy@5335 | 2131 | <p>This example considers a document where content flows between three regions, |
vhardy@5335 | 2132 | and region boxes are intermixed with the normal document content.</p> |
vhardy@5335 | 2133 | |
vhardy@5335 | 2134 | <div class="example"> |
vhardy@5335 | 2135 | <pre> |
vhardy@5336 | 2136 | <style> |
vhardy@5336 | 2137 | #article { |
stearns@5422 | 2138 | flow-into: article; |
vhardy@5336 | 2139 | } |
vhardy@5336 | 2140 | |
vhardy@5336 | 2141 | #rA, #rB, #rC { |
stearns@5445 | 2142 | flow-from: article; |
vhardy@5336 | 2143 | height: auto; |
vhardy@5366 | 2144 | margin: 1em 1em 0em 1em; |
vhardy@5366 | 2145 | padding: 1em; |
vhardy@5366 | 2146 | border: 3px solid #46A4E9; |
vhardy@5336 | 2147 | } |
vhardy@5336 | 2148 | |
vhardy@5336 | 2149 | #rA { |
vhardy@5336 | 2150 | width: auto; |
vhardy@5336 | 2151 | height: auto; |
vhardy@5336 | 2152 | } |
vhardy@5336 | 2153 | |
vhardy@5336 | 2154 | #rB { |
vhardy@5336 | 2155 | float: left; |
vhardy@5366 | 2156 | width: 15em; |
vhardy@5336 | 2157 | height: auto; |
vhardy@5336 | 2158 | max-height: 150px; |
vhardy@5336 | 2159 | } |
vhardy@5336 | 2160 | |
vhardy@5336 | 2161 | #rC { |
vhardy@5336 | 2162 | float: right; |
vhardy@5366 | 2163 | width: 12em; |
vhardy@5336 | 2164 | height: auto; |
vhardy@5336 | 2165 | } |
vhardy@5336 | 2166 | |
vhardy@5336 | 2167 | #main-flow { |
vhardy@5366 | 2168 | padding: 0em 1em 0em 1em; |
vhardy@5336 | 2169 | } |
vhardy@5336 | 2170 | |
vhardy@5336 | 2171 | </style> |
vhardy@5336 | 2172 | <body> |
vhardy@5336 | 2173 | <div id="article"> |
stearns@5422 | 2174 | <p style="region-break-after:always;">I am not a ... </p> |
vhardy@5336 | 2175 | <p>...</p> |
vhardy@5336 | 2176 | </div> |
vhardy@5336 | 2177 | <div id="rA"></div> |
vhardy@5336 | 2178 | <div id="rB"></div> |
vhardy@5336 | 2179 | <div id="rC"></div> |
vhardy@5336 | 2180 | |
vhardy@5336 | 2181 | <div id="main-flow"> |
vhardy@5336 | 2182 | <p>Lorem ipsum dolor ...</p> |
vhardy@5336 | 2183 | </div> |
vhardy@5336 | 2184 | </body> |
vhardy@5335 | 2185 | </pre> |
vhardy@5335 | 2186 | </div> |
vhardy@5335 | 2187 | |
vhardy@5366 | 2188 | <p>The following sections and figures illustrate the intermediate results for the visual formatting process. |
vhardy@5366 | 2189 | In the following, we call RFCB-A, RFCB-B and RFCB-C the <span>RFCBs</span> for |
vhardy@5366 | 2190 | regions rA, rB and rC respectively. </p> |
vhardy@5366 | 2191 | |
vhardy@5366 | 2192 | <h4>Step 1 - Phase 1: Laying out RFCBs with used height of zero</h4> |
vhardy@5366 | 2193 | |
vhardy@5366 | 2194 | <p>Applying the rules for Step 1, Phase 1, the computed 'auto' 'width' values for the RFCBs are resolved |
vhardy@5366 | 2195 | to used values according to the normal |
vhardy@5366 | 2196 | <a href="http://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins">CSS layout rules</a> meaning they |
vhardy@5366 | 2197 | stretch to the width of their containing block's content box.</p> |
vhardy@5366 | 2198 | |
vhardy@5366 | 2199 | <ol> |
vhardy@5366 | 2200 | <li>RFCB-A: stretches to fit the rA content box.</li> |
vhardy@5366 | 2201 | Since rA also has an 'auto' 'width', its own used 'width' is stretched to fit the |
vhardy@5366 | 2202 | <code><body></code> content box.</p> |
vhardy@5366 | 2203 | <li>RFCB-B: stretches to fit the <code>rB</code> content box.</li> |
vhardy@5366 | 2204 | <li>RFCB-C: stretches to fit the <code>rC</code> content box.</li> |
vhardy@5366 | 2205 | </ol> |
vhardy@5366 | 2206 | |
vhardy@5366 | 2207 | <p>Also applying the rules for Step 1, Phase 1, the used values for the RFCBs 'height' properties are all zero.</p> |
vhardy@5366 | 2208 | |
vhardy@5366 | 2209 | <p>Conceptually, this produces the layout illustrated below.</p> |
vhardy@5335 | 2210 | |
vhardy@5335 | 2211 | <div class="figure"> |
vhardy@5366 | 2212 | <img src="images/flow-fragment-height-phase-1.png" width="500px" alt="Step 1 - Phase 1: Layout RFBCs with used heights of 0"/> |
vhardy@5366 | 2213 | <p class="caption">Step 1 - Phase 1: Layout RFBCs with used heights of 0</p> |
vhardy@5335 | 2214 | </div> |
vhardy@5366 | 2215 | |
vhardy@5366 | 2216 | <h4>Step 1 - Phase 2: Layout flow to compute the RFCBs' flow fragments heights</h4> |
vhardy@5335 | 2217 | |
vhardy@5366 | 2218 | <p>In this second phase of Step 1, the named flow is laid out in <span>regions</span> |
vhardy@5366 | 2219 | and the height of each fragment falling in each RFCB is computed.</p> |
vhardy@5366 | 2220 | |
vhardy@5366 | 2221 | <p>The user agent lays out as much of the flow into an area |
vhardy@5366 | 2222 | with RFCB-A's used 'width'. rA's 'height' computes to 'auto' and there is no vertical maximum |
vhardy@5366 | 2223 | height for RFCA's 'height'. However, because there is a break after the |
vhardy@5366 | 2224 | first paragraph in the 'article' <code>named flow</code>, only this first paragraph is |
vhardy@5366 | 2225 | laid out in RFCB-A and FH-A (the flow fragment height for RFCB-A) is resolved by laying out |
vhardy@5366 | 2226 | this first paragraph in the used 'width'.</p> |
vhardy@5366 | 2227 | |
vhardy@5366 | 2228 | <p>At this point, the user agent lays out as much of the remaining flow as possible in RFCB-B. |
vhardy@5366 | 2229 | Because rB's 'max-height' computed value is '150px', the user agent only lays out |
vhardy@5366 | 2230 | the 'article' named flow using RFCB-B's used 'width' until the point where |
vhardy@5366 | 2231 | laying out additional content would cause RFCB-B to overflow rB's box. |
vhardy@5366 | 2232 | The fragment height for RFCB-B is resolved: FH-B (<code class="css">150px</code>).</p> |
vhardy@5366 | 2233 | |
vhardy@5366 | 2234 | <p>Finally, the user agent lays out the remainder of the flow in RFCB-C. |
vhardy@5366 | 2235 | Because rC has no other constraints and no region breaks, the remaining content is |
vhardy@5366 | 2236 | laid out in RFCB-C's used 'width'. This results in a resolved flow fragment height: FH-C.</p> |
vhardy@5366 | 2237 | |
vhardy@5335 | 2238 | <div class="figure"> |
vhardy@5366 | 2239 | <img src="images/flow-fragment-height-phase-2.png" width="370px" alt="Step 1 - Phase 2: Measure flow fragments heights"/> |
vhardy@5354 | 2240 | <p class="caption">Step 1 - Phase 2: Measure flow fragments heights</p> |
vhardy@5335 | 2241 | </div> |
vhardy@5335 | 2242 | |
vhardy@5366 | 2243 | <h4>Step 2: Layout document and regions without named flows</h4> |
vhardy@5366 | 2244 | |
vhardy@5366 | 2245 | <p>The used 'width' of RFCB-A, RFCB-B and RFCB-C are resolved as in the previous step. However, the |
vhardy@5366 | 2246 | 'height' is resolved differently.</p> |
vhardy@5366 | 2247 | |
vhardy@5366 | 2248 | <p>Resolving the 'height' of rA <a href="http://www.w3.org/TR/CSS2/visudet.html#normal-block">requires a content measure</a> |
vhardy@5366 | 2249 | which is FH-A (the flow fragment height for RFCB-A).</p> |
vhardy@5366 | 2250 | |
vhardy@5366 | 2251 | <p>The 'height' of rB results from first computing its |
vhardy@5366 | 2252 | <a href="http://www.w3.org/TR/CSS2/visudet.html#block-root-margin">content measure</a> and then applying the |
vhardy@5366 | 2253 | <a href="http://www.w3.org/TR/CSS2/visudet.html#min-max-heights">rules for 'max-height'</a>. Here, the |
vhardy@5366 | 2254 | vertical content measure evaluates to FH-B. After applying the |
vhardy@5366 | 2255 | rules for 'max-height' and accounting for margins, padding and borders, the used 'height' of rB |
vhardy@5366 | 2256 | is resolved to LH-B (<code class="css">150px</code>).</a>. |
vhardy@5366 | 2257 | |
vhardy@5366 | 2258 | <p>The 'height' of rC's box results from |
vhardy@5366 | 2259 | <a href="http://www.w3.org/TR/CSS2/visudet.html#block-root-margin">calculating |
vhardy@5366 | 2260 | its content measure</a>: FH-C becomes rC's used 'height'.</a> |
vhardy@5366 | 2261 | |
vhardy@5335 | 2262 | <div class="figure"> |
vhardy@5335 | 2263 | <img src="images/regions-visual-formatting-step-2.png" width="370px" alt="Step 2: Layout document and regions without named flows"/> |
vhardy@5352 | 2264 | <p class="caption">Step 2: Layout document and regions without <span>named flows</span></p> |
vhardy@5335 | 2265 | </div> |
vhardy@5335 | 2266 | |
vhardy@5366 | 2267 | <h4>Step 3: named flows layout</h4> |
vhardy@5366 | 2268 | |
vhardy@5366 | 2269 | <p>In this final step, the <code class="css">article</code> <span>named flow</span> is laid out in its |
vhardy@5366 | 2270 | <span>region chain</span>. The used 'width' for each of the RFCB is resolved as in step 1 above.</p> |
vhardy@5366 | 2271 | |
vhardy@5366 | 2272 | <p>The used 'height' for the RFCB is a result of laying out the as much of the content in the |
vhardy@5366 | 2273 | <span>region</span> without overflowing its content box and following the |
vhardy@5366 | 2274 | <a href="http://www.w3.org/TR/css3-break/">fragmentation rules</a>.</p> |
vhardy@5366 | 2275 | |
vhardy@5366 | 2276 | <p>Because the computed 'width' of the RFCB has not changed and the fragmentation rules applied are |
vhardy@5366 | 2277 | the same as in Phase 1, Step 2, the used 'height' for RFCB-A, RFCB-B and RFCB-C are |
vhardy@5366 | 2278 | LH-A, LH-B and LH-C, respectively.</p> |
vhardy@5366 | 2279 | |
vhardy@5366 | 2280 | <p>There may be situations where the used 'height' of RFCBs resolved in Step 3 are different from the |
vhardy@5366 | 2281 | <span>flow fragment height</span> computed in Step 1 Phase 2.</p> |
vhardy@5366 | 2282 | |
vhardy@5354 | 2283 | <div class="figure"> |
vhardy@5366 | 2284 | <img src="images/regions-visual-formatting-step-3.png" width="370px" alt="Step 3: Final result after laying out named flows in regions"/> |
vhardy@5354 | 2285 | <p class="caption">Step 3: Final result after laying out named flows in regions</p> |
vhardy@5354 | 2286 | </div> |
vhardy@5354 | 2287 | |
vhardy@5335 | 2288 | |
vhardy@5289 | 2289 | <h2 id="relation-to-document-events">Relation to document events</h2> |
vhardy@5289 | 2290 | |
vhardy@5289 | 2291 | <p>The CSS regions module does not alter the normal processing of |
vhardy@5289 | 2292 | events in the document tree. In particular, if an event occurs on an |
vhardy@5352 | 2293 | element that is part of a <span>named flow</span>, the <a href= |
vhardy@5289 | 2294 | "http://www.w3.org/TR/dom/#events">event's |
vhardy@5289 | 2295 | bubble and capture phases</a> happen following the document tree order.</p> |
vhardy@5289 | 2296 | |
vhardy@5289 | 2297 | |
vhardy@2945 | 2298 | <h2 id="relation-to-other-specifications">Relation to other |
vhardy@2945 | 2299 | specifications</h2> |
alexmog@2565 | 2300 | |
vhardy@2779 | 2301 | <p>This specification is related to other specifications as described in |
vhardy@2779 | 2302 | the <a href='#references'>references</a> section. In addition, it is |
vhardy@2779 | 2303 | related to the following specifications:</p> |
alexmog@2565 | 2304 | |
vhardy@2779 | 2305 | <ol> |
vhardy@5373 | 2306 | <li>CSS Fragmentation Module Level 3 [[CSS3-BREAK]]. This module defines the |
vhardy@5373 | 2307 | rules for fragmenting content over multiple containers and applies to |
vhardy@5373 | 2308 | CSS regions in addition to applying to multi-column and paged media.</li> |
vhardy@5373 | 2309 | |
vhardy@5390 | 2310 | <li>CSS Pagination Templates Module Level 3 [[CSS3-PAGE-TEMPLATE]]. This module |
vhardy@5373 | 2311 | defines a syntax to define layout templates which can be used |
vhardy@5373 | 2312 | when paginating content. The page templates use regions.</li> |
vhardy@5373 | 2313 | |
bert@3938 | 2314 | <li>CSS Exclusions Module [[CSS3-EXCLUSIONS]]. This module defines a |
vhardy@2779 | 2315 | generic way to define arbitrarily shaped exclusions into which content |
vhardy@2779 | 2316 | can flow or around which content can flow. This can be seen as an |
vhardy@2791 | 2317 | extension to the way CSS floats provide rectangular areas into which |
vhardy@2779 | 2318 | content flows and around which content flows. In advanced layout |
vhardy@2791 | 2319 | designs, it is expected that the CSS Exclusions module will be commonly |
vhardy@3301 | 2320 | combined with the CSS regions module.</li> |
alexmog@2565 | 2321 | |
bert@3938 | 2322 | <li>CSS Line Grid Module [[CSS3-LINE-GRID]]. This module defines a |
vhardy@2779 | 2323 | concept of line grid to align the position of lines in different |
vhardy@2779 | 2324 | elements. The line grid functionality is related and needed for |
vhardy@2779 | 2325 | aligning content flowing in separate regions.</li> |
vhardy@2779 | 2326 | </ol> |
vhardy@3940 | 2327 | |
vhardy@3940 | 2328 | <h2 id="usecases">Use Cases</h2> |
vhardy@3940 | 2329 | |
vhardy@3940 | 2330 | <p>Use cases are described on <a href="http://wiki.csswg.org/spec/css3-regions/regions-use-cases">this |
vhardy@3940 | 2331 | page</a>.</p> |
alexmog@2565 | 2332 | |
vhardy@2779 | 2333 | <h2 id="conformance">Conformance</h2> |
vhardy@3073 | 2334 | |
vhardy@3073 | 2335 | <h2 id="changes">Changes</h2> |
alexmog@2565 | 2336 | |
vhardy@4119 | 2337 | <h3 id="changes_from_June_09_2011">Changes from <a href="http://www.w3.org/TR/2011/WD-css3-regions-20111129/">November 29<sup>th</sup> 2011</a> version</h3> |
vhardy@4119 | 2338 | |
vhardy@4119 | 2339 | <ul> |
vhardy@4119 | 2340 | <li>Modified region styling examples to use element selector instead of of pseudo-code selectors (this had been omitted in the |
vhardy@4119 | 2341 | previous pass at removing pseudo-code from the examples).</li> |
vhardy@4119 | 2342 | <li>Removed divs with class set to "issue moved", "issue stale" and "issue resolved" since these divs where not displayed. |
vhardy@4119 | 2343 | <li>Minor updates to the alternate stylesheet.</li> |
vhardy@4314 | 2344 | <li>Removed "This section is normative" paragraphs since in CSS specifications, sections are normative unless |
vhardy@4314 | 2345 | otherwise specified.</li> |
vhardy@4314 | 2346 | <li>Removed "This section is informative" paragraphs since in CSS specifications notes are always informative.</li> |
vhardy@4318 | 2347 | <li>Reworded the text about flow-into: <ident> and removed obsolete text about the interaction with the |
vhardy@4318 | 2348 | 'content' property.</li> |
vhardy@4331 | 2349 | <li>Removed "this section is non-normative" from the "Regions Concepts" section.</li> |
vhardy@4336 | 2350 | <li>In the section on region breaks, removed descriptions of break values normatively defined in external specifications. |
vhardy@4336 | 2351 | Removed the section about split boxes and replaced with paragraph referencing the page breaking behavior. |
vhardy@4336 | 2352 | Removed the discussion about how the 'overflow' property applies to content flown in regions from the |
vhardy@4336 | 2353 | break section, since this is covered in the section on 'region-overflow' already. See <a href="http://lists.w3.org/Archives/Public/www-style/2011Dec/0477.html">mailing list feedback.</a></li> |
vhardy@4338 | 2354 | <li>Clarified that @region style rules only apply to the 'portion' of an element that falls into |
vhardy@4338 | 2355 | the corresponding region and added an issue that the model for 'partial' styling needs to |
vhardy@4338 | 2356 | be defined. See <a href="http://lists.w3.org/Archives/Public/www-style/2011Dec/0480.html">mailing list feedback</a>.</li> |
vhardy@4395 | 2357 | <li>Clarified that the <code>NodeList</code> returned by <code>getRegionsByContentNode</code> is live.</li> |
vhardy@4400 | 2358 | <li>Added a name property to the <code>NamedFlow</code> interface. Added a <code>NamedFlowCollection</code> |
vhardy@4400 | 2359 | interface and added a <code>getNamedFlows</code> method on the <code>Document</code> interface, as |
vhardy@4400 | 2360 | per <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15828">Bug 15828</a>.</li> |
vhardy@4409 | 2361 | <li>Modified wording about containing block resolution for absolutely positioned elements in a |
vhardy@4409 | 2362 | named flow.</li> |
vhardy@4413 | 2363 | <li>Modified initial examples as per <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15131">Bug 15131</a></li> |
vhardy@4415 | 2364 | <li>Multiple editorial changes following |
vhardy@4415 | 2365 | <a href="http://lists.w3.org/Archives/Public/www-style/2012Feb/0001.html">mailing list review comments</a></li> |
vhardy@5094 | 2366 | <li>Fixed DOM references to now point to the DOM TR</li> |
vhardy@5095 | 2367 | <li>Fixed Web IDL issues as reported in <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15931">Issue 15931</a></li> |
vhardy@5131 | 2368 | <li>Added text to explain support for multi-column elements as required by <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15191">Issue 15191</a> and <a href="http://www.w3.org/Style/CSS/Tracker/actions/375">Action 375</a>.</li> |
vhardy@5232 | 2369 | <li>Renamed 'regionOverflow' to 'regionOverset' to avoid confusion between fitting a flow in |
vhardy@5232 | 2370 | regions and the concept of visual overflow that the word 'overflow' (and the property) carry.</li> |
vhardy@5232 | 2371 | <li>Reworked the partial document interface following the <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=14948">Issue 14948</a> on <code>getFlowByName</code>.</li> |
vhardy@5255 | 2372 | <li>Updated the object model section as proposed on the <a href="http://wiki.csswg.org/spec/css3-regions/css-om">wiki</a> and in particular: |
vhardy@5255 | 2373 | <ul> |
vhardy@5255 | 2374 | <li>introduced a <code>Region</code> interface to replace the supplemental Element interface</li> |
vhardy@5255 | 2375 | <li>Added a 'flowFrom' attribute on the Region interface</li> |
vhardy@5255 | 2376 | <li>NamedFlow.getRegions() was added</li> |
vhardy@5255 | 2377 | <li>Renamed getContentNode to getContent and getRegionsByContentNode to getRegionsByContent as |
vhardy@5255 | 2378 | per <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15879">Isseu 15879</a></li> |
vhardy@5255 | 2379 | <li>NamedFlow now returns static lists (see <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16286">Issue 16286</a>)</li> |
vhardy@5255 | 2380 | |
vhardy@5255 | 2381 | </ul> |
vhardy@5255 | 2382 | </li> |
vhardy@5264 | 2383 | <li>Modified region layout event to be dispatched on <code>NamedFlow</code> instead of region |
vhardy@5264 | 2384 | as before. Was requested by <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15938">Issue 15938</a> |
vhardy@5264 | 2385 | and required in the general effort to have the DOM APIs work with non-element regions.</li> |
vhardy@5267 | 2386 | <li>Changed paragraph on pseudo-elements to disallow 'flow-into' on all pseudo-elements because |
vhardy@5267 | 2387 | moving a '::before' element (for a example) to a named flow does not seem useful and causes specification |
vhardy@5267 | 2388 | and implementation complexity.</li> |
vhardy@5270 | 2389 | <li>Added section about getClientRects(), getBoundingClientRect(), offsetWidth, offsetHeight, offsetTop and |
vhardy@5270 | 2390 | offsetLeft.</li> |
vhardy@5290 | 2391 | <li>Added 'Regions visual formatting details' section to better describe the model for |
vhardy@5290 | 2392 | resolving auto sizing on regions.</li> |
vhardy@5373 | 2393 | <li>Reworked the initial specification example.</li> |
stearns@5453 | 2394 | <li>Changed break and region-overflow properties to apply to visual media instead of paged.</li> |
stearns@5453 | 2395 | <li>Added opacity to region styling.</li> |
vhardy@4119 | 2396 | </ul> |
vhardy@4119 | 2397 | |
vhardy@4119 | 2398 | |
vhardy@3073 | 2399 | <h3 id="changes_from_June_09_2011">Changes from <a href="http://www.w3.org/TR/2011/WD-css3-regions-20110609/">June 09<sup>th</sup> 2011</a> version</h3> |
vhardy@3073 | 2400 | |
vhardy@3073 | 2401 | <ul> |
vhardy@3301 | 2402 | <li>Editorial changes (typos, rephrasings).</li> |
vhardy@3547 | 2403 | <li>Made 'content-order' a <integer> and not a <float> following a working group |
vhardy@3073 | 2404 | <a href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0329.html">resolution</a></li> |
vhardy@3073 | 2405 | <li>Added Alex Mogilevsky as an editor</li> |
vhardy@3558 | 2406 | <li>Flow names became <ident> instead of <string> following a working group |
vhardy@3073 | 2407 | <a href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0413.html">resolution</a></li> |
vhardy@3073 | 2408 | <li>Removed issue about possibly altering the DOM Events model for region events following |
vhardy@3073 | 2409 | a working group |
vhardy@3073 | 2410 | <a href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0413.html">resolution</a></li> |
vhardy@3073 | 2411 | <li>Made the "relation to document events" section informative following a working group |
vhardy@3073 | 2412 | <a href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0413.html">resolution</a></li> |
vhardy@3073 | 2413 | <li>Removed issue in section "The NamedFlow interface" following the working group's |
vhardy@3073 | 2414 | <a href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0413.html">resolution</a> to |
vhardy@3073 | 2415 | have both NamedFlow and the Element interface extension</li> |
vhardy@3073 | 2416 | <li>Following a working group <a href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0413.html">resolution</a>: |
vhardy@3073 | 2417 | <ul> |
vhardy@3073 | 2418 | <li>Turned the first issue in the "Extensions to the Element interface" into a note |
vhardy@3073 | 2419 | explaining that the NamedFlow interface can be used when regions are pseudo-elements.</li> |
vhardy@3138 | 2420 | <li>Added NamedFlowUpdate</li> |
vhardy@3073 | 2421 | </ul> |
vhardy@3073 | 2422 | </li> |
vhardy@3073 | 2423 | <li>Excluded 'none', 'inherit' and 'initial' from the possible identifier names on |
vhardy@3073 | 2424 | the flow property following <a href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0583.html">discussion</a> on the mailing list.</li> |
vhardy@3073 | 2425 | <li>Simplified integration discussion on multi-column layout and just state that since |
vhardy@3073 | 2426 | column boxes are not addressable by selectors, they cannot be regions.</li> |
vhardy@3262 | 2427 | <li>Added specification of how the 'flow-into' property interacts with object, embed and iframe |
vhardy@3073 | 2428 | elements.</li> |
vhardy@3138 | 2429 | <li>Excluded 'default' from the possible identifier names on the flow property because it |
vhardy@3138 | 2430 | <a href="http://www.w3.org/TR/2006/WD-css3-values-20060919/#keywords">may get reserved</a>.</li> |
vhardy@3138 | 2431 | <li>Added to the definition of 'auto' on 'region-overflow' specifying that region breaks must |
vhardy@3138 | 2432 | be ignored.</li> |
vhardy@3138 | 2433 | <li>Renamed 'Document.flowWithName' to 'Document.getFlowByName' since it is not a property.</li> |
vhardy@3138 | 2434 | <li>Added a note that a 'NamedFlow' instance is live.</li> |
vhardy@3138 | 2435 | <li>Added an 'undefined' string value to the regionOverflow property on the Element interface |
vhardy@3138 | 2436 | extension.</li> |
vhardy@3272 | 2437 | <li>Renamed NamedFlowEvent to regionLayoutUpdate to avoid having 'Event' in the event name.</li> |
alexmog@3156 | 2438 | <li>Added description for special behavior of iframe/object/embed as |
alexmog@3156 | 2439 | flow source</li> |
vhardy@3262 | 2440 | <li>Removed issue on copying content to a named flow instead of moving elements to named |
vhardy@3262 | 2441 | flow following working group <a href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a>.</li> |
vhardy@3262 | 2442 | <li>Removed issue on content:flow-from v.s., flow-from property following working group <a href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a>.</li> |
vhardy@3262 | 2443 | <li>Renamed 'flow' to 'flow-into' following working group <a href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a>.</li> |
vhardy@3262 | 2444 | <li>Updated the css3-grid-align example following working group <a href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a> that |
vhardy@3262 | 2445 | it should use <div> instead of grid-cell pseudo elements that were removed |
vhardy@3262 | 2446 | from the CSS Grid Layout specification.</li> |
vhardy@3262 | 2447 | <li>Renamed 'from-flow' to 'flow-from' following a working group <a href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a>.</li> |
vhardy@3262 | 2448 | <li>Limited the applicability of 'content: flow-from()' to block container box and added |
vhardy@3262 | 2449 | a note that this might be expanded in the future, following a working group <a href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a>.</li> |
vhardy@3262 | 2450 | <li>Removed issue about API to find which region displays an element in a named flow |
vhardy@3262 | 2451 | since <a href="http://www.w3.org/Style/CSS/Tracker/actions/350">ACTION-350</a> was |
vhardy@3262 | 2452 | created to add this API.</li> |
vhardy@3267 | 2453 | <li>In the 'flow' property description, removed the required wrapper anonymous |
vhardy@3267 | 2454 | block as agreed on <a href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0161.html">mailing list discussion</a>.</li> |
vhardy@3267 | 2455 | <li>Reworded the paragraph on how regions create a new stacking context, as |
vhardy@3302 | 2456 | per the <a href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0025.html">mailing list discussion</a>.</li> |
vhardy@3301 | 2457 | <li>Reworked the "CSS regions Model" section to now be "CSS regions Layout". Moved the |
vhardy@3267 | 2458 | definition of a region as the first sub-section.</li> |
vhardy@3267 | 2459 | <li>Removed the "Visual Formatting Model and Flows" section to match the new Regions Model |
vhardy@3301 | 2460 | (now CSS regions Layout) section.</li> |
vhardy@3267 | 2461 | <li>Moved the sections on allowed region breaks, forced region breaks and "best" regions |
vhardy@3267 | 2462 | breaks to follow the property definitions to follow the formatting of the paged |
vhardy@3267 | 2463 | media section in CSS 2.1.</li> |
vhardy@3267 | 2464 | <li>Added note about why regions create a new stacking context following the discussion |
vhardy@3267 | 2465 | on the <a href="http://lists.w3.org/Archives/Public/www-style/2011Jul/0158.html">mailing list</a>.</li> |
vhardy@3267 | 2466 | <li>Removed sentence about content:none making elements disconnected following the |
vhardy@3267 | 2467 | discussion on the <a href="http://lists.w3.org/Archives/Public/www-style/2011Jul/0158.html">mailing list</a>.</li> |
vhardy@3267 | 2468 | <li>Removed sentence about content:none making elements disconnected following the |
vhardy@3267 | 2469 | discussion on the <a href="http://lists.w3.org/Archives/Public/www-style/2011Jul/0158.html">mailing list</a>.</li> |
vhardy@3272 | 2470 | <li>Added the ::region-before and a ::region-after pseudo-elements.</li> |
vhardy@3272 | 2471 | <li>Added note of caution when using selectors and the 'flow-into' property following |
vhardy@3272 | 2472 | a <a href="http://lists.w3.org/Archives/Public/www-style/2011Jul/0191.html">mailing list discussion</a>.</li> |
vhardy@3301 | 2473 | <li>Removed sections about allowed, forced and best region breaks to align with the |
vhardy@3301 | 2474 | multi-column specification approach and until the group agrees on where and how the |
vhardy@3301 | 2475 | general issue of breaks (regions/pages/columns) should be addressed.</li> |
vhardy@3301 | 2476 | <li>Removed the section on Integration with other specifications since specifications that |
vhardy@3301 | 2477 | was superfluous especially since there is no specific integration with multi column, |
vhardy@3301 | 2478 | grid or template layout.</li> |
vhardy@3377 | 2479 | <li>Added a note that regions establish a new block formatting context.</li> |
vhardy@3377 | 2480 | <li>Renamed content-order to region-order.</li> |
vhardy@3377 | 2481 | <li>Added a note about overflowing content in regions (e.g., for content with borders).</li> |
vhardy@3377 | 2482 | <li>Added a note that a region cannot layout content it is part of (to avoid creating a |
vhardy@3377 | 2483 | circular dependency) in the flow-from description, specifying that if flow-from |
vhardy@3377 | 2484 | references the flow an element is part of, then the element does not format |
vhardy@3377 | 2485 | anything visually.</li> |
vhardy@3547 | 2486 | <li>Replaced 'content:flow-from(<ident>)' with 'flow-from: <ident>' following a |
vhardy@3547 | 2487 | <a href="http://krijnhoetmer.nl/irc-logs/css/20110824">working group resolution</a>.</li> |
vhardy@3547 | 2488 | <li>Added more specific wording about auto width and auto height, following |
vhardy@3547 | 2489 | <a href="http://www.w3.org/Style/CSS/Tracker/actions/351">ACTION 351</a>.</li> |
vhardy@3547 | 2490 | <li>Reworked section on region markers to now use '::before' and '::after' and explain |
vhardy@3547 | 2491 | how 'display:run-in' works with regions.</li> |
vhardy@3547 | 2492 | <li>Modified the @region style rule to remove the ::region-lines pseudo-selector.</li> |
vhardy@3547 | 2493 | <li>Removed the 'region-order' property following implementation feedback.</li> |
vhardy@3660 | 2494 | <li>Specified that region-overflow does not influence a region's size.</li> |
vhardy@3660 | 2495 | <li>Specified that the flow's writing mode is defined by the first region's writing mode |
vhardy@3660 | 2496 | following <a href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0306.html">mailing list discussion</a>.</li> |
vhardy@3660 | 2497 | <li>Made iframe, object and embed support of flow-into optional following |
vhardy@3660 | 2498 | <a href="http://lists.w3.org/Archives/Public/www-style/2011Sep/0073.html">mailing list discussion</a>.</li> |
vhardy@3660 | 2499 | <li>Clarified that flow content following the last break in the last region is not rendered, |
vhardy@3660 | 2500 | following <a href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0167.html">mailing list |
bert@3938 | 2501 | discussions.</a></li> |
vhardy@3660 | 2502 | <li>Modified the rule for computing the width and height of a region when they are set to auto, |
vhardy@3660 | 2503 | following <a href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0216.html">a mailing list |
vhardy@3660 | 2504 | discussion.</a></li> |
vhardy@3660 | 2505 | <li>Added 'auto' to the list of invalid flow identifiers.</li> |
vhardy@3660 | 2506 | <li>Made 'none' the initial value for 'flow-into' and aligned with 'flow-from', as |
vhardy@3660 | 2507 | explained in this <a href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0576.html">email</a>. |
vhardy@3660 | 2508 | Also allowed the 'inherit' value on 'flow-from' and 'flow-into' (same email).</li> |
vhardy@3660 | 2509 | <li>Added note about nested region styling following <a href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0650.html">a mailing list discussion</a>.</li> |
vhardy@3681 | 2510 | <li>Added additional DOM interface following <a href="http://www.w3.org/Style/CSS/Tracker/actions/350">Action 350</a>.</li> |
vhardy@3940 | 2511 | <li>Clarified that a region becomes a region only if its 'content' property computes to |
vhardy@3940 | 2512 | normal, following the resolution of <a href="http://wiki.csswg.org/spec/css3-regions#issue-22content-vs-flow-from-precedence">Issue 22</a>.</li> |
vhardy@3940 | 2513 | <li>Removed text about special iframe behavior as a result of |
vhardy@3940 | 2514 | <a href="http://www.w3.org/Style/CSS/Tracker/actions/376">ACTION 376</a>.</li> |
vhardy@3940 | 2515 | <li>Made the selectors explicit in the initial section code examples, following |
vhardy@3940 | 2516 | discussion in <a href="http://krijnhoetmer.nl/irc-logs/css/20111030">San Jose, October 2011</a> face to face meeting.</li> |
vhardy@3940 | 2517 | <li>Added section on use cases following <a href="http://www.w3.org/Style/CSS/Tracker/actions/377">ACTION-377</a>.</li> |
vhardy@3073 | 2518 | </ul> |
vhardy@3073 | 2519 | |
vhardy@2779 | 2520 | <h2 class="no-num" id="acknowledgments">Acknowledgments</h2> |
alexmog@2565 | 2521 | |
vhardy@3547 | 2522 | <p>The editors are grateful to the CSS working group for their feedback and help with |
vhardy@3547 | 2523 | the genesis of this specification.</p> |
vhardy@3547 | 2524 | |
vhardy@3547 | 2525 | <p>In addition, the editors would like to thank the following individuals for their contributions, |
vhardy@3547 | 2526 | either during the conception of CSS regions or during its development and specification review |
vhardy@3547 | 2527 | process:</p> |
vhardy@3547 | 2528 | <ul> |
vhardy@4437 | 2529 | <li>Rossen Atanassov</li> |
stearns@5445 | 2530 | <li>Tab Atkins</li> |
vhardy@4437 | 2531 | <li>Andrei Bucur</li> |
vhardy@4437 | 2532 | <li>Alexandru Chiculita</li> |
vhardy@4437 | 2533 | <li>Phil Cupp</li> |
vhardy@4437 | 2534 | <li>Arron Eicholz</li> |
vhardy@4437 | 2535 | <li>John Jansen</li> |
stearns@5445 | 2536 | <li>Daniel Glazman</li> |
vhardy@4437 | 2537 | <li>Arno Gourdol</li> |
vhardy@4437 | 2538 | <li>David Hyatt</li> |
vhardy@4437 | 2539 | <li>Brian Heuston</li> |
vhardy@4437 | 2540 | <li>Ian Hickson</li> |
vhardy@4437 | 2541 | <li>Jonathan Hoersch</li> |
vhardy@4437 | 2542 | <li>Michael Jolson</li> |
vhardy@4437 | 2543 | <li>Brad Kemper</li> |
vhardy@4437 | 2544 | <li>Håkon Wium Lie</li> |
vhardy@4437 | 2545 | <li>Markus Mielke</li> |
vhardy@4437 | 2546 | <li>Robert O'Callahan</li> |
vhardy@4437 | 2547 | <li>Edward O'Connor</li> |
vhardy@4437 | 2548 | <li>Mihnea Ovidenie</li> |
vhardy@4437 | 2549 | <li>Virgil Palanciuc</li> |
vhardy@4437 | 2550 | <li>Olga Popiv</li> |
vhardy@3547 | 2551 | <li>Christoph Päper</li> |
vhardy@4437 | 2552 | <li>Anton Prowse</li> |
vhardy@4437 | 2553 | <li>Peter Sorotokin</li> |
vhardy@4437 | 2554 | <li>Alan Stearns</li> |
vhardy@4437 | 2555 | <li>Christian Stockwell</li> |
vhardy@4437 | 2556 | <li>Eugene Veselov</li> |
stearns@5445 | 2557 | <li>Boris Zbarsky</li> |
vhardy@4437 | 2558 | <li>Stephen Zilles</li> |
vhardy@3547 | 2559 | </ul> |
stearns@5445 | 2560 | |
stearns@5445 | 2561 | <h2 id="intro-example-code" class="no-num">Appendix A. Example Code for Introduction</h2> |
stearns@5445 | 2562 | <p>The following is one possible way |
stearns@5445 | 2563 | to code the example from |
stearns@5445 | 2564 | the <a href="#introduction">introduction</a>. |
stearns@5445 | 2565 | This code uses grid cells |
stearns@5445 | 2566 | to define, size and position the region areas |
stearns@5445 | 2567 | but table layout, absolute positioning, |
stearns@5445 | 2568 | or any other CSS layout facility could be used.</p> |
stearns@5445 | 2569 | |
stearns@5445 | 2570 | <p>The following code snippet |
stearns@5445 | 2571 | shows the content to flow |
stearns@5445 | 2572 | through the region chain.</p> |
stearns@5445 | 2573 | <pre> |
stearns@5445 | 2574 | <div <em>id="article"</em>> |
stearns@5445 | 2575 | <h1>Introduction</h1> |
stearns@5445 | 2576 | <p>This is an example ...</p> |
vhardy@3547 | 2577 | |
stearns@5445 | 2578 | <h2>More Details</h2> |
stearns@5445 | 2579 | <p>This illustrates ...</p> |
stearns@5445 | 2580 | <p>Then, the example ...</p> |
stearns@5445 | 2581 | <p>Finally, this ...</p> |
stearns@5445 | 2582 | </div> |
stearns@5445 | 2583 | </pre> |
stearns@5445 | 2584 | |
stearns@5445 | 2585 | <p>And the following snippet |
stearns@5445 | 2586 | shows an example using grid cells |
stearns@5445 | 2587 | to define, size and position |
stearns@5445 | 2588 | boxes:</p> |
stearns@5445 | 2589 | <pre> |
stearns@5445 | 2590 | <style> |
stearns@5445 | 2591 | #grid { |
stearns@5445 | 2592 | width: 80vw; |
stearns@5445 | 2593 | height: 60vw; |
stearns@5445 | 2594 | grid-template: "aaa.d" |
stearns@5445 | 2595 | "....d" |
stearns@5445 | 2596 | "bbb.d" |
stearns@5445 | 2597 | "....d" |
stearns@5445 | 2598 | "ccc.d"; |
stearns@5445 | 2599 | grid-rows: 52% 4% 20% 4% 20%; |
stearns@5445 | 2600 | grid-columns: 30% 5% 30% 5% 30%; |
stearns@5445 | 2601 | } |
stearns@5445 | 2602 | #region1 { grid-cell: a; } |
stearns@5445 | 2603 | #region2 { grid-cell: b; } |
stearns@5445 | 2604 | #boxA { grid-cell: c; } |
stearns@5445 | 2605 | #region3 { grid-cell: d; } |
stearns@5445 | 2606 | |
stearns@5445 | 2607 | #region4 { |
stearns@5445 | 2608 | width: 80vw; |
stearns@5445 | 2609 | } |
stearns@5445 | 2610 | |
stearns@5445 | 2611 | #region2 { |
stearns@5445 | 2612 | column-count: 2; |
stearns@5445 | 2613 | } |
stearns@5445 | 2614 | </style> |
stearns@5445 | 2615 | |
stearns@5445 | 2616 | <div id="grid"> |
stearns@5445 | 2617 | <div id="region1"></div> |
stearns@5445 | 2618 | <div id="region2"></div> |
stearns@5445 | 2619 | <div id="boxA"></div> |
stearns@5445 | 2620 | <div id="region3"></div> |
stearns@5445 | 2621 | </div> |
stearns@5445 | 2622 | <div id="region4"></div> |
stearns@5445 | 2623 | </pre> |
stearns@5445 | 2624 | |
stearns@5445 | 2625 | <p>Then finally this snippet |
stearns@5445 | 2626 | (from the introduction) |
stearns@5445 | 2627 | creates the named flow |
stearns@5445 | 2628 | and associates it with the intended boxes, |
stearns@5445 | 2629 | which creates a region chain |
stearns@5445 | 2630 | for the named flow.</p> |
stearns@5445 | 2631 | <pre> |
stearns@5445 | 2632 | <style> |
stearns@5445 | 2633 | |
stearns@5445 | 2634 | #article { |
stearns@5445 | 2635 | <strong>flow-into: article_flow;</strong> |
stearns@5445 | 2636 | } |
stearns@5445 | 2637 | |
stearns@5445 | 2638 | #region1, #region2, #region3, #region4 { |
stearns@5445 | 2639 | <strong>flow-from: article_flow;</strong> |
stearns@5445 | 2640 | } |
stearns@5445 | 2641 | </style> |
stearns@5445 | 2642 | </pre> |
stearns@5445 | 2643 | |
stearns@5445 | 2644 | |
stearns@5445 | 2645 | <div class="note"><span class="note-prefix">Note </span> |
stearns@5445 | 2646 | <p> |
stearns@5445 | 2647 | Note that a multi-column element is used for #region2, |
stearns@5445 | 2648 | which is a bit gratuitous here |
stearns@5445 | 2649 | (because grid cells could be used). |
stearns@5445 | 2650 | The reason to use a multi-column element |
stearns@5445 | 2651 | is to illustrate that |
stearns@5445 | 2652 | regions can be multi-column.</p> |
stearns@5445 | 2653 | </div> |
stearns@5445 | 2654 | |
stearns@5445 | 2655 | |
vhardy@2779 | 2656 | <h2 class="no-num" id="references">References</h2> |
alexmog@2565 | 2657 | |
vhardy@2779 | 2658 | <h3 class="no-num" id="normative-references">Normative references</h3> |
vhardy@2779 | 2659 | <!--begin-normative--><!--end-normative--> |
alexmog@2565 | 2660 | |
vhardy@2779 | 2661 | <h3 class="no-num" id="other-references">Other references</h3> |
vhardy@2779 | 2662 | <!--begin-informative--><!--end-informative--> |
alexmog@2565 | 2663 | |
vhardy@2779 | 2664 | <h2 class="no-num" id="index">Index</h2><!--index--> |
alexmog@2565 | 2665 | |
vhardy@2779 | 2666 | <h2 class="no-num" id="property-index">Property index</h2> |
vhardy@4412 | 2667 | |
vhardy@4412 | 2668 | <!-- template markup for issues pulled from Bugzilla --> |
vhardy@4412 | 2669 | <script type="text/template" id="issue-template"> |
vhardy@4536 | 2670 | <div class="issue-marker" style="display:none" data-bug_id="{{bug_id}}" data-bug_status="{{bug_status}}"> |
vhardy@4412 | 2671 | <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id={{bug_id}}">Bug-{{bug_id}}</a> |
vhardy@4412 | 2672 | <div class="issue-details"> |
vhardy@4412 | 2673 | <p class="short-desc">{{short_desc}}</p> |
vhardy@4412 | 2674 | </div> |
vhardy@4412 | 2675 | </div> |
vhardy@4412 | 2676 | </script> |
vhardy@4415 | 2677 | |
vhardy@4412 | 2678 | <script type="text/javascript" src="BugzillaTracker.js"></script> |
vhardy@4412 | 2679 | <script type="text/javascript" src="BugzillaTrackerCSSRegions.js"></script> |
vhardy@4437 | 2680 | |
vhardy@4412 | 2681 | |
vhardy@4412 | 2682 | <div id="issue-manager"> |
vhardy@4412 | 2683 | <h2>Issue manager</h2> |
vhardy@4412 | 2684 | <form action="#"> |
vhardy@4412 | 2685 | <label> |
vhardy@4412 | 2686 | <input type="radio" name="issue-filter" value="all" checked/> |
vhardy@4412 | 2687 | All issues |
vhardy@4412 | 2688 | </label> |
vhardy@4412 | 2689 | <label> |
vhardy@4412 | 2690 | <input type="radio" name="issue-filter" value="updated" /> |
vhardy@4412 | 2691 | Updated issues |
vhardy@4412 | 2692 | </label> |
vhardy@4412 | 2693 | <label> |
vhardy@4412 | 2694 | <input type="radio" name="issue-filter" value="new" /> |
vhardy@4412 | 2695 | New issues |
vhardy@4412 | 2696 | </label> |
vhardy@4412 | 2697 | </form> |
vhardy@4412 | 2698 | |
vhardy@4412 | 2699 | <!-- all the bugs are dumped the #issue-list after being retreived and matched to the ones in the page --> |
vhardy@4412 | 2700 | <div id="issue-list"> |
vhardy@4412 | 2701 | |
vhardy@4412 | 2702 | </div> |
vhardy@4412 | 2703 | </div> |
vhardy@4412 | 2704 | |
vhardy@3547 | 2705 | </body> |
vhardy@3547 | 2706 | </html> |
vhardy@3547 | 2707 | <!-- Keep this comment at the end of the file |
alexmog@2565 | 2708 | Local variables: |
alexmog@2565 | 2709 | mode: sgml |
alexmog@2565 | 2710 | sgml-declaration:"~/SGML/HTML4.decl" |
alexmog@2565 | 2711 | sgml-default-doctype-name:"html" |
alexmog@2565 | 2712 | sgml-minimize-attributes:t |
alexmog@2565 | 2713 | sgml-nofill-elements:("pre" "style" "br") |
alexmog@2565 | 2714 | sgml-live-element-indicator:t |
alexmog@2565 | 2715 | sgml-omittag:nil |
alexmog@2565 | 2716 | sgml-shorttag:nil |
alexmog@2565 | 2717 | sgml-namecase-general:t |
alexmog@2565 | 2718 | sgml-general-insert-case:lower |
alexmog@2565 | 2719 | sgml-always-quote-attributes:t |
alexmog@2565 | 2720 | sgml-indent-step:nil |
alexmog@2565 | 2721 | sgml-indent-data:t |
alexmog@2565 | 2722 | sgml-parent-document:nil |
alexmog@2565 | 2723 | sgml-exposed-tags:nil |
alexmog@2565 | 2724 | sgml-local-catalogs:nil |
alexmog@2565 | 2725 | sgml-local-ecat-files:nil |
alexmog@2565 | 2726 | End: |
vhardy@2779 | 2727 | --> |
vhardy@3547 | 2728 |