Editorial changes

Author: vhardy

css3-regions/Overview.html

@@ -6,7 +6,7 @@
   content="text/html; charset=utf-8" http-equiv=Content-Type>
 
   <title>CSS Regions Module Level 3</title>
-  <link href=default.css rel=stylesheet type="text/css">
+  <link href="../default.css" rel=stylesheet type="text/css">
 
   <style type="text/css">
 
@@ -224,13 +224,13 @@
 
    <h1 id=css-regions-module>CSS Regions Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 2 April 2012</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 4 April 2012</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a
-     href="http://www.w3.org/TR/2012/ED-css3-regions-20120402/">http://www.w3.org/csswg/css3-regions</a>
+     href="http://www.w3.org/TR/2012/ED-css3-regions-20120404/">http://www.w3.org/csswg/css3-regions</a>
 
     <dt>Latest version:
 
@@ -576,7 +576,7 @@ <h3 id=named-flows-and-regions><span class=secno>1.1. </span>Named flows
 
   <div class=figure> <img
    alt="multiple chained regions which should receive content from a flow"
-   src="images/regions-intro.svg" width=400>
+   src="images/intro-example-layout.svg" width=400>
    <p class=caption>Layout requiring sophisticated content flow</p>
   </div>
 
@@ -591,7 +591,17 @@ <h3 id=named-flows-and-regions><span class=secno>1.1. </span>Named flows
    class=property>A</code>&rsquo; and to flow an article's text from region
    &lsquo;<code class=css>1</code>&rsquo;, to region &lsquo;<code
    class=css>2</code>&rsquo;, &lsquo;<code class=css>3</code>&rsquo; and
-   &lsquo;<code class=css>4</code>&rsquo;.
+   &lsquo;<code class=css>4</code>&rsquo;. Note that the second region should
+   have two columns.
+
+  <p>Figure 2 shows an example of the intended visual rendering of the
+   content.
+
+  <div class=figure> <img
+   alt="Sample rendering showing a single thread of text flowing through a chain of regions"
+   src="images/regions-intro-rendering.png" width=450>
+   <p class=caption>Sample rendering for desired layout</p>
+  </div>
 
   <p>The following code snippet shows the content to flow between the regions
    1, 2, 3 and 4.
@@ -601,83 +611,56 @@ <h3 id=named-flows-and-regions><span class=secno>1.1. </span>Named flows
   &lt;h1&gt;Introduction&lt;/h1&gt;
   &lt;p&gt;This is an example ...&lt;/p&gt;
 
-  &lt;h1&gt;More Details&lt;/h1&gt;
+  &lt;h2&gt;More Details&lt;/h2&gt;
   &lt;p&gt;This illustrates ...&lt;/p&gt;
   &lt;p&gt;Then, the example ...&lt;/p&gt;
   &lt;p&gt;Finally, this ...&lt;/p&gt;
 &lt;/div&gt;
 
 </pre>
 
-  <p>And the following snippet shows an example using grid cells to define
-   the region areas:
+  <p>And the following snippet shows an example using grid cells to define,
+   size and position the region areas:
 
   <pre>
 &lt;style&gt;
-    #page {
+    #grid {
       width: 800px;
       height: 600px;
-      grid-template: "aaa.e"
-                     "....e"
-                     "bbb.e"
-                     "....e"
-                     "c.d.e";
+      grid-template: "aaa.d"
+                     "....d"
+                     "bbb.d"
+                     "....d"
+                     "ccc.d";
       grid-rows: 52% 4% 20% 4% 20%;
       grid-columns: 30% 5% 30% 5% 30%;
     }
     #regionA { grid-cell: a; }
     #region1 { grid-cell: b; }
     #region2 { grid-cell: c; }
     #region3 { grid-cell: d; }
-    #region4 { grid-cell: e; }
+    
+    #region4 {
+        width: 800px;
+    }
+    
+    #region2 {
+        column-count: 2;
+    }
 &lt;/style&gt;
 
-&lt;div id="page"&gt;
+&lt;div id="grid"&gt;
+    &lt;div id="regionA"&gt;&lt;/div&gt;
     &lt;div id="region1"&gt;&lt;/div&gt;        
     &lt;div id="region2"&gt;&lt;/div&gt;        
     &lt;div id="region3"&gt;&lt;/div&gt;        
-    &lt;div id="region4"&gt;&lt;/div&gt;
 &lt;/div&gt;
+&lt;div id="region4"&gt;&lt;/div&gt;
     </pre>
 
-  <p>Any of the CSS layout facilities can be used to create, position and
-   size regions as needed.
-
-  <div class=note>
-   <p>Using a grid layout (see <a href="#CSS3-GRID-LAYOUT"
-    rel=biblioentry>[CSS3-GRID-LAYOUT]<!--{{CSS3-GRID-LAYOUT}}--></a> is just
-    an example. The example could use a flexible box layout as well, see <a
-    href="#CSS3-FLEXBOX"
-    rel=biblioentry>[CSS3-FLEXBOX]<!--{{CSS3-FLEXBOX}}--></a>.</p>
-
-   <p>The CSS regions specification does not define a layout mechanism and is
-    meant to integrate with existing and future CSS layout facilities.</p>
-  </div>
-
   <p>However, there is no existing mechanism to associate the content with
-   the regions so that content flows as intended. Figure 2 shows an example
-   of the intended visual rendering of the content.
-
-  <div class=figure> <img
-   alt="Sample rendering showing a single thread of text flowing through a chain of regions"
-   src="images/regions-intro-rendering.png" width=450>
-   <p class=caption>Sample rendering for desired layout</p>
-  </div>
-
-  <p>The CSS regions module is independent of the layout of regions and the
-   mechanism used to create them. For simplicity, our example uses elements
-   as regions as shown in the previous code snippet.
-
-  <div class=note>
-   <p>While the example uses elements as regions (since [CSS3-GRID-LAYOUT]
-    requires elements to create grid items) it is important to note that this
-    is not required for regions. Regions can be pseudo-elements, such as
-    &lsquo;<code class=css>::before</code>&rsquo; and &lsquo;<code
-    class=css>::after</code>&rsquo;. The only requirement for an element or
-    pseudo-element to become a region is that it needs to be subject to CSS
-    styling to receive the &lsquo;<a href="#flow-from"><code
-    class=property>flow-from</code></a>&rsquo; property.</p>
-  </div>
+   the regions so that content flows as intended. The CSS regions module
+   properties provide that mechanism.
 
   <p>The following code example illustrates how the content of the
    <code>article</code> element becomes a flow and how the areas &lsquo;<code
@@ -714,18 +697,58 @@ <h3 id=named-flows-and-regions><span class=secno>1.1. </span>Named flows
    the flow is &lsquo;<code class=css>poured</code>&rsquo; into the desired
    regions.
 
+  <p class=note>Note that a multi-column element is used for region 2, which
+   is a bit gratuitous here (because grid cells could be used). The reason to
+   use a multi-column element here is to illustrate that regions can be
+   multi-column.
+
+  <div class=note>
+   <p><strong>CSS regions are independent from layout</strong></p>
+
+   <p>Any of the CSS layout facilities can be used to create, position and
+    size regions as needed.</p>
+
+   <p>Using a grid layout (see <a href="#CSS3-GRID-LAYOUT"
+    rel=biblioentry>[CSS3-GRID-LAYOUT]<!--{{CSS3-GRID-LAYOUT}}--></a> is just
+    an example. The example could use a flexible box layout as well, see <a
+    href="#CSS3-FLEXBOX"
+    rel=biblioentry>[CSS3-FLEXBOX]<!--{{CSS3-FLEXBOX}}--></a>.</p>
+
+   <p>The CSS regions specification does not define a layout mechanism and is
+    meant to integrate with existing and future CSS layout facilities.</p>
+
+   <p><strong>Regions do not have to be elements</strong></p>
+
+   <p>The CSS regions module is independent of the layout of regions and the
+    mechanism used to create them. For simplicity, our example uses elements
+    as regions as shown in the previous code snippet.</p>
+
+   <p>While the example uses elements as regions (since <a
+    href="#CSS3-GRID-LAYOUT"
+    rel=biblioentry>[CSS3-GRID-LAYOUT]<!--{{CSS3-GRID-LAYOUT}}--></a>
+    requires elements to create grid items) it is important to note that this
+    is not required for regions. Regions can be pseudo-elements, such as
+    &lsquo;<code class=css>::before</code>&rsquo; and &lsquo;<code
+    class=css>::after</code>&rsquo;. The only requirement for an element or
+    pseudo-element to become a region is that it needs to be subject to CSS
+    styling to receive the &lsquo;<a href="#flow-from"><code
+    class=property>flow-from</code></a>&rsquo; property. The CSS page
+    template module (see [[CSS-PAGE-TEMPLATES]]) proposes another mechanism
+    to create regions with the <code class=css>@slot</code> syntax.</p>
+  </div>
+
   <h3 id=region-styling><span class=secno>1.2. </span>Regions styling</h3>
 
   <p>Region styling allows content to be styled depending on the region it
-   flows into. It is a form of context-based styling, similar to Media
-   Queries <a href="#MEDIAQ" rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a>
-   which enable or disable selectors depending on the rendering context. With
-   region styling, additional selectors may apply depending on the region
-   into which content flows.
+   flows into. It is a more sophisticated form of pseudo-element styling such
+   as <a href="http://www.w3.org/TR/css3-selectors/#first-line"><code
+   class=css>::first-line</code> </a> which apply a particular style to a
+   fragment of content. With region styling, additional selectors may apply
+   depending on the region into which content flows.
 
-  <p>In our example, the designer wants to make text flowing into region 1
-   larger, bold and dark blue. In addition, <code
-   class=html>&lt;h1&gt;</code> headers should be crimson.
+  <p>In our example, the designer wants to make text flowing into region dark
+   blue. In addition, <code class=html>&lt;h1&gt;</code> headers should be
+   crimson.
 
   <p>This design can be expressed with region styling as shown below.
 
@@ -741,26 +764,23 @@ <h3 id=region-styling><span class=secno>1.2. </span>Regions styling</h3>
 }
 
 #article h1 {
+    color: crimson;
+    display: run-in;
+}
+
+#article h2 {
     border-left: 1px solid #777;
     padding-left: 2ex;
-    display: run-in;
 }
 
 /*
  * Additional styling to apply to content when it falls into 
  * region1
  */
 <strong>@region #region1 {</strong>
-    #article {
-        font-weight: bold;
+    p {
         color: #0C3D5F;
-        font-size: larger;
-    }
-
-    #article h1 {
-        color: crimson;
-        border: none;
-        padding: 0px;
+        font-weight: bold;
     }
 <strong>}</strong>
 
@@ -779,10 +799,10 @@ <h3 id=region-styling><span class=secno>1.2. </span>Regions styling</h3>
 
   <p>The &lsquo;<code class=css>@region</code>&rsquo; rule for region 1
    limits its selectors to content flowing into region 1. The following
-   figure shows how the rendering changes if we do not increase the font size
-   nor make it bold for content flowing into region 1. As more content can be
-   fitted, more content is subject to the contextual selectors, resulting in
-   more dark blue text into region 1.
+   figure shows how the rendering changes if we do not apply styling specific
+   to region 1. Note how more text fits into region 1 now that the
+   &lsquo;<code class=property>font-weight</code>&rsquo; is normal instead of
+   bold.
 
   <div class=figure> <img
    alt="Illustrate how changing region styling affects the flow of content."
@@ -835,7 +855,9 @@ <h3 id=regions><span class=secno>2.1. </span>Regions</h3>
    class=property>flow-from</code></a>&rsquo; property). The <a
    href="http://dev.w3.org/csswg/css3-multicol/#column-box">column boxes</a>
    of multi-column elements which have an associated <a
-   href="#named-flow0"><em><span>named flow</span></em></a> are also regions.
+   href="#named-flow0"><em><span>named flow</span></em></a> are also regions
+   (see the <a href="#multi-column-regions">section on multi-column
+   regions</a>).
 
   <h3 id=named-flow><span class=secno>2.2. </span>Named flow</h3>
 
@@ -884,6 +906,10 @@ <h3 id=regions-flow-breaking-rules><span class=secno>2.3. </span>Regions
    class=property>region-overflow</code></a>&rsquo; property on the last
    <span>region</span> in the chain.
 
+  <p>The CSS regions module follows the fragmentation rules defined in the
+   CSS Fragmentation Module Level 3 (see <a href="#CSS3-BREAK"
+   rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a>).
+
   <h2 id=properties-and-rules><span class=secno>3. </span>Properties and
    rules</h2>
 
@@ -1835,8 +1861,8 @@ <h2 id=multi-column-regions><span class=secno>4. </span>Multi-column
 
   <p>The fragment of content that flows into column boxes that are regions is
    laid out according to the multi-column specification. In particular, when
-   <a href="#intrinsic-height-of-regions">computing the intrinsic height</a>
-   of a multi-column element that is associated with a <a
+   <a href="#flow-fragment-height-resolution">computing the flow fragment
+   height</a> of a multi-column element that is associated with a <a
    href="#named-flow0"><em><span>named flow</span></em></a>, the &lsquo;<code
    class=property>column-fill</code>&rsquo; property is honored to balance
    the fragment of content that would flow across the column-boxes.
@@ -1890,10 +1916,12 @@ <h2 id=multi-column-regions><span class=secno>4. </span>Multi-column
 &lt;div id="remainder"&gt;&lt;/div&gt;</pre>
   </div>
 
-  <p class=note>Overflow of column boxes that are regions is handled
-   according to the same rules as other regions. If the content does not fit
-   in the region, then the rest of the content flow into regions that follow
-   in the region chain.
+  <p>Overflow of column boxes that are regions is handled according to the
+   same rules as other regions. If the content does not fit in the region,
+   then the rest of the content flow into regions that follow in the region
+   chain. If a multi-column region is the last in a <span>region chain, then
+   it must generate boxes if its flow fragment overflows as it would with
+   normal content.</span>
 
   <h3 id=regions><span class=secno>4.1. </span></h3>
 
@@ -2421,7 +2449,7 @@ <h2 id=regions-visual-formatting-details><span class=secno>7.
    </span>Regions visual formatting details</h2>
 
   <p>Regions are laid out by CSS and take part in the normal box model and
-   other layouts offered by CSS modules such as flexible boxes (<a
+   other layout models offered by CSS modules such as flexible boxes (<a
    href="#CSS3-FLEXBOX"
    rel=biblioentry>[CSS3-FLEXBOX]<!--{{CSS3-FLEXBOX}}--></a>). However,
    <span>regions</span> layout a fragment of their <a
@@ -2495,12 +2523,12 @@ <h3 id=regions-visual-formatting-steps><span class=secno>7.2.
    </span>Regions visual formatting steps</h3>
 
   <p>Formatting documents that contain <a href="#named-flow0">named flows</a>
-   laid out in regions is a three step process:
+   laid out in regions is a three-step process:
 
   <ul>
    <li><em>Step 1: RFCB <def>flow fragment height</def> resolution</em>. In
-    this step, the height of fragments fitting in regions flow content boxes
-    is resolved.
+    this step, the heights of fragments fitting in the regions' RFCBs are
+    resolved.
 
    <li><em>Step 2: document and regions layout</em>. In this step, the
     document content and regions are laid out. However, <a
@@ -2605,7 +2633,7 @@ <h3 id=regions-visual-formatting-implementation-note><span class=secno>7.3.
    </span>Regions visual formatting: implementation note</h3>
 
   <p>The process for resolving an RFCB's &lsquo;<code
-   class=property>height</code>&rsquo; and the three step process used to
+   class=property>height</code>&rsquo; and the three-step process used to
    layout documents containing regions and <a href="#named-flow0">named
    flows</a> are <em>conceptual</em> descriptions of what the layout should
    yield and implementations should optimize to reduce the number of steps
@@ -2841,6 +2869,16 @@ <h2 id=relation-to-other-specifications><span class=secno>9.
    related to the following specifications:
 
   <ol>
+   <li>CSS Fragmentation Module Level 3 <a href="#CSS3-BREAK"
+    rel=biblioentry>[CSS3-BREAK]<!--{{CSS3-BREAK}}--></a>. This module
+    defines the rules for fragmenting content over multiple containers and
+    applies to CSS regions in addition to applying to multi-column and paged
+    media.
+
+   <li>CSS Pagination Templates Module Level 3 [[CSS-PAGE-TEMPLATE]]. This
+    module defines a syntax to define layout templates which can be used when
+    paginating content. The page templates use regions.
+
    <li>CSS Exclusions Module <a href="#CSS3-EXCLUSIONS"
     rel=biblioentry>[CSS3-EXCLUSIONS]<!--{{CSS3-EXCLUSIONS}}--></a>. This
     module defines a generic way to define arbitrarily shaped exclusions into
@@ -3000,6 +3038,8 @@ <h3 id="changes_from_June_09_2011"><span class=secno>12.1. </span>Changes
    <li>Added &lsquo;<code class=css>Regions visual formatting
     details</code>&rsquo; section to better describe the model for resolving
     auto sizing on regions.
+
+   <li>Reworked the initial specification example.
   </ul>
 
   <h3 id="changes_from_June_09_2011"><span class=secno>12.2. </span>Changes