W3C home > Mailing lists > Public > public-css-commits@w3.org > December 2011

csswg/css3-gcpm Overview.html,1.181,1.182

From: (wrong string) åkon Wium Lie via cvs-syncmail <cvsmail@w3.org>
Date: Sun, 25 Dec 2011 01:11:00 +0000
To: public-css-commits@w3.org
Message-Id: <E1Recc8-0005Hr-Qy@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-gcpm
In directory hutz:/tmp/cvs-serv20281

Modified Files:
	Overview.html 
Log Message:
x

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-gcpm/Overview.html,v
retrieving revision 1.181
retrieving revision 1.182
diff -u -d -r1.181 -r1.182
--- Overview.html	23 Dec 2011 21:34:14 -0000	1.181
+++ Overview.html	25 Dec 2011 01:10:58 -0000	1.182
@@ -24,13 +24,13 @@
 
    <h1>CSS Generated Content for Paged Media Module</h1>
 
-   <h2 class="no-num no-toc" id=w3c-working>Editor's Draft 23 December 2011</h2>
+   <h2 class="no-num no-toc" id=w3c-working>Editor's Draft 25 December 2011</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a
-     href="http://www.w3.org/TR/2011/ED-css3-gcpm-20111223/">http://www.w3.org/TR/2011/ED-css3-gcpm-20111223/</a>
+     href="http://www.w3.org/TR/2011/ED-css3-gcpm-20111225/">http://www.w3.org/TR/2011/ED-css3-gcpm-20111225/</a>
 
     <dt>Latest version:
 
@@ -225,10 +225,10 @@
       </span>Floating inside and outside pages</a>
     </ul>
 
-   <li><a href="#exclusion"><span class=secno>13. </span>Exclusion</a>
+   <li><a href="#exclusions"><span class=secno>13. </span>Exclusions</a>
     <ul class=toc>
-     <li><a href="#exclusion-based-on-floats"><span class=secno>13.1.
-      </span>Exclusion based on floats</a>
+     <li><a href="#exclusions-based-on-floats"><span class=secno>13.1.
+      </span>Exclusions based on floats</a>
 
      <li><a href="#the-float-offset-property"><span class=secno>13.2.
       </span>The &lsquo;<code class=property>float-offset</code>&rsquo;
@@ -245,16 +245,25 @@
       </span>Exclusions based on shapes</a>
     </ul>
 
-   <li><a href="#the-first-page-pseudo-element"><span class=secno>14.
+   <li><a href="#regions"><span class=secno>14. </span>Regions</a>
+    <ul class=toc>
+     <li><a href="#selecting-columns"><span class=secno>14.1.
+      </span>Selecting columns</a>
+
+     <li><a href="#turning-columns-into-regions"><span class=secno>14.2.
+      </span>Turning columns into regions</a>
+    </ul>
+
+   <li><a href="#the-first-page-pseudo-element"><span class=secno>15.
     </span>The &lsquo;<code class=property>first-page</code>&rsquo;
     pseudo-element</a>
 
-   <li><a href="#selecting-columns-and-pages"><span class=secno>15.
+   <li><a href="#selecting-columns-and-pages"><span class=secno>16.
     </span>Selecting columns and pages</a>
 
-   <li><a href="#conformance"><span class=secno>16. </span>Conformance</a>
+   <li><a href="#conformance"><span class=secno>17. </span>Conformance</a>
 
-   <li><a href="#appendix-a-default-style-sheet"><span class=secno>17.
+   <li><a href="#appendix-a-default-style-sheet"><span class=secno>18.
     </span>Appendix A: Default style sheet</a>
 
    <li class=no-num><a href="#acknowledgments">Acknowledgments</a>
@@ -3132,9 +3141,9 @@
 </pre>
   </div>
 
-  <h2 id=exclusion><span class=secno>13. </span>Exclusion</h2>
+  <h2 id=exclusions><span class=secno>13. </span>Exclusions</h2>
 
-  <h3 id=exclusion-based-on-floats><span class=secno>13.1. </span>Exclusion
+  <h3 id=exclusions-based-on-floats><span class=secno>13.1. </span>Exclusions
    based on floats</h3>
 
   <p>A new value on &lsquo;<code class=property>float</code>&rsquo; is
@@ -3442,40 +3451,60 @@
   <h3 id=exclusions-based-on-images><span class=secno>13.4. </span>Exclusions
    based on images</h3>
 
-  <div class=example> <img src=car1.jpg>
+  <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: 0.5;
 }  
 article h1 { column-span: all } /* Bonneville Speedway */
 </pre>
   </div>
 
-  <div class=example> <img src=car2.jpg>
+  <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-level: 0.5;
 }  
 article h1 { column-span: all } /* Bonneville Speedway */
 </pre>
   </div>
 
+  <p>Background images can be repeated. Therefore exclusions based on images
+   can be repeated.
+
+  <div class=example> <img src="exclusions_repeating.jpg">
+   <pre>
+article {
+  background: repeat-y url(zigzag.png);
+  background-exclude-level: 0.5;
+}
+
+</pre>
+  </div>
+
   <h3 id=exclusions-based-on-shapes><span class=secno>13.5. </span>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>
@@ -3484,10 +3513,10 @@
   <div class=example> <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>
@@ -3521,11 +3550,61 @@
   <!--
 <p class=note>A similar idea &mdash; 'line-stacking-strategy: grid-height' &mdash; was proposed in a <a href="http://www.w3.org/TR/css3-linebox/#line-stacking-strategy">previous version of the CSS3 line module</a>. The 'line-stacking-strategy' property is <a href="http://www.w3.org/TR/xsl/#line-stacking-strategy">used in XSL</a>.
 -->
-  <!--
-   div.chapter:columns-page(1) { } 
--->
 
-  <h2 id=the-first-page-pseudo-element><span class=secno>14. </span>The
+  <h2 id=regions><span class=secno>14. </span>Regions</h2>
+
+  <p>Regions are series of stylable boxes into which content can be poured.
+   Columns are 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 and thereby escape the rigid patterns
+   that columns naturally live in.
+
+  <h3 id=selecting-columns><span class=secno>14.1. </span>Selecting columns</h3>
+
+  <div class=example>
+   <pre>
+div.chapter::column(3)       /* the 3rd column of the element */
+div.chapter::column(2n)      /* all even columns of the element */
+div.chapter::column(3+)      /* all columns but the 1st and 2nd */
+div.chapter::column(2,2)     /* second column on second page */
+div.chapter::column(*,2)     /* all columns on the second page */
+div.chapter::column(,2)      /* all columns on the second page */
+</pre>
+  </div>
+
+  <h3 id=turning-columns-into-regions><span class=secno>14.2. </span>Turning
+   columns into regions</h3>
+
+  <p>A column that is moved from its natural position into
+
+  <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 id=the-first-page-pseudo-element><span class=secno>15. </span>The
    &lsquo;<code class=property>first-page</code>&rsquo; pseudo-element</h2>
 
   <p>The &lsquo;<code class=property>first-page</code>&rsquo; pseudo-element
@@ -3557,7 +3636,7 @@
 </pre>
   </div>
 
-  <h2 id=selecting-columns-and-pages><span class=secno>15. </span>Selecting
+  <h2 id=selecting-columns-and-pages><span class=secno>16. </span>Selecting
    columns and pages</h2>
 
   <p class=issue>This is sketchy.
@@ -3651,11 +3730,11 @@
 
 -->
 
-  <h2 id=conformance><span class=secno>16. </span>Conformance</h2>
+  <h2 id=conformance><span class=secno>17. </span>Conformance</h2>
 
   <p>TBD
 
-  <h2 id=appendix-a-default-style-sheet><span class=secno>17. </span>Appendix
+  <h2 id=appendix-a-default-style-sheet><span class=secno>18. </span>Appendix
    A: Default style sheet</h2>
 
   <pre>
Received on Sunday, 25 December 2011 01:11:02 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 19:26:08 UTC