csswg/css3-gcpm exclusions_repeating.jpg,NONE,1.1 Overview.src.html,1.186,1.187

Update of /sources/public/csswg/css3-gcpm
In directory hutz:/tmp/cvs-serv17524

Modified Files:
	Overview.src.html 
Added Files:
	exclusions_repeating.jpg 
Log Message:
adding image


--- NEW FILE: exclusions_repeating.jpg ---
(This appears to be a binary file; contents omitted.)

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-gcpm/Overview.src.html,v
retrieving revision 1.186
retrieving revision 1.187
diff -u -d -r1.186 -r1.187
--- Overview.src.html	23 Dec 2011 21:34:02 -0000	1.186
+++ Overview.src.html	25 Dec 2011 00:44:39 -0000	1.187
@@ -2740,9 +2740,9 @@
 </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>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 @@
 </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 @@
 <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 @@
 
 
 
-<!--
-   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>

Received on Sunday, 25 December 2011 00:44:42 UTC