adding more example

Author: howcom

css3-gcpm/Overview.src.html

@@ -3192,6 +3192,20 @@ <h3>Turning columns into regions</h3>
 </pre>
 </div>
 
+
+<div class=example>
+<pre>
+div.chapter::column(1) {
+  transform: rotate(6.5deg);
+}
+div.chapter::column(2) { 
+  transform: rotate(-5.5deg) translate(0, 40px);
+}
+</pre>
+
+<img src="regions_rotated_columns.jpg">
+</div>
+
 <!--
 <div class=example>
 Consider this markup:
@@ -3245,83 +3259,22 @@ <h3>Turning columns into regions</h3>
 </div>
 -->
 
-
-
-
-
-<h2>The 'first-page' pseudo-element</h2>
-
-
-<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.
+<h2>Regions and Exclusions examples</h2>
 
 <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>
-
+<img src=exclusion_ordering_z_order.png>
 </div>
 
-
-
-<h2>Selecting columns</h2>
-
-<p class=issue>This is sketchy.
-
-<p>Pseudo-elements are introduced to apply styling to the part of an
-element that ends up on a certain page of column of that element. The
-'column(n)' pseudo-element selects columns, the 'column(n,p)' pseudo-element selects columns on certain pages, nad the 'page(n)'
-psedo-element select pages.
-
 <div class=example>
-<pre>
-div.chapter::column(3)           /* the third column of the element */
-div.chapter::column(2n)          /* all even columns of the element */
-div.chapter::column(2,2)         /* second column on second page */
-div.chapter::column(*,2)         /* all columns on the second page */
-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>
+<img src=exclusion_ordering.png>
 </div>
 
 <div class=example>
-<pre>
-div.chapter::column(1) {
-  transform: rotate(6.5deg);
-}
-div.chapter::column(2) { 
-  transform: rotate(-5.5deg) translate(0, 40px);
-}
-</pre>
-
-<img src="regions_rotated_columns.jpg">
+<img src=shapes_CSS2.1_MBP.png>
 </div>
 
 
-<h2>Selecting pages </h2>
+<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. 
 
@@ -3378,6 +3331,54 @@ <h2>Selecting pages </h2>
 </div>
 
 
+<h3>The 'first-page' pseudo-element</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>
 
 <p>TBD