rework initial example

Author: astearns

css3-regions/Overview.html

@@ -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 9 April 2012</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 10 April 2012</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a
-     href="http://www.w3.org/TR/2012/ED-css3-regions-20120409/">http://www.w3.org/csswg/css3-regions</a>
+     href="http://www.w3.org/TR/2012/ED-css3-regions-20120410/">http://www.w3.org/csswg/css3-regions</a>
 
     <dt>Latest version:
 
@@ -584,9 +584,9 @@ <h3 id=named-flows-and-regions><span class=secno>1.1. </span>Named flows
    </div>
   </div>
 
-  <p>The designer's intent is to position an image in region &lsquo;<code
+  <p>The designer's intent is to position an image in box &lsquo;<code
    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
+   &lsquo;<code class=css>1</code>&rsquo; to regions &lsquo;<code
    class=css>2</code>&rsquo;, &lsquo;<code class=css>3</code>&rsquo; and
    &lsquo;<code class=css>4</code>&rsquo;. Note that the second region should
    have two columns.
@@ -613,44 +613,43 @@ <h3 id=named-flows-and-regions><span class=secno>1.1. </span>Named flows
   &lt;p&gt;Then, the example ...&lt;/p&gt;
   &lt;p&gt;Finally, this ...&lt;/p&gt;
 &lt;/div&gt;
-        
-</pre>
+    </pre>
 
   <p>And the following snippet shows an example using grid cells to define,
    size and position the region areas:
 
   <pre>
 &lt;style&gt;
-    #grid {
-      width: 800px;
-      height: 600px;
-      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 {
-        width: 800px;
-    }
-    
-    #region2 {
-        column-count: 2;
-    }
+  #grid {
+    width: 80vw;
+    height: 60vw;
+    grid-template: "aaa.d"
+                   "....d"
+                   "bbb.d"
+                   "....d"
+                   "ccc.d";
+    grid-rows: 52% 4% 20% 4% 20%;
+    grid-columns: 30% 5% 30% 5% 30%;
+  }
+  #region1 { grid-cell: a; }
+  #region2 { grid-cell: b; }
+  #boxA    { grid-cell: c; }
+  #region3 { grid-cell: d; }
+  
+  #region4 {
+    width: 80vw;
+  }
+  
+  #region2 {
+    column-count: 2;
+  }
 &lt;/style&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="region1"&gt;&lt;/div&gt;
+  &lt;div id="region2"&gt;&lt;/div&gt;
+  &lt;div id="boxA"&gt;&lt;/div&gt;
+  &lt;div id="region3"&gt;&lt;/div&gt;
 &lt;/div&gt;
 &lt;div id="region4"&gt;&lt;/div&gt;
     </pre>
@@ -672,14 +671,14 @@ <h3 id=named-flows-and-regions><span class=secno>1.1. </span>Named flows
 &lt;style&gt;
 
 #article {
-    <strong>flow-into: article_flow;</strong>
+  <strong>flow-into: article_flow;</strong>
 }
 
 #region1, #region2, #region3, #region4 {
-    <strong>flow-from: article_flow;</strong>
+  <strong>flow-from: article_flow;</strong>
 }
 &lt;/style&gt;
-</pre>
+      </pre>
   </div>
 
   <p>The &lsquo;<code class=css>article_flow</code>&rsquo; value on the
@@ -740,14 +739,13 @@ <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 more sophisticated form of pseudo-element styling such
-   as <a href="http://www.w3.org/TR/css3-selectors/#first-line"><code
+   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 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 1
+   dark blue and bold.
 
   <p>This design can be expressed with region styling as shown below.
 
@@ -758,50 +756,48 @@ <h3 id=region-styling><span class=secno>1.2. </span>Regions styling</h3>
  * Default article styling.
  */
 #article {
-    color:#777;
-    text-align: justify;
+  color:#777;
+  text-align: justify;
 }
 
 #article h1 {
-    color: crimson;
-    display: run-in;
+  color: crimson;
+  display: run-in;
 }
 
 #article h2 {
-    border-left: 1px solid #777;
-    padding-left: 2ex;
+  border-left: 1px solid #777;
+  padding-left: 2ex;
 }
 
 /*
  * Additional styling to apply to content when it falls into 
  * region1
  */
 <strong>@region #region1 {</strong>
-    p {
-        color: #0C3D5F;
-        font-weight: bold;
-    }
+  p {
+    color: #0C3D5F;
+    font-weight: bold;
+  }
 <strong>}</strong>
 
-
 /*
  * Style that would apply to region1's normal content but
  * will not apply to its named flow content.
  */
 #region1 p {
-    color: red;
+  color: red;
 }
 
 &lt;/style&gt;
-</pre>
+        </pre>
   </div>
 
   <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 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.
+   figure shows how the rendering changes if we apply styling specific to
+   region 1. Note how less text fits into region 1 now that the &lsquo;<code
+   class=property>font-weight</code>&rsquo; is bold instead of normal.
 
   <div class=figure> <img
    alt="Illustrate how changing region styling affects the flow of content."
@@ -816,9 +812,8 @@ <h3 id=region-styling><span class=secno>1.2. </span>Regions styling</h3>
    href="#named-flow0">named flow</a> content because the
    <code>&lt;p&gt;</code> elements in the &lsquo;<code
    class=property>article</code>&rsquo; <a href="#named-flow0">named flow</a>
-   are not descendants of the <code>#region1</code> element and,
-   consequently, the <code>"#region1 p"</code> selector does not apply to
-   these elements.
+   are not descendants of the <code>#region1</code> element and consequently
+   the <code>"#region1 p"</code> selector does not apply to these elements.
 
   <h2 id=css-regions-concepts><span class=secno>2. </span>CSS regions
    concepts</h2>
@@ -1546,13 +1541,13 @@ <h3 id=the-region-overflow-property><span class=secno>3.4. </span>The
    <pre>
 &lt;style&gt;
 #article {
-    flow-into: "article";
+  flow-into: "article";
 }
 
 #region_1, #region_2 {
-    flow-from: article;
-    <strong>region-overflow: break;</strong> /* or none */
-    <strong>overflow: visible;</strong> /* or hidden */
+  flow-from: article;
+  <strong>region-overflow: break;</strong> /* or none */
+  <strong>overflow: visible;</strong> /* or hidden */
 }
 
 &lt;/style&gt;
@@ -1562,7 +1557,7 @@ <h3 id=the-region-overflow-property><span class=secno>3.4. </span>The
 &lt;div id="region_1"&gt;&lt;/div&gt;
 &lt;div id="region_2"&gt;&lt;/div&gt;
 
-</pre>
+      </pre>
   </div>
 
   <div class=figure>
@@ -1920,7 +1915,7 @@ <h2 id=multi-column-regions><span class=secno>4. </span>Multi-column
    the rest of the content flows into regions that follow in the region
    chain. However, if a column-box region is the last region in a
    <span>region chain, then the multi-column element must generate additional
-   column-box regions if its flow fragment overflows (as it would with normal
+   column-box regions if its flow fragment overflows as it would with normal
    content).</span>
 
   <h2 id="pseudo_elements"><span class=secno>5. </span>Pseudo-elements</h2>
@@ -2044,10 +2039,10 @@ <h3 id=the-namedflow-interface><span class=secno>6.1. </span>The NamedFlow
   <pre class=idl>
 partial interface <a
    href="http://www.w3.org/TR/dom/#interface-document">Document</a> {
-    readonly attribute <a
+  readonly attribute <a
    href="#dom-named-flow-collection">NamedFlowCollection</a> <a
    href="#document-namedflows">namedFlows</a>;
-    <a
+  <a
    href="#dom-named-flow">NamedFlow?</a> <a
    href="#document-getflowbyname">getFlowByName(DOMString name)</a>;
 };               
@@ -2118,13 +2113,12 @@ <h3 id=the-namedflow-interface><span class=secno>6.1. </span>The NamedFlow
 
   <pre class=idl>
 interface NamedFlowCollection {
-    readonly attribute unsigned long <a
+  readonly attribute unsigned long <a
    href="#dom-named-flow-collection-length">length</a>;
-    getter <a
+  getter <a
    href="#dom-named-flow">NamedFlow?</a> <a
    href="#named-flow-collection-item">item (unsigned long index)</a>;
-};
-    </pre>
+};</pre>
 
   <p>The <dfn id=dom-named-flow-collection-length><code
    class=idl>length</code></dfn> attribute returns the number of items in the
@@ -2243,17 +2237,15 @@ <h3 id=the-region-interface><span class=secno>6.2. </span>The Region
    which can be regions.
 
   <pre class=idl>
-    interface Region {
-        readonly attribute DOMString <a
+interface Region {
+  readonly attribute DOMString <a
    href="#dom-region-regionoverset">regionOverset</a>;
-        readonly attribute DOMString <a
+  readonly attribute DOMString <a
    href="#dom-region-flowfrom">flowFrom</a>;
-        sequence&lt;<a
+  sequence&lt;<a
    href="#">Range</a>&gt;? <a
    href="#dom-region-getregionflowranges">getRegionFlowRanges()</a>;
-    };               
-
-    </pre>
+};</pre>
 
   <p>The <dfn id=dom-region-regionoverset><code
    class=idl>regionOverset</code></dfn> attribute returns one of the