machine-generated version

Author: howcome

css-gcpm/Overview.html

@@ -11,7 +11,7 @@
   <meta content="CSS Generated Content for Paged Media Module"
    name=dcterms.title>
   <meta content=text name=dcterms.type>
-  <meta content=2013-09-07 name=dcterms.date>
+  <meta content=2013-09-08 name=dcterms.date>
   <meta content="Håkon Wium Lie" name=dcterms.creator>
   <meta content=W3C name=dcterms.publisher>
   <meta content="http://dev.w3.org/csswg/css3-gcpm/" name=dcterms.identifier>
@@ -42,13 +42,13 @@
 
    <h1>CSS Generated Content for Paged Media Module</h1>
 
-   <h2 class="no-num no-toc" id=w3c-working>Editor's Draft 7 September 2013</h2>
+   <h2 class="no-num no-toc" id=w3c-working>Editor's Draft 8 September 2013</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a
-     href="http://dev.w3.org/csswg/css3-gcpm/">http://www.w3.org/TR/2013/ED-css3-gcpm-20130907/</a>
+     href="http://dev.w3.org/csswg/css3-gcpm/">http://www.w3.org/TR/2013/ED-css3-gcpm-20130908/</a>
 
     <dt>Latest version:
 
@@ -309,6 +309,10 @@ <h2 class="no-num no-toc" id=table-of-contents><a name=contents>Table of
 
    <li><a href="#selecting-pages"><span class=secno>17. </span>Selecting
     pages</a>
+    <ul class=toc>
+     <li><a href="#page-groups-"><span class=secno>17.1. </span>Page groups
+      </a>
+    </ul>
 
    <li><a href="#selecting-lines"><span class=secno>18. </span>Selecting
     lines</a>
@@ -4476,114 +4480,128 @@ <h2 id=regions-and-exclusions-examples><span class=secno>16. </span>Regions
 
   <h2 id=selecting-pages><span class=secno>17. </span>Selecting pages</h2>
 
-  <p>In CSS 2.0, <a
+  <p>In CSS2, <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 of a certiain type.
-
-  <p>The ‘<code class=property>first-page</code>’ pseudo-element 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 :first-page pseudo-elements: column
-   properties, background properties, margin properties, border properties,
-   and padding properties. UAs may apply other properties as well.
+   selecting the nth page. <!--
+<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:
+   <p>In this example, the first page of an article will have a pink
+    background, and the second will be lime:
 
    <pre>
-  div.chapter { columns: 2 }
-  div.chapter::first-page { columns: 1 }
+@page funky:nth(1) { background: pink }
+@page funky:nth(2) { background: lime }
+article { page: funky }
 </pre>
   </div>
 
+  <p>The grammar of allowed arguments to nth() is the same as the <a
+   href="http://www.w3.org/TR/css3-selectors/#nth-child-pseudo">nth-child()
+   pseudo-class</a>.
+
   <div class=example>
-   <p>In this example, padding is added on the left side on the starting page
-    of each chapter:
+   <p>In this example, pages in a document will alternate between pink and
+    lime backgrounds:
 
    <pre>
-  div.chapter { break-before: left }
-  div.chapter::first-page { padding-left: 4em }
+@page :nth(odd) { background: pink }
+@page :nth(even)) { background: lime }
 </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.
+  <h3 id=page-groups-><span class=secno>17.1. </span>Page groups</h3>
 
-  <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.
+  <p>Named pages can appear in sequence, stemming from different elements. A
+   sequnce of named pages is called a <em>page group</em>. The ‘<a
+   href="#page-group"><code class=property>page-group</code></a>’ property
+   expresses whether an element starts a new page group or not.
 
+  <table class=propdef>
+   <tbody>
+    <tr>
+     <td><em>Name:</em>
 
-<div class=example>
-<p>This example sets the background color of the second page in the document:
+     <td><dfn id=page-group>page-group</dfn>
 
-<pre>
-@page :nth(2) {
-  background: green;
-}
-<pre>
-</div>
+    <tr>
+     <td><em>Value:</em>
 
-<div class=example>
-<p>This example sets the background color of the second page of all chapters in a document:
+     <td>auto | start
 
-<pre>
-@page chapter {
-  background: yellow;
-}
-@page chapter:nth(2) {
-  background: green;
-}
-div.chapter {
-  page: chapter;
-}
-<pre>
-</div>
+    <tr>
+     <td><em>Initial:</em>
 
-<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.
+     <td>auto
 
-<div class="example">
-<pre>
-@page chapter:nth(2n+1) {
-  background: green;
-}
-</pre>
-</div>
+    <tr>
+     <td><em>Applies to:</em>
 
-<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().
+     <td>elements with ‘<code class=property>page</code>’ value other
+      than auto
 
-<div class="example">
-<p>Even when the first line is commented out, the second page of all chapters in the document will be green.
+    <tr>
+     <td><em>Inherited:</em>
 
-<pre>
-/* @page chapter { ... } */
+     <td>no
 
-@page chapter:nth(2) {
-  background: green;
-}
+    <tr>
+     <td><em>Percentages:</em>
 
-div.chapter { page: chapter }
-</pre>
-</div>
+     <td>N/A
 
+    <tr>
+     <td><em>Media:</em>
 
-<h3>Page pseudo-elements</h3>
+     <td>paged
 
-<p class=issue>This may no longer be needed du to generic page selectors
--->
+    <tr>
+     <td><em>Computed value:</em>
+
+     <td>as specified
+  </table>
+
+  <p>This property determines whether the element starts a new page group or
+   not.
+
+  <dl>
+   <dt>auto
+
+   <dd>The element only starts a new page group if ‘<code
+    class=property>page</code>’ has a named page different from the the
+    previous element.
+
+   <dt>start
+
+   <dd>The element starts a new page group.
+  </dl>
+
+  <div class=example>
+   <p>In this example, each article starts a new page group so that the first
+    page of each article has a pink background.
+
+   <pre>
+@page funky:first-page {
+  background: pink;
+}
+article {
+  page: funky;
+  page-group: start;
+}
+</pre>
+
+   <p>Without the ‘<code class=css>page-group: start</code>’ declaration,
+    only the first page of the first article would be pink.
+  </div>
 
   <h2 id=selecting-lines><span class=secno>18. </span>Selecting lines</h2>
 
@@ -4754,6 +4772,9 @@ <h2 class=no-num id=index>Index</h2>
    <li>named strings, <a href="#named-strings0"
     title="section 1."><strong>1.</strong></a>
 
+   <li>page-group, <a href="#page-group"
+    title="section 17.1."><strong>17.1.</strong></a>
+
    <li>running elements, <a href="#running-elements0"
     title="section 1."><strong>1.</strong></a>
 
@@ -4933,6 +4954,21 @@ <h2 class=no-num id=property-index>Property index</h2>
 
      <td>visual, paged
 
+    <tr>
+     <th><a class=property href="#page-group">page-group</a>
+
+     <td>auto | start
+
+     <td>auto
+
+     <td>elements with ‘page’ value other than auto
+
+     <td>no
+
+     <td>N/A
+
+     <td>paged
+
     <tr>
      <th><a class=property href="#string-set">string-set</a>