- From: H?kon Wium Lie via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 27 Dec 2011 13:39:05 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-gcpm In directory hutz:/tmp/cvs-serv30990 Modified Files: Overview.src.html Log Message: updating examples Index: Overview.src.html =================================================================== RCS file: /sources/public/csswg/css3-gcpm/Overview.src.html,v retrieving revision 1.194 retrieving revision 1.195 diff -u -d -r1.194 -r1.195 --- Overview.src.html 26 Dec 2011 15:03:44 -0000 1.194 +++ Overview.src.html 27 Dec 2011 13:39:03 -0000 1.195 @@ -2810,6 +2810,20 @@ horizontal and the second is the vertical 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, 'float-offset' 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 'float' @@ -3090,7 +3104,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; } @@ -3103,7 +3117,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> @@ -3279,21 +3293,108 @@ <h2>Regions and Exclusions examples</h2> <div class=example> -<img src=exclusion_ordering_z_order.png> +<img src=exclusion_ordering.png> +<pre> +article { + columns: 15em; +} +acticle::region(1-3) { + height: 15em; +} +acticle::region(2-3) { + margin: 4em 0 0 -4em; +} +</pre> </div> <div class=example> -<img src=exclusion_ordering.png> +<img src=exclusion_ordering_z_order.png> +<pre> +article { + columns: 15em; +} +acticle::region(1-3) { + height: 15em; +} +acticle::region(2-3) { + margin: 4em 0 0 -4em; +} +acticle::region(2) { + z-index: 1; +} +</pre> </div> + <div class=example> -<img src=shapes_CSS2.1_MBP.png> +<img src=exclusions-dropcap.png> +<pre> +#dropcaps { + font-size: 3em; + float: left; + exclude-level: 0.5; +} + +<p><span id="dropcaps">Many</span> instances ...</p> + <p>The text ....</p> +</pre> </div> + <h2>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. +<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 'first-page' pseudo-element is similar to the 'first-letter' +and 'first-line' 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, 'first-page' applies to +the whole element. The following properties apply to :first-page +pseudo-elements: column properties, background properties, margin +properties, border properties, and padding properties. UAs may apply +other properties as well. + +<div class=example> + +<p>In this example, there will be one column on the starting page of +each chapter, while subsequent pages will have two columns: + +<pre> + div.chapter { columns: 2 } + div.chapter::first-page { columns: 1 } +</pre> + +</div> + +<div class=example> + +<p>In this example, padding is added on the left side on the starting +page of each chapter: + +<pre> + div.chapter { break-before: left } + div.chapter::first-page { padding-left: 4em } +</pre> + +</div> + +<p>As a generalization of the 'first-page' pseudo-element, the +'page()' 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: @@ -3348,52 +3449,10 @@ </div> -<h3>The 'first-page' pseudo-element</h3> +<h3>Page pseudo-elements</h3> <p class=issue>This may no longer be needed du to generic page selectors - -<p>The 'first-page' pseudo-element 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, 'first-page' -applies to the whole element. The following properties apply to -:first-page pseudo-elements: column properties, background properties, -margin properties, border properties, and padding properties. UAs may -apply other properties as well. - -<div class=example> - -<p>In this example, there will be one column on the starting page of -each chapter, while subsequent pages will have two columns: - -<pre> - div.chapter { columns: 2 } - div.chapter::first-page { columns: 1 } -</pre> - -</div> - -<div class=example> - -<p>In this example, padding is added on the left side on the starting -page of each chapter: - -<pre> - div.chapter { break-before: left } - div.chapter::first-page { padding-left: 4em } -</pre> - -</div> - - -<div class=example> -<pre> -div.chapter::page(2) /* second page 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> - - +--> <h2>Conformance</h2>
Received on Tuesday, 27 December 2011 13:39:10 UTC