- From: H?kon Wium Lie via cvs-syncmail <cvsmail@w3.org>
- Date: Sun, 25 Dec 2011 01:11:00 +0000
- To: public-css-commits@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 ‘<code class=property>float-offset</code>’
@@ -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 ‘<code class=property>first-page</code>’
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 ‘<code class=property>float</code>’ 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 — 'line-stacking-strategy: grid-height' — 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
‘<code class=property>first-page</code>’ pseudo-element</h2>
<p>The ‘<code class=property>first-page</code>’ 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