changeset
[css-regions] start of intro rewrite
Mon, 10 Mar 2014 16:48:01 -0700
- author
- Alan Stearns <stearns@adobe.com>
- date
- Mon, 10 Mar 2014 16:48:01 -0700
- changeset 13493
- 6f59b9da1892
- parent 13492
- f89b7002e112
- child 13494
- db0f542506d0
[css-regions] start of intro rewrite
1.1 --- a/css-regions/Overview.html Mon Mar 10 16:29:21 2014 -0700 1.2 +++ b/css-regions/Overview.html Mon Mar 10 16:48:01 2014 -0700 1.3 @@ -56,7 +56,7 @@ 1.4 </p> 1.5 <h1 class="p-name no-ref" id=title>CSS Regions Module Level 1</h1> 1.6 <h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft, 1.7 - <span class=dt-updated><span class=value-title title=20140224>24 February 2014</span></span></span></h2> 1.8 + <span class=dt-updated><span class=value-title title=20140310>10 March 2014</span></span></span></h2> 1.9 <div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-regions/>http://dev.w3.org/csswg/css-regions/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css-regions/>http://www.w3.org/TR/css-regions/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-regions/>http://dev.w3.org/csswg/css-regions/</a> 1.10 <dt>Feedback:</dt> 1.11 <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-regions%5D%20feedback">www-style@w3.org</a> 1.12 @@ -110,8 +110,6 @@ 1.13 <h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class=content>Table of Contents</span></h2> 1.14 <div data-fill-with=table-of-contents><ul class=toc> 1.15 <li><a href=#introduction><span class=secno>1</span> Introduction</a> 1.16 - <ul class=toc> 1.17 - <li><a href=#named-flows-and-regions><span class=secno>1.1</span> Named flows and region chains</a></ul> 1.18 <li><a href=#css-regions-concepts><span class=secno>2</span> CSS Regions concepts</a> 1.19 <ul class=toc> 1.20 <li><a href=#regions><span class=secno>2.1</span> Regions</a> 1.21 @@ -169,7 +167,6 @@ 1.22 <li><a href=#changes_from_May_03_2012><span class=secno>11.3</span> Changes from <span>May 3<sup>rd</sup> 2012</span> version</a> 1.23 <li><a href=#older_changes><span class=secno>11.4</span>Older Changes</a></ul> 1.24 <li><a href=#acknowledgments><span class=secno></span> Acknowledgments</a> 1.25 - <li><a href=#intro-example-code><span class=secno></span> Appendix A. Example Code for Introduction</a> 1.26 <li><a href=#conformance><span class=secno></span> Conformance</a> 1.27 <ul class=toc> 1.28 <li><a href=#conventions><span class=secno></span> Document conventions</a> 1.29 @@ -192,139 +189,151 @@ 1.30 1.31 <p><em>This section is non-normative.</em> 1.32 1.33 -<p> Displaying the complex layouts 1.34 - of a typical magazine, newspaper, or textbook on the web 1.35 - requires capabilities beyond those available in existing CSS modules. 1.36 - Dynamic magazine layout in particular requires flexibility 1.37 - in placement of boxes for content flows. 1.38 - This is one purpose of the CSS regions module. 1.39 +<p> The core concept behind CSS Regions 1.40 + is the ability to say, 1.41 + "Display <em>this</em> content (a named flow) 1.42 + over <em>there</em> (a region chain)." 1.43 + The simplest example is: 1.44 1.45 -<p> For more complex layouts, 1.46 - content needs to flow from one area of the page to the next 1.47 - without limitation on the areas' sizes and positions. 1.48 - These arbitrary areas are the target of specific content flows 1.49 - which this document calls <a class=css data-link-type=maybe href=#named-flow0 title="named flows">named flows</a>. 1.50 - Each <a class=css data-link-type=maybe href=#named-flow0 title="named flow">named flow</a> can be associated 1.51 - with a set of <a class=css data-link-type=maybe href=#css-region title="css regions">CSS Regions</a> called a region chain. 1.52 - <a class=css data-link-type=maybe href=#css-region title="css regions">CSS Regions</a> are based on the rectangular geometry 1.53 - of the CSS box model. 1.54 - Content in a <a class=css data-link-type=maybe href=#named-flow0 title="named flow">named flow</a> 1.55 - is taken out of the normal visual formatting 1.56 - and rendered in a chain of <a class=css data-link-type=maybe href=#css-region title="css regions">CSS Regions</a>. 1.57 - 1.58 -<h3 class="heading settled heading" data-level=1.1 id=named-flows-and-regions><span class=secno>1.1 </span><span class=content> 1.59 -Named flows and region chains</span><a class=self-link href=#named-flows-and-regions></a></h3> 1.60 - 1.61 -<p> Consider the layout illustrated in figure 1. 1.62 - 1.63 - 1.64 -<div class=figure> 1.65 - <img alt="multiple chained regions which should receive content from a flow" src=images/intro-example-layout.svg width=400> 1.66 - 1.67 - <p class=caption>Layout requiring sophisticated content flow</p> 1.68 -</div> 1.69 - 1.70 -<p> The designer’s intent is 1.71 - to position an image in box A 1.72 - and to flow an article’s content 1.73 - from box 1 through boxes 2, 3 and 4. 1.74 - Note that the second box should have two columns, 1.75 - and the image is not contained in the article. 1.76 - Box 4 should auto-size to render 1.77 - the remainder of the article content 1.78 - that did not fit in the earlier boxes. 1.79 - 1.80 -<p> Figure 2 shows an example 1.81 - of the intended visual rendering 1.82 - of the content. 1.83 - 1.84 -<div class=figure> 1.85 - <img alt="Sample rendering showing a single thread of text flowing through a chain of regions" src=images/regions-intro-rendering.png width=450> 1.86 - 1.87 - <p class=caption>Sample rendering for desired layout</p> 1.88 -</div> 1.89 - 1.90 - 1.91 -<p> There is no existing mechanism in CSS 1.92 - to associate the content with these boxes 1.93 - arranged in this manner 1.94 - so that content flows as intended. 1.95 - The CSS regions module properties provide that mechanism. 1.96 - 1.97 -<p> The following example illustrates 1.98 - how an <code><article></code> element 1.99 - is placed in a <a class=css data-link-type=maybe href=#named-flow0 title="named flow">named flow</a> 1.100 - and how boxes marked with 1.101 - "region1", "region2", "region3" and "region4" IDs 1.102 - become <a class=css data-link-type=maybe href=#css-region title="css regions">CSS Regions</a> 1.103 - that consume the "article-flow" content. 1.104 - 1.105 -<div class=example> 1.106 - <pre><style> 1.107 - article { 1.108 - <strong>flow-into: article-flow;</strong> 1.109 + <div class=example> 1.110 + <pre><code class=css> 1.111 + #this { 1.112 + flow-into: my-flow; 1.113 } 1.114 1.115 - #region1, #region2, #region3, #region4 { 1.116 - <strong>flow-from: article-flow;</strong> 1.117 + #there { 1.118 + flow-from: my-flow; 1.119 } 1.120 -</style> 1.121 -</pre></div> 1.122 +</code></pre> </div> 1.123 1.124 -<p> The "article-flow" value on the <a class=property data-link-type=propdesc href=#propdef-flow-into title=flow-into>flow-into</a> property 1.125 - directs the <code>article</code> element 1.126 - to the "article-flow" <a class=css data-link-type=maybe href=#named-flow0 title="named flow">named flow</a>. 1.127 - Setting the <a class=property data-link-type=propdesc href=#propdef-flow-from title=flow-from>flow-from</a> property on block containers 1.128 - to "article-flow" makes them <a class=css data-link-type=maybe href=#css-region title="css regions">CSS Regions</a> 1.129 - and associates the resulting region chain 1.130 - with the <a class=css data-link-type=maybe href=#named-flow0 title="named flow">named flow</a>: 1.131 - the flow is "poured" into the region chain. 1.132 +<p> These two declarations will take 1.133 + the element that matches #this, 1.134 + put it into a flow named "my-flow", 1.135 + and display the contents of "my-flow" 1.136 + in the box from the element with the "there" id. 1.137 + This example has a single content source for the named flow, 1.138 + and a single box for the region chain. 1.139 + Named flows can also have multiple sources 1.140 + and use multiple boxes for the region chain. 1.141 1.142 -<p> See <a href=#intro-example-code>Appendix A</a> 1.143 - for sample code using grid layout 1.144 - that implements this example. 1.145 +<p> This building block allows multiple uses - 1.146 + some of which are 1.147 + custom overflow handling, 1.148 + aggregating content, 1.149 + linked display boxes, 1.150 + magazine-style layout, 1.151 + and flowing content through areas in a paginated view. 1.152 1.153 -<div class=note><span class=note-prefix>Note </span> 1.154 + <div class=example> 1.155 + For instance, 1.156 + linked display boxes could be created 1.157 + to display article content above and below 1.158 + some additional content on a page. 1.159 + Given markup like this: 1.160 1.161 -<p> <strong><a class=css data-link-type=maybe href=#css-region title="css regions">CSS Regions</a> are independent from layout</strong> 1.162 + <pre><code class=html> 1.163 + <article> ...some content... </article> 1.164 + <aside> ad or image content </aside> 1.165 +</code></pre> 1.166 +<p> The <aside> content will be displayed 1.167 + below all of the article content. 1.168 + On a large screen the page might display without scrolling, 1.169 + but on a small screen the <aside> content 1.170 + might not be visible until the view scrolls. 1.171 + If it’s important to show at least some 1.172 + of the <aside> content in the initial view, 1.173 + CSS Regions can fragment the article content across two boxes - 1.174 + one above the <aside> and one below. 1.175 1.176 -<p> Any of the CSS layout facilities can be used 1.177 - to create, position and size boxes that can become <a class=css data-link-type=maybe href=#css-region title="css regions">CSS Regions</a>. 1.178 - For instance, 1.179 - the code in <a href=#intro-example-code>Appendix A</a> 1.180 - uses a grid layout <a data-biblio-type=informative data-link-type=biblio href=#css3-grid-layout title=css3-grid-layout>[CSS3-GRID-LAYOUT]</a> as an example. 1.181 - This example could use 1.182 - a flexible box layout <a data-biblio-type=informative data-link-type=biblio href=#css3-flexbox title=css3-flexbox>[CSS3-FLEXBOX]</a> instead. 1.183 +<p> In this example (for simplicity’s sake) 1.184 + we create the boxes with additional elements: 1.185 1.186 -<p> The CSS Regions module does not 1.187 - define a layout mechanism 1.188 - and is meant to integrate 1.189 - with existing and future CSS layout facilities. 1.190 -</div> 1.191 + <pre><code class=html> 1.192 + <article> ...some content... </article> 1.193 1.194 -<div class=note><span class=note-prefix>Note </span> 1.195 + <div class="top region"></div> 1.196 + <aside> ad or image content </aside> 1.197 + <div class="region"></div> 1.198 +</code></pre> 1.199 + <pre><code class=css> 1.200 + article { 1.201 + flow-into: article-flow; 1.202 + } 1.203 + .region { 1.204 + flow-from: article-flow; 1.205 + } 1.206 + .top { 1.207 + max-height: 80vh; 1.208 + } 1.209 +</code></pre> 1.210 +<p> So the top box in the region chain 1.211 + is limited to 80% of the viewport height. 1.212 + If the article content doesn’t fit in that box, 1.213 + the article will continue 1.214 + in the second box after the <aside> content. 1.215 1.216 -<p> <strong><a class=css data-link-type=maybe href=#css-region title="css regions">CSS Regions</a> do not have to be elements</strong> 1.217 + <div class=figure style="float:left; margin:1em;"> 1.218 + <img alt="Article and aside rendering without CSS Regions" src=images/linked-boxes-before.png> 1.219 + <p class=caption>Rendering without CSS Regions 1.220 + </div> 1.221 1.222 -<p> The CSS Regions module is independent 1.223 - of the layout of boxes and 1.224 - the mechanisms used to create them. 1.225 + <div class=figure style="float:left; margin:1em;"> 1.226 + <img alt="Article and aside rendering with CSS Regions" src=images/linked-boxes-after.png> 1.227 + <p class=caption>Rendering with CSS Regions 1.228 + </div> 1.229 1.230 -<p> For simplicity, 1.231 - our example code in <a href=#intro-example-code>Appendix A</a> 1.232 - uses elements to define the boxes. 1.233 - Any other mechanism available 1.234 - in markup or style 1.235 - to create stylable boxes could be used instead, 1.236 - such as pseudo-elements 1.237 - or the @slot rule proposed 1.238 - by the CSS Page Template Module <a data-biblio-type=informative data-link-type=biblio href=#css3-page-template title=css3-page-template>[CSS3-PAGE-TEMPLATE]</a>. 1.239 + <p style=clear:left;>In the images above, 1.240 + the red outline indicates the size of the viewport. 1.241 1.242 + <p>This example links just two boxes together, 1.243 + but more boxes could be added to the region chain 1.244 + to regularly interleave other content with the article. 1.245 + </div> 1.246 1.247 -<p> The only requirement 1.248 - for box to become a <a class=css data-link-type=maybe href=#css-region title="css region">CSS Region</a> 1.249 - is that the <a class=property data-link-type=propdesc href=#propdef-flow-from title=flow-from>flow-from</a> property applies to the box. 1.250 -</div> 1.251 + <div class=example> 1.252 + An example of custom overflow handling creates an additional box inside a menu for <nav> items that would overflow a narrow navigation bar. 1.253 + </nav></div> 1.254 + 1.255 + <div class=example> 1.256 + An example of aggregating content can fill a named flow with content from multiple sources. 1.257 + </div> 1.258 + 1.259 + <div class=note><span class=note-prefix>Note </span> 1.260 + 1.261 +<p> <strong><a class=css data-link-type=maybe href=#css-region title="css regions">CSS Regions</a> are independent from layout</strong> 1.262 + 1.263 +<p> Any of the CSS layout facilities can be used 1.264 + to create, position and size boxes that can become <a class=css data-link-type=maybe href=#css-region title="css regions">CSS Regions</a>. 1.265 + 1.266 +<p> The CSS Regions module does not 1.267 + define a layout mechanism 1.268 + and is meant to integrate 1.269 + with existing and future CSS layout facilities. 1.270 + </div> 1.271 + 1.272 + <div class=note><span class=note-prefix>Note </span> 1.273 + 1.274 +<p> <strong><a class=css data-link-type=maybe href=#css-region title="css regions">CSS Regions</a> do not have to be elements</strong> 1.275 + 1.276 +<p> The CSS Regions module is independent 1.277 + of the layout of boxes and 1.278 + the mechanisms used to create them. 1.279 + 1.280 +<p> For simplicity, 1.281 + our examples tend to 1.282 + use elements to define the boxes. 1.283 + Any other mechanism available 1.284 + in markup or style 1.285 + to create stylable boxes could be used instead, 1.286 + such as pseudo-elements 1.287 + or the @slot rule proposed 1.288 + by the CSS Page Template Module <a data-biblio-type=informative data-link-type=biblio href=#css3-page-template title=css3-page-template>[CSS3-PAGE-TEMPLATE]</a>. 1.289 + 1.290 + 1.291 +<p> The only requirement 1.292 + for box to become a <a class=css data-link-type=maybe href=#css-region title="css region">CSS Region</a> 1.293 + is that the <a class=property data-link-type=propdesc href=#propdef-flow-from title=flow-from>flow-from</a> property applies to the box. 1.294 + </div> 1.295 1.296 <h2 class="heading settled heading" data-level=2 id=css-regions-concepts><span class=secno>2 </span><span class=content> 1.297 CSS Regions concepts</span><a class=self-link href=#css-regions-concepts></a></h2> 1.298 @@ -435,7 +444,7 @@ 1.299 is laid out in the region chain 1.300 associated with that flow. 1.301 1.302 -<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-flow-into>flow-into<a class=self-link href=#propdef-flow-into></a></dfn><tr><th>Value:<td class=prod>none | <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#ltident title="<ident>"><ident></a> [element|content]?<tr><th>Initial:<td>none<tr><th>Applies to:<td>All elements, but not <a href=http://www.w3.org/TR/selectors/#pseudo-elements>pseudo-elements</a> such as <code class=css>::first-line</code>, <code class=css>::first-letter</code>, <code class=css>::before</code> or <code class=css>::after</code>.<tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>as specified</table> 1.303 +<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-flow-into>flow-into<a class=self-link href=#propdef-flow-into></a></dfn><tr><th>Value:<td class=prod>none | <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/mediaqueries-4/#typedef-ident title="<ident>"><ident></a> [element|content]?<tr><th>Initial:<td>none<tr><th>Applies to:<td>All elements, but not <a href=http://www.w3.org/TR/selectors/#pseudo-elements>pseudo-elements</a> such as <code class=css>::first-line</code>, <code class=css>::first-letter</code>, <code class=css>::before</code> or <code class=css>::after</code>.<tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>as specified</table> 1.304 <dl> 1.305 <dt>none</dt> 1.306 1.307 @@ -605,7 +614,7 @@ 1.308 and associates it with 1.309 a <a class=css data-link-type=maybe href=#named-flow0 title="named flow">named flow</a>. 1.310 1.311 -<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-flow-from>flow-from<a class=self-link href=#propdef-flow-from></a></dfn><tr><th>Value:<td class=prod><a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#ltident title="<ident>"><ident></a> | none | inherit<tr><th>Initial:<td>none<tr><th>Applies to:<td>Non-replaced <a href=http://www.w3.org/TR/CSS21/visuren.html#block-boxes>block containers</a>. <br> This might be expanded in future versions of the specification to allow other types of containers to receive flow content.<tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>as specified</table> 1.312 +<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-flow-from>flow-from<a class=self-link href=#propdef-flow-from></a></dfn><tr><th>Value:<td class=prod><a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/mediaqueries-4/#typedef-ident title="<ident>"><ident></a> | none | inherit<tr><th>Initial:<td>none<tr><th>Applies to:<td>Non-replaced <a href=http://www.w3.org/TR/CSS21/visuren.html#block-boxes>block containers</a>. <br> This might be expanded in future versions of the specification to allow other types of containers to receive flow content.<tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>as specified</table> 1.313 <dl> 1.314 <dt><strong>none</strong></dt> 1.315 1.316 @@ -2203,104 +2212,6 @@ 1.317 Boris Zbarsky, 1.318 Stephen Zilles 1.319 and the CSS Working Group members. 1.320 - 1.321 -<h2 class="no-num heading settled heading" id=intro-example-code><span class=content> 1.322 -Appendix A. Example Code for Introduction</span><a class=self-link href=#intro-example-code></a></h2> 1.323 - 1.324 -<p> The following is one possible way 1.325 - to code the example from 1.326 - the <a href=#introduction>introduction</a>. 1.327 - This code uses grid cells to define, 1.328 - size and position the region areas 1.329 - but table layout, absolute positioning, 1.330 - or any other CSS layout facility could be used. 1.331 - 1.332 - <div class=example> 1.333 - <pre><style> 1.334 - #grid { 1.335 - width: 80vw; 1.336 - height: 110vh; 1.337 - grid-template: "aaa.d" 1.338 - "....d" 1.339 - "bbb.d" 1.340 - "....d" 1.341 - "ccc.d"; 1.342 - grid-template-rows: 52% 4% 20% 4% 20%; 1.343 - grid-template-columns: 30% 5% 30% 5% 30%; 1.344 - } 1.345 - #region1 { grid-cell: a; } 1.346 - #region2 { grid-cell: b; } 1.347 - #boxA { grid-cell: c; } 1.348 - #region3 { grid-cell: d; } 1.349 - 1.350 - #region4 { 1.351 - width: 80vw; 1.352 - } 1.353 - 1.354 - #region2 { 1.355 - column-count: 2; 1.356 - } 1.357 - 1.358 - <span class=highlight>/* 1.359 - * Creates the named flow 1.360 - */</span> 1.361 - article { 1.362 - <strong>flow-into: article-flow;</strong> 1.363 - } 1.364 - 1.365 - <span class=highlight>/* 1.366 - * Associate it with the intended CSS Regions. 1.367 - * This creates a region chain for the named flow. 1.368 - */</span> 1.369 - #region1, #region2, #region3, #region4 { 1.370 - <strong>flow-from: article-flow;</strong> 1.371 - } 1.372 -</style> 1.373 - 1.374 -<body> 1.375 -<span class=highlight><!-- 1.376 - The following article element is the content 1.377 - to flow through the region chain. 1.378 ---></span> 1.379 - <article> 1.380 - <h1>Introduction</h1> 1.381 - <p>This is an example ...</p> 1.382 - 1.383 - <h2>More Details</h2> 1.384 - <p>This illustrates ...</p> 1.385 - <p>Then, the example ...</p> 1.386 - <p>Finally, this ...</p> 1.387 - </article> 1.388 -<span class=highlight><!-- 1.389 - The rest of the markup defines the layout. 1.390 - Grid is used in this example, but any method 1.391 - for creating boxes could be substituted. 1.392 ---></span> 1.393 - <div id="grid"> 1.394 - <div id="region1"></div> 1.395 - <div id="region2"></div> 1.396 - <div id="boxA"></div> 1.397 - <content></content> 1.398 - <div id="region3"></div> 1.399 - </div> 1.400 - <div id="region4"></div> 1.401 -</body> 1.402 -</pre> </div> 1.403 - 1.404 - <div class=note><span class=note-prefix>Note </span> 1.405 - 1.406 -<p> A multi-column element is used for #region2, 1.407 - which is a bit gratuitous here 1.408 - (because grid cells could be used). 1.409 - The reason to use a multi-column element 1.410 - is to illustrate that 1.411 - regions can be multi-column. 1.412 - 1.413 -<p> Similarly, the last region breaks out 1.414 - of the grid in this example merely to show that 1.415 - regions in a region chain do not need to 1.416 - share a single parent. 1.417 - </div> 1.418 <h2 class="no-ref no-num heading settled heading" id=conformance><span class=content> 1.419 Conformance</span><a class=self-link href=#conformance></a></h2> 1.420 1.421 @@ -2430,7 +2341,7 @@ 1.422 1.423 <h3 class="no-num no-ref heading settled heading" id=informative><span class=content> 1.424 Informative References</span><a class=self-link href=#informative></a></h3> 1.425 -<div data-fill-with=informative-references><dl><dt id=css3-exclusions title=CSS3-EXCLUSIONS><a class=self-link href=#css3-exclusions></a>[CSS3-EXCLUSIONS]<dd>Vincent Hardy; Rossen Atanassov; Alan Stearns. <a href=http://www.w3.org/TR/2013/WD-css3-exclusions-20130528/>CSS Exclusions Module Level 1</a>. 28 May 2013. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/WD-css3-exclusions-20130528/>http://www.w3.org/TR/2013/WD-css3-exclusions-20130528/</a><dt id=css3-flexbox title=CSS3-FLEXBOX><a class=self-link href=#css3-flexbox></a>[CSS3-FLEXBOX]<dd>Tab Atkins Jr.; Elika J. Etemad; Alex Mogilevsky. <a href=http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/>CSS Flexible Box Layout Module</a>. 18 September 2012. W3C Candidate Recommendation. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/>http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/</a><dt id=css3-grid-layout title=CSS3-GRID-LAYOUT><a class=self-link href=#css3-grid-layout></a>[CSS3-GRID-LAYOUT]<dd>Tab Atkins Jr.; Elika J. Etemad; Rossen Atanassov. <a href=http://www.w3.org/TR/2013/WD-css3-grid-layout-20130402/>CSS Grid Layout</a>. 2 April 2013. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/WD-css3-grid-layout-20130402/>http://www.w3.org/TR/2013/WD-css3-grid-layout-20130402/</a><dt id=css3-line-grid title=CSS3-LINE-GRID><a class=self-link href=#css3-line-grid></a>[CSS3-LINE-GRID]<dd>Koji Ishii. <a href=http://dev.w3.org/csswg/css-line-grid/>CSS Line Grid Module</a>. Proposal for a CSS module. (Retrieved 26 October 2011) URL: <a href=http://dev.w3.org/csswg/css-line-grid/>http://dev.w3.org/csswg/css-line-grid/</a><dt id=css3-page-template title=CSS3-PAGE-TEMPLATE><a class=self-link href=#css3-page-template></a>[CSS3-PAGE-TEMPLATE]<dd>Alan Stearns. <a href=http://dev.w3.org/csswg/css3-page-template/>CSS Pagination Templates Module Level 3</a>. Proposal for a CSS module. (Retrieved 4 April 2012) URL: <a href=http://dev.w3.org/csswg/css3-page-template/>http://dev.w3.org/csswg/css3-page-template/</a><dt id=css3page title=CSS3PAGE><a class=self-link href=#css3page></a>[CSS3PAGE]<dd>Melinda Grant; et al. <a href=http://www.w3.org/TR/2013/WD-css3-page-20130314/>CSS Paged Media Module Level 3</a>. 14 March 2013. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/WD-css3-page-20130314/>http://www.w3.org/TR/2013/WD-css3-page-20130314/</a><dt id=css3ui title=CSS3UI><a class=self-link href=#css3ui></a>[CSS3UI]<dd>Tantek Çelik. <a href=http://www.w3.org/TR/2012/WD-css3-ui-20120117/>CSS Basic User Interface Module Level 3 (CSS3 UI)</a>. 17 January 2012. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/WD-css3-ui-20120117/>http://www.w3.org/TR/2012/WD-css3-ui-20120117/</a><dt id=cssom-view title=CSSOM-VIEW><a class=self-link href=#cssom-view></a>[CSSOM-VIEW]<dd>Anne van Kesteren. <a href=http://www.w3.org/TR/2011/WD-cssom-view-20110804/>CSSOM View Module</a>. 4 August 2011. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2011/WD-cssom-view-20110804/>http://www.w3.org/TR/2011/WD-cssom-view-20110804/</a><dt id=html40 title=HTML40><a class=self-link href=#html40></a>[HTML40]<dd>Ian Jacobs; David Raggett; Arnaud Le Hors. <a href=http://www.w3.org/TR/1998/REC-html40-19980424>HTML 4.0 Specification</a>. 24 April 1998. W3C Recommendation. URL: <a href=http://www.w3.org/TR/1998/REC-html40-19980424>http://www.w3.org/TR/1998/REC-html40-19980424</a></dl></div> 1.426 +<div data-fill-with=informative-references><dl><dt id=css3-exclusions title=CSS3-EXCLUSIONS><a class=self-link href=#css3-exclusions></a>[CSS3-EXCLUSIONS]<dd>Vincent Hardy; Rossen Atanassov; Alan Stearns. <a href=http://www.w3.org/TR/2013/WD-css3-exclusions-20130528/>CSS Exclusions Module Level 1</a>. 28 May 2013. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/WD-css3-exclusions-20130528/>http://www.w3.org/TR/2013/WD-css3-exclusions-20130528/</a><dt id=css3-flexbox title=CSS3-FLEXBOX><a class=self-link href=#css3-flexbox></a>[CSS3-FLEXBOX]<dd>Tab Atkins Jr.; Elika J. Etemad; Alex Mogilevsky. <a href=http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/>CSS Flexible Box Layout Module</a>. 18 September 2012. W3C Candidate Recommendation. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/>http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/</a><dt id=css3-line-grid title=CSS3-LINE-GRID><a class=self-link href=#css3-line-grid></a>[CSS3-LINE-GRID]<dd>Koji Ishii. <a href=http://dev.w3.org/csswg/css-line-grid/>CSS Line Grid Module</a>. Proposal for a CSS module. (Retrieved 26 October 2011) URL: <a href=http://dev.w3.org/csswg/css-line-grid/>http://dev.w3.org/csswg/css-line-grid/</a><dt id=css3-page-template title=CSS3-PAGE-TEMPLATE><a class=self-link href=#css3-page-template></a>[CSS3-PAGE-TEMPLATE]<dd>Alan Stearns. <a href=http://dev.w3.org/csswg/css3-page-template/>CSS Pagination Templates Module Level 3</a>. Proposal for a CSS module. (Retrieved 4 April 2012) URL: <a href=http://dev.w3.org/csswg/css3-page-template/>http://dev.w3.org/csswg/css3-page-template/</a><dt id=css3page title=CSS3PAGE><a class=self-link href=#css3page></a>[CSS3PAGE]<dd>Melinda Grant; et al. <a href=http://www.w3.org/TR/2013/WD-css3-page-20130314/>CSS Paged Media Module Level 3</a>. 14 March 2013. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/WD-css3-page-20130314/>http://www.w3.org/TR/2013/WD-css3-page-20130314/</a><dt id=css3ui title=CSS3UI><a class=self-link href=#css3ui></a>[CSS3UI]<dd>Tantek Çelik. <a href=http://www.w3.org/TR/2012/WD-css3-ui-20120117/>CSS Basic User Interface Module Level 3 (CSS3 UI)</a>. 17 January 2012. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/WD-css3-ui-20120117/>http://www.w3.org/TR/2012/WD-css3-ui-20120117/</a><dt id=cssom-view title=CSSOM-VIEW><a class=self-link href=#cssom-view></a>[CSSOM-VIEW]<dd>Anne van Kesteren. <a href=http://www.w3.org/TR/2011/WD-cssom-view-20110804/>CSSOM View Module</a>. 4 August 2011. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2011/WD-cssom-view-20110804/>http://www.w3.org/TR/2011/WD-cssom-view-20110804/</a><dt id=html40 title=HTML40><a class=self-link href=#html40></a>[HTML40]<dd>Ian Jacobs; David Raggett; Arnaud Le Hors. <a href=http://www.w3.org/TR/1998/REC-html40-19980424>HTML 4.0 Specification</a>. 24 April 1998. W3C Recommendation. URL: <a href=http://www.w3.org/TR/1998/REC-html40-19980424>http://www.w3.org/TR/1998/REC-html40-19980424</a></dl></div> 1.427 1.428 <h2 class="no-num no-ref heading settled heading" id=index><span class=content> 1.429 Index</span><a class=self-link href=#index></a></h2>
2.1 --- a/css-regions/Overview.src.html Mon Mar 10 16:29:21 2014 -0700 2.2 +++ b/css-regions/Overview.src.html Mon Mar 10 16:48:01 2014 -0700 2.3 @@ -21,143 +21,157 @@ 2.4 2.5 <em>This section is non-normative.</em> 2.6 2.7 - Displaying the complex layouts 2.8 - of a typical magazine, newspaper, or textbook on the web 2.9 - requires capabilities beyond those available in existing CSS modules. 2.10 - Dynamic magazine layout in particular requires flexibility 2.11 - in placement of boxes for content flows. 2.12 - This is one purpose of the CSS regions module. 2.13 + The core concept behind CSS Regions 2.14 + is the ability to say, 2.15 + "Display <em>this</em> content (a named flow) 2.16 + over <em>there</em> (a region chain)." 2.17 + The simplest example is: 2.18 2.19 - For more complex layouts, 2.20 - content needs to flow from one area of the page to the next 2.21 - without limitation on the areas' sizes and positions. 2.22 - These arbitrary areas are the target of specific content flows 2.23 - which this document calls ''named flows''. 2.24 - Each ''named flow'' can be associated 2.25 - with a set of ''CSS Regions'' called a region chain. 2.26 - ''CSS Regions'' are based on the rectangular geometry 2.27 - of the CSS box model. 2.28 - Content in a ''named flow'' 2.29 - is taken out of the normal visual formatting 2.30 - and rendered in a chain of ''CSS Regions''. 2.31 + <div class="example"> 2.32 + <pre><code class="css"> 2.33 + #this { 2.34 + flow-into: my-flow; 2.35 + } 2.36 2.37 -<h3 id="named-flows-and-regions"> 2.38 -Named flows and region chains</h3> 2.39 + #there { 2.40 + flow-from: my-flow; 2.41 + } 2.42 + </code></pre> 2.43 + </div> 2.44 2.45 - Consider the layout illustrated in figure 1. 2.46 + These two declarations will take 2.47 + the element that matches <code>#this</code>, 2.48 + put it into a flow named "my-flow", 2.49 + and display the contents of "my-flow" 2.50 + in the box from the element that matches <code>#there</code>. 2.51 + This example has a single content source for the named flow, 2.52 + and a single box for the region chain. 2.53 + Named flows can also have multiple sources 2.54 + and use multiple boxes for the region chain. 2.55 2.56 + This building block allows multiple uses - 2.57 + some of which are 2.58 + custom overflow handling, 2.59 + aggregating content, 2.60 + linked display boxes, 2.61 + magazine-style layout, 2.62 + and flowing content through areas in a paginated view. 2.63 2.64 -<div class="figure"> 2.65 - <img src="images/intro-example-layout.svg" width="400" alt= 2.66 - "multiple chained regions which should receive content from a flow"> 2.67 + <div class="example"> 2.68 + For instance, 2.69 + linked display boxes could be created 2.70 + to display article content above and below 2.71 + some additional content on a page. 2.72 + Given markup like this: 2.73 2.74 - <p class="caption">Layout requiring sophisticated content flow</p> 2.75 -</div> 2.76 + <pre><code class="html"> 2.77 + <article> ...some content... </article> 2.78 + <aside> ad or image content </aside> 2.79 + </code></pre> 2.80 2.81 - The designer's intent is 2.82 - to position an image in box A 2.83 - and to flow an article's content 2.84 - from box 1 through boxes 2, 3 and 4. 2.85 - Note that the second box should have two columns, 2.86 - and the image is not contained in the article. 2.87 - Box 4 should auto-size to render 2.88 - the remainder of the article content 2.89 - that did not fit in the earlier boxes. 2.90 + The <aside> content will be displayed 2.91 + below all of the article content. 2.92 + On a large screen the page might display without scrolling, 2.93 + but on a small screen the <aside> content 2.94 + might not be visible until the view scrolls. 2.95 + If it's important to show at least some 2.96 + of the <aside> content in the initial view, 2.97 + CSS Regions can fragment the article content across two boxes - 2.98 + one above the <aside> and one below. 2.99 2.100 - Figure 2 shows an example 2.101 - of the intended visual rendering 2.102 - of the content. 2.103 + In this example (for simplicity's sake) 2.104 + we create the boxes with additional elements: 2.105 2.106 -<div class="figure"> 2.107 - <img src="images/regions-intro-rendering.png" width="450" alt= 2.108 - "Sample rendering showing a single thread of text flowing through a chain of regions"> 2.109 + <pre><code class="html"> 2.110 + <article> ...some content... </article> 2.111 2.112 - <p class="caption">Sample rendering for desired layout</p> 2.113 -</div> 2.114 + <div class="top region"></div> 2.115 + <aside> ad or image content </aside> 2.116 + <div class="region"></div> 2.117 + </code></pre> 2.118 2.119 + <pre><code class="css"> 2.120 + article { 2.121 + flow-into: article-flow; 2.122 + } 2.123 + .region { 2.124 + flow-from: article-flow; 2.125 + } 2.126 + .top { 2.127 + max-height: 80vh; 2.128 + } 2.129 + </code></pre> 2.130 2.131 - There is no existing mechanism in CSS 2.132 - to associate the content with these boxes 2.133 - arranged in this manner 2.134 - so that content flows as intended. 2.135 - The CSS regions module properties provide that mechanism. 2.136 + So the top box in the region chain 2.137 + is limited to 80% of the viewport height. 2.138 + If the article content doesn't fit in that box, 2.139 + the article will continue 2.140 + in the second box after the <aside> content. 2.141 2.142 - The following example illustrates 2.143 - how an <code><article></code> element 2.144 - is placed in a ''named flow'' 2.145 - and how boxes marked with 2.146 - "region1", "region2", "region3" and "region4" IDs 2.147 - become ''CSS Regions'' 2.148 - that consume the "article-flow" content. 2.149 + <div class="figure" style="float:left; margin:1em;"> 2.150 + <img alt="Article and aside rendering without CSS Regions" 2.151 + src="images/linked-boxes-before.png"/> 2.152 + <p class="caption">Rendering without CSS Regions 2.153 + </div> 2.154 2.155 -<div class="example"> 2.156 - <pre> 2.157 - <style> 2.158 - article { 2.159 - <strong>flow-into: article-flow;</strong> 2.160 - } 2.161 + <div class="figure" style="float:left; margin:1em;"> 2.162 + <img alt="Article and aside rendering with CSS Regions" 2.163 + src="images/linked-boxes-after.png"/> 2.164 + <p class="caption">Rendering with CSS Regions 2.165 + </div> 2.166 2.167 - #region1, #region2, #region3, #region4 { 2.168 - <strong>flow-from: article-flow;</strong> 2.169 - } 2.170 - </style> 2.171 - </pre> 2.172 -</div> 2.173 + <p style="clear:left;">In the images above, 2.174 + the red outline indicates the size of the viewport. 2.175 2.176 - The "article-flow" value on the 'flow-into' property 2.177 - directs the <code>article</code> element 2.178 - to the "article-flow" ''named flow''. 2.179 - Setting the 'flow-from' property on block containers 2.180 - to "article-flow" makes them ''CSS Regions'' 2.181 - and associates the resulting region chain 2.182 - with the ''named flow'': 2.183 - the flow is "poured" into the region chain. 2.184 + <p>This example links just two boxes together, 2.185 + but more boxes could be added to the region chain 2.186 + to regularly interleave other content with the article. 2.187 + </div> 2.188 2.189 - See <a href="#intro-example-code">Appendix A</a> 2.190 - for sample code using grid layout 2.191 - that implements this example. 2.192 + <div class="example"> 2.193 + An example of custom overflow handling creates an additional box inside a menu for <nav> items that would overflow a narrow navigation bar. 2.194 + </div> 2.195 2.196 -<div class="note"><span class="note-prefix">Note </span> 2.197 + <div class="example"> 2.198 + An example of aggregating content can fill a named flow with content from multiple sources. 2.199 + </div> 2.200 2.201 - <strong>''CSS Regions'' are independent from layout</strong> 2.202 + <div class="note"><span class="note-prefix">Note </span> 2.203 2.204 - Any of the CSS layout facilities can be used 2.205 - to create, position and size boxes that can become ''CSS Regions''. 2.206 - For instance, 2.207 - the code in <a href="#intro-example-code">Appendix A</a> 2.208 - uses a grid layout [[CSS3-GRID-LAYOUT]] as an example. 2.209 - This example could use 2.210 - a flexible box layout [[CSS3-FLEXBOX]] instead. 2.211 + <strong>''CSS Regions'' are independent from layout</strong> 2.212 2.213 - The CSS Regions module does not 2.214 - define a layout mechanism 2.215 - and is meant to integrate 2.216 - with existing and future CSS layout facilities. 2.217 -</div> 2.218 + Any of the CSS layout facilities can be used 2.219 + to create, position and size boxes that can become ''CSS Regions''. 2.220 2.221 -<div class="note"><span class="note-prefix">Note </span> 2.222 + The CSS Regions module does not 2.223 + define a layout mechanism 2.224 + and is meant to integrate 2.225 + with existing and future CSS layout facilities. 2.226 + </div> 2.227 2.228 - <strong>''CSS Regions'' do not have to be elements</strong> 2.229 + <div class="note"><span class="note-prefix">Note </span> 2.230 2.231 - The CSS Regions module is independent 2.232 - of the layout of boxes and 2.233 - the mechanisms used to create them. 2.234 + <strong>''CSS Regions'' do not have to be elements</strong> 2.235 2.236 - For simplicity, 2.237 - our example code in <a href="#intro-example-code">Appendix A</a> 2.238 - uses elements to define the boxes. 2.239 - Any other mechanism available 2.240 - in markup or style 2.241 - to create stylable boxes could be used instead, 2.242 - such as pseudo-elements 2.243 - or the @slot rule proposed 2.244 - by the CSS Page Template Module [[CSS3-PAGE-TEMPLATE]]. 2.245 + The CSS Regions module is independent 2.246 + of the layout of boxes and 2.247 + the mechanisms used to create them. 2.248 2.249 + For simplicity, 2.250 + our examples tend to 2.251 + use elements to define the boxes. 2.252 + Any other mechanism available 2.253 + in markup or style 2.254 + to create stylable boxes could be used instead, 2.255 + such as pseudo-elements 2.256 + or the @slot rule proposed 2.257 + by the CSS Page Template Module [[CSS3-PAGE-TEMPLATE]]. 2.258 2.259 - The only requirement 2.260 - for box to become a ''CSS Region'' 2.261 - is that the 'flow-from' property applies to the box. 2.262 -</div> 2.263 + 2.264 + The only requirement 2.265 + for box to become a ''CSS Region'' 2.266 + is that the 'flow-from' property applies to the box. 2.267 + </div> 2.268 2.269 <h2 id="css-regions-concepts"> 2.270 CSS Regions concepts</h2> 2.271 @@ -2124,106 +2138,4 @@ 2.272 Eugene Veselov, 2.273 Boris Zbarsky, 2.274 Stephen Zilles 2.275 - and the CSS Working Group members. 2.276 - 2.277 -<h2 id="intro-example-code" class="no-num"> 2.278 -Appendix A. Example Code for Introduction</h2> 2.279 - 2.280 - The following is one possible way 2.281 - to code the example from 2.282 - the <a href="#introduction">introduction</a>. 2.283 - This code uses grid cells to define, 2.284 - size and position the region areas 2.285 - but table layout, absolute positioning, 2.286 - or any other CSS layout facility could be used. 2.287 - 2.288 - <div class="example"> 2.289 - <pre> 2.290 - <style> 2.291 - #grid { 2.292 - width: 80vw; 2.293 - height: 110vh; 2.294 - grid-template: "aaa.d" 2.295 - "....d" 2.296 - "bbb.d" 2.297 - "....d" 2.298 - "ccc.d"; 2.299 - grid-template-rows: 52% 4% 20% 4% 20%; 2.300 - grid-template-columns: 30% 5% 30% 5% 30%; 2.301 - } 2.302 - #region1 { grid-cell: a; } 2.303 - #region2 { grid-cell: b; } 2.304 - #boxA { grid-cell: c; } 2.305 - #region3 { grid-cell: d; } 2.306 - 2.307 - #region4 { 2.308 - width: 80vw; 2.309 - } 2.310 - 2.311 - #region2 { 2.312 - column-count: 2; 2.313 - } 2.314 - 2.315 - <span class="highlight">/* 2.316 - * Creates the named flow 2.317 - */</span> 2.318 - article { 2.319 - <strong>flow-into: article-flow;</strong> 2.320 - } 2.321 - 2.322 - <span class="highlight">/* 2.323 - * Associate it with the intended CSS Regions. 2.324 - * This creates a region chain for the named flow. 2.325 - */</span> 2.326 - #region1, #region2, #region3, #region4 { 2.327 - <strong>flow-from: article-flow;</strong> 2.328 - } 2.329 - </style> 2.330 - 2.331 - <body> 2.332 - <span 2.333 - class=highlight><!-- 2.334 - The following article element is the content 2.335 - to flow through the region chain. 2.336 - --></span> 2.337 - <article> 2.338 - <h1>Introduction</h1> 2.339 - <p>This is an example ...</p> 2.340 - 2.341 - <h2>More Details</h2> 2.342 - <p>This illustrates ...</p> 2.343 - <p>Then, the example ...</p> 2.344 - <p>Finally, this ...</p> 2.345 - </article> 2.346 - <span 2.347 - class=highlight><!-- 2.348 - The rest of the markup defines the layout. 2.349 - Grid is used in this example, but any method 2.350 - for creating boxes could be substituted. 2.351 - --></span> 2.352 - <div id="grid"> 2.353 - <div id="region1"></div> 2.354 - <div id="region2"></div> 2.355 - <div id="boxA"></div> 2.356 - <content></content> 2.357 - <div id="region3"></div> 2.358 - </div> 2.359 - <div id="region4"></div> 2.360 - </body> 2.361 - </pre> 2.362 - </div> 2.363 - 2.364 - <div class="note"><span class="note-prefix">Note </span> 2.365 - 2.366 - A multi-column element is used for #region2, 2.367 - which is a bit gratuitous here 2.368 - (because grid cells could be used). 2.369 - The reason to use a multi-column element 2.370 - is to illustrate that 2.371 - regions can be multi-column. 2.372 - 2.373 - Similarly, the last region breaks out 2.374 - of the grid in this example merely to show that 2.375 - regions in a region chain do not need to 2.376 - share a single parent. 2.377 - </div> 2.378 \ No newline at end of file 2.379 + and the CSS Working Group members. 2.380 \ No newline at end of file
3.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 3.2 +++ b/css-regions/examples/linked-boxes.html Mon Mar 10 16:48:01 2014 -0700 3.3 @@ -0,0 +1,54 @@ 3.4 +<!DOCTYPE html> 3.5 +<html> 3.6 +<head> 3.7 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 3.8 + <title></title> 3.9 + <style> 3.10 + body { 3.11 + width: 170px; 3.12 + -border: thin black solid; 3.13 + padding: 10px; 3.14 + position: relative; 3.15 + } 3.16 + aside { 3.17 + border: thin black solid; 3.18 + border-radius: 10px; 3.19 + background-color: lightgreen; 3.20 + text-align: center; 3.21 + margin: 0px 40px; 3.22 + font-size: 24px; 3.23 + } 3.24 + article { 3.25 + font-size: 10px; 3.26 + -webkit-flow-into: article-flow; 3.27 + } 3.28 + .screen { 3.29 + position: absolute; 3.30 + left: 3px; 3.31 + top: 3px; 3.32 + width: calc(190px - 8px); 3.33 + height: 250px; 3.34 + border: thin dashed red; 3.35 + } 3.36 + .region { 3.37 + -webkit-flow-from: article-flow; 3.38 + } 3.39 + .top { 3.40 + max-height: 200px; 3.41 + } 3.42 + </style> 3.43 +</head> 3.44 +<body lang="en"> 3.45 + <div class="screen"></div> 3.46 + <article> 3.47 + <h1>Article</h1> 3.48 + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, cupiditate rerum et commodi ea repellat placeat exercitationem perferendis assumenda voluptatibus. Aliquam, consectetur sed fuga praesentium velit. Necessitatibus, nostrum doloremque eius.</p> 3.49 + <p>Tur? Henis eictur aut veliqui audaessenia placeresci dolum num aut utam, volor sum re inctatiat pero volut evel in res vel eos ea velectempos et a sum voloribus elit, optas rerro blabore am volorese poria parit aut ute conse et quo venimint accum vollupta veligna tquati conse evendi nem eos et, eat lant. 3.50 + <p>Necta sequam quas voloreperum cust rem quas simus. Eveliquam repre que ipsum sincte con eumetur? 3.51 + <p>Estet aut eicipsa parum, sus, suntece rionesecta commolo rionem destruptat hari omniendam quaspe voloreh endeliquos cum nonse pos vellati di dolupta tempedis eata nimperempos es dicient volor acienieni quisqua spernat. 3.52 + </article> 3.53 + <div class="top region"></div> 3.54 + <aside>Aside</aside> 3.55 + <div class="region"></div> 3.56 +</body> 3.57 +</html> 3.58 \ No newline at end of file
4.1 Binary file css-regions/images/linked-boxes-after.png has changed
5.1 Binary file css-regions/images/linked-boxes-before.png has changed
