revising text and examples on regions and exclusions

Author: howcom

css3-gcpm/Overview.src.html

@@ -3027,7 +3027,7 @@ <h3>Pull-quotes</h3>
 
 <h3>Exclusions based on images</h3>
 
-
+<p>Exclusions are often based on shapes found in images. In this specification, the background image carries the shape, around which text is wrapped. The new property 'background-exclude-level' indicates a level in the alpha channel of the background image(s) that defines the shape.
 
 
 <div class=example>
@@ -3038,12 +3038,11 @@ <h3>Exclusions based on images</h3>
   padding: 4em;
   columns: 15em;
   background: url(nicecar.jpg);
-  background-exclude: 0.5;
+  background-exclude-level: 0.5;
 }  
 article h1 { column-span: all } /* Bonneville Speedway */
 </pre>  
 
-
 </div>
 
 <div class=example>
@@ -3071,7 +3070,9 @@ <h3>Exclusions based on images</h3>
   background: repeat-y url(zigzag.png);
   background-exclude-level: 0.5;
 }
-
+article h1 {
+  column-span: all;
+}
 </pre>
 
 </div>
@@ -3080,6 +3081,8 @@ <h3>Exclusions based on images</h3>
 
 <h3>Exclusions based on shapes</h3>
 
+<p class=issue>Is this needed?
+
 <div class=example>
 <img src=heart1.png>
 <pre>
@@ -3173,20 +3176,24 @@ <h3>Turning columns into regions</h3>
 <img alt="sample rendering" src=regions.png>
 
 <pre>
-  article { columns: 3 }
-  img { column-span: 2; width: 100%; float: top }
-  article::column(1) {    /* selects column 1 */
-    column-span: 2;
-    float: top;
-    visibility: collapse; /* so that column 2 moves in */
-    height: 3em;          /* or something */
-  }  
+article { columns: 3 }
+img { column-span: 2; width: 100%; float: top }
+article::column(1) {    /* selects column 1 */
+  column-span: 2;
+  float: top;
+  visibility: collapse; /* so that column 2 moves in */
+  height: 3em;          /* or something */
+}  
+
+&lt;article>
+  &lt;img ...>
+  &lt;p>...  &lt;p>...  &lt;p>...
+&lt;/article>
 </pre>
 </div>
 
-
+<!--
 <div class=example>
-
 <pre>
   article { columns: 14em; }
   article::column(1) { 
@@ -3197,6 +3204,7 @@ <h3>Turning columns into regions</h3>
   }
 </pre>
 </div>
+-->