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

csswg/css3-gcpm Overview.src.html,1.194,1.195

From: (wrong string) åkon Wium Lie via cvs-syncmail <cvsmail@w3.org>
Date: Tue, 27 Dec 2011 13:39:05 +0000
To: public-css-commits@w3.org
Message-Id: <E1RfXFB-00084F-JZ@lionel-hutz.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;
+}
+
+&lt;p>&lt;span id="dropcaps">Many&lt;/span> instances ...&lt;/p>
+    &lt;p>The text ....&lt;/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

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