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