- From: H?kon Wium Lie via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 27 Dec 2011 13:39:16 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-gcpm In directory hutz:/tmp/cvs-serv31033 Modified Files: Overview.html Log Message: machine-generated Index: Overview.html =================================================================== RCS file: /sources/public/csswg/css3-gcpm/Overview.html,v retrieving revision 1.188 retrieving revision 1.189 diff -u -d -r1.188 -r1.189 --- Overview.html 26 Dec 2011 15:03:53 -0000 1.188 +++ Overview.html 27 Dec 2011 13:39:13 -0000 1.189 @@ -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 26 December 2011</h2> + <h2 class="no-num no-toc" id=w3c-working>Editor's Draft 27 December 2011</h2> <dl> <dt>This version: <dd><a - href="http://www.w3.org/TR/2011/ED-css3-gcpm-20111226/">http://www.w3.org/TR/2011/ED-css3-gcpm-20111226/</a> + href="http://www.w3.org/TR/2011/ED-css3-gcpm-20111227/">http://www.w3.org/TR/2011/ED-css3-gcpm-20111227/</a> <dt>Latest version: @@ -256,11 +256,6 @@ <li><a href="#selecting-pages"><span class=secno>16. </span>Selecting pages</a> - <ul class=toc> - <li><a href="#the-first-page-pseudo-element"><span class=secno>16.1. - </span>The ‘<code class=property>first-page</code>’ - pseudo-element</a> - </ul> <li><a href="#conformance"><span class=secno>17. </span>Conformance</a> @@ -3231,6 +3226,23 @@ offset. If no vertical value has been specified, the vertical offset is set to zero. + <p>This property can only influence a float along an axis it has been + floated. + + <div class=example> + <pre> +img { + float: left; + float-offset: 2em 3em; +} +</pre> + + <p>In this example, the image is float to the left. Therefore, ‘<a + href="#float-offset"><code class=property>float-offset</code></a>’ + may only push the element in the horizontal direction, and the vertial + value is ignored. + </div> + <p>Negative values are allowed; a negative values will push the float in the same direction as it has been floated with ‘<code class=property>float</code>’ @@ -3514,7 +3526,7 @@ content-inside: circle(50%, 50%, 30%); } -article::column(1) { +article::column(2) { content-outside: polygon(x1, y1, x2, y2, x3, y3, ... xn, yn); color: red; } @@ -3526,7 +3538,7 @@ article::column(1) { content-outside: circle(x, y, z); } -article::column(1) { +article::column(2) { content-inside: polygon(x1, y1, x2, y2, x3, y3, ... xn, yn); } </pre> @@ -3694,91 +3706,61 @@ <h2 id=regions-and-exclusions-examples><span class=secno>15. </span>Regions and Exclusions examples</h2> - <div class=example> <img src="exclusion_ordering_z_order.png"></div> - - <div class=example> <img src="exclusion_ordering.png"></div> - - <div class=example> <img src="shapes_CSS2.1_MBP.png"></div> - - <h2 id=selecting-pages><span class=secno>16. </span>Selecting pages</h2> - - <p>In CSS 2.0, <a - href="http://www.w3.org/TR/CSS2/page.html#page-selectors">first, left and - right pages</a> can be selected. This specification adds support for - selecting the nth page in the document, or the nth named page. - - <div class=example> - <p>This example sets the background color of the second page in the - document: - + <div class=example> <img src="exclusion_ordering.png"> <pre> -@page :nth(2) { - background: green; +article { + columns: 15em; +} +acticle::region(1-3) { + height: 15em; +} +acticle::region(2-3) { + margin: 4em 0 0 -4em; } -</pre> - - <pre> </pre> </div> - <div class=example> - <p>This example sets the background color of the second page of all - chapters in a document: - + <div class=example> <img src="exclusion_ordering_z_order.png"> <pre> -@page chapter { - background: yellow; +article { + columns: 15em; } -@page chapter:nth(2) { - background: green; +acticle::region(1-3) { + height: 15em; } -div.chapter { - page: chapter; +acticle::region(2-3) { + margin: 4em 0 0 -4em; } -</pre> - - <pre> -</pre> - </div> - - <p>The arguments to the nth() functional notation is the same as for the <a - href="http://www.w3.org/TR/css3-selectors/#nth-child-pseudo">nth-child()</a> - pseudo-class. - - <div class=example> - <pre> -@page chapter:nth(2n+1) { - background: green; +acticle::region(2) { + z-index: 1; } </pre> </div> - <p>Even when a named page is not defined through an <code>@page - <em>name</em> { .. }</code> construct, the name can still be used with - :nth(). - - <div class=example> - <p>Even when the first line is commented out, the second page of all - chapters in the document will be green. - + <div class=example> <img src=exclusions-dropcap.png> <pre> -/* @page chapter { ... } */ - -@page chapter:nth(2) { - background: green; +#dropcaps { + font-size: 3em; + float: left; + exclude-level: 0.5; } -div.chapter { page: chapter } +<p><span id="dropcaps">Many</span> instances ...</p> + <p>The text ....</p> </pre> </div> - <h3 id=the-first-page-pseudo-element><span class=secno>16.1. </span>The - ‘<code class=property>first-page</code>’ pseudo-element</h3> + <h2 id=selecting-pages><span class=secno>16. </span>Selecting pages</h2> - <p class=issue>This may no longer be needed du to generic page selectors + <p>In CSS 2.0, <a + href="http://www.w3.org/TR/CSS2/page.html#page-selectors">first, left and + right pages</a> can be selected. This specification adds support for + selecting a certain page generate by a certain element. <p>The ‘<code class=property>first-page</code>’ pseudo-element - is used to apply styling to the part of an element that ends up on the + is similar to the ‘<code class=property>first-letter</code>’ + and ‘<code class=property>first-line</code>’ elements; it is + used to apply styling to the part of an element that ends up on the starting page for that element. If the whole element appears on the starting page, ‘<code class=property>first-page</code>’ applies to the whole element. The following properties apply to @@ -3806,13 +3788,80 @@ </pre> </div> + <p>As a generalization of the ‘<code + class=property>first-page</code>’ pseudo-element, the ‘<code + class=css>page()</code>’ pseudo-selector allows other pages to be + selected. + <div class=example> <pre> div.chapter::page(2) /* second page of the element */ +div.chapter::page(2n) /* even pages of the element */ div.chapter::page(2-4) /* select page 2, 3, and 4 */ div.chapter::page(2)::column(2) /* second column, but only if it appears on the second page */ </pre> </div> + <!-- +nth page in the document, or the nth named page. + + +<div class=example> +<p>This example sets the background color of the second page in the document: + +<pre> +@page :nth(2) { + background: green; +} +<pre> +</div> + +<div class=example> +<p>This example sets the background color of the second page of all chapters in a document: + +<pre> +@page chapter { + background: yellow; +} +@page chapter:nth(2) { + background: green; +} +div.chapter { + page: chapter; +} +<pre> +</div> + +<p>The arguments to the nth() functional notation is the same as for the <a href="http://www.w3.org/TR/css3-selectors/#nth-child-pseudo">nth-child()</a> pseudo-class. + +<div class="example"> +<pre> +@page chapter:nth(2n+1) { + background: green; +} +</pre> +</div> + +<p>Even when a named page is not defined through an <code>@page <em>name</em> { .. }</code> construct, the name can still be used with :nth(). + +<div class="example"> +<p>Even when the first line is commented out, the second page of all chapters in the document will be green. + +<pre> +/* @page chapter { ... } */ + +@page chapter:nth(2) { + background: green; +} + +div.chapter { page: chapter } +</pre> +</div> + + +<h3>Page pseudo-elements</h3> + +<p class=issue>This may no longer be needed du to generic page selectors +--> <h2 id=conformance><span class=secno>17. </span>Conformance</h2>
Received on Tuesday, 27 December 2011 13:39:21 UTC