adding image

Author: howcom

css3-gcpm/Overview.src.html

@@ -2740,9 +2740,9 @@ <h3>Floating inside and outside pages</h3>
 </div>
 
 
-<h2>Exclusion</h2>
+<h2>Exclusions</h2>
 
-<h3>Exclusion based on floats</h3>
+<h3>Exclusions based on floats</h3>
 
 <p>A new value on 'float' is introduced to support intrusion in columns:
 
@@ -3028,13 +3028,14 @@ <h3>Pull-quotes</h3>
 <h3>Exclusions based on images</h3>
 
 <div class=example>
+<p>Here is an example that uses the background of the multicol element as a template for exclusions.
 <img src=car1.jpg>
 <pre>
 article {
   padding: 4em;
   columns: 15em;
   background: url(nicecar.jpg);
-  exclude-threshold: 0.5;
+  background-exclude-threshold: 0.5;
 }  
 article h1 { column-span: all } /* Bonneville Speedway */
 </pre>  
@@ -3043,28 +3044,31 @@ <h3>Exclusions based on images</h3>
 </div>
 
 <div class=example>
+<p>This example is the same as the above, just with changed column widths.
 <img src=car2.jpg>
 <pre>
 article {
   padding: 4em;
   columns: 6em;
   background: url(nicecar.jpg);
-  exclude-threshold: 0.5;
+  background-exclude-threshold: 0.5;
 }  
 article h1 { column-span: all } /* Bonneville Speedway */
 </pre>  
 </div>
 
+
 <h3>Exclusions based on shapes</h3>
 
 <div class=example>
 <img src=heart1.png>
 <pre>
 article::column(1) {
-  shape-inside: circle(50%, 50%, 30%);
+  content-inside: circle(50%, 50%, 30%);
 }
+
 article::column(1) {
-  shape-inside: polygon(x1, y1, x2, y2, x3, y3, ... xn, yn);
+  content-outside: polygon(x1, y1, x2, y2, x3, y3, ... xn, yn);
   color: red;
 }
 </pre>
@@ -3074,10 +3078,10 @@ <h3>Exclusions based on shapes</h3>
 <img src=heart2.png>
 <pre>
 article::column(1) {
-  shape-: circle(x, y, z);
+  content-outside: circle(x, y, z);
 }
 article::column(1) {
-  shape-outside: polygon(x1, y1, x2, y2, x3, y3, ... xn, yn);
+  content-inside: polygon(x1, y1, x2, y2, x3, y3, ... xn, yn);
 }
 </pre>
 </div>
@@ -3116,9 +3120,59 @@ <h2>Aligning baselines in multi-column layouts</h2>
 
 
 
-<!--
-   div.chapter:columns-page(1) { } 
--->
+
+<h2>Regions</h2>
+
+<p>Regions are stylable boxes into which content can be poured.
+Columns are a kind of regions that are automatically generated to
+contain all the content of the the multicol element. By adding
+selectors for columns, columns can be styled and positioned. 
+
+<h3>Selecting columns</h3>
+
+<div class=example>
+<pre>
+div.chapter::column(3)           /* the third column of the element */
+div.chapter::column(2n)          /* all even columns of the element */
+div.chapter::column(3+)          /* all even columns of the element */
+div.chapter::column(2,2)         /* second column on second page */
+div.chapter::column(*,2)         /* all columns on the second page */
+</pre>
+</div>
+
+<p>Columns can be moved 
+
+<div class=example>
+<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 */
+  }  
+</pre>
+</div>
+
+
+<div class=example>
+
+<pre>
+  article { columns: 14em; }
+  article::column(1) { 
+     position: absolute; 
+     font-size: 1.2em;
+     visibility: collapse; /* makes space available others to use */
+     ...
+  }
+</pre>
+</div>
+
+
+
 
 
 <h2>The 'first-page' pseudo-element</h2>