- 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