[css-gcpm-4] Incorporate Brad Kemper's copy-into proposal from www-style

Author: dauwhe

css-gcpm-4/Overview.bs

@@ -11,21 +11,17 @@ Abstract: Level 4 of GCPM proposes a region-based approach to footnotes and runn
 !Issue Tracking: <a href="https://www.w3.org/Bugs/Public/enter_bug.cgi?product=CSS&component=Generated%20Content%20for%20Paged%20Media">W3C Bugzilla</a>
 Ignored Terms: 
 Warning: Not Ready
-
 </pre>
 
 <h2 class="no-num" id="introduction">
-	Introduction
+Introduction
 </h2>
 
 There have been many proposals for using CSS to move document content, often motivated by the desire for magazine- or book-style layout of footnotes, running heads, pull quotes, sidebars, and so on. [[CSS3GCPM]] used float: footnote and position: running(). The now-abandoned [[CSS3GENCON]] Working Draft used content: footnote. PrinceXML (and older GCPM drafts) has content: flow() and flow: static(). WHATWG CSS Books has flow: area().
 
 This module proposes a unified approach to paginated layout based on [[CSS3-REGIONS]] and [[CSS3-PAGE-TEMPLATE]]. Additional properties will be introduced as necessary. 
 
 
-
-
-<!--page areas-->
 <h2 id="running-headers-and-footers">
 	Running headers and footers
 </h2>
@@ -40,7 +36,7 @@ The existing mechanisms do not cover many use cases.
 
 Headers often contain document content, and it is desirable to both display that content normally (for example, as an <code>h1</code>) and to use the content in a running head. [[CSS3-REGIONS]] allows for an element to be moved to a ''named flow'', but doesn't allow for using the same content in two ways. The 'copy-into' property allows an element to be copied into a content fragment which can then be placed with the 'content' property. 
 
-<p class="note">Use cases for running heads can be found in [[LATINREQ] http://w3c.github.io/dpub-pagination/#content</p>
+<p class="note">Use cases for running heads can be found in [[LATINREQ]] http://w3c.github.io/dpub-pagination/#content</p>
 
 
 
@@ -64,21 +60,14 @@ The 'copy-into' property contains one or more pairs, each consisting of a custom
 
 
 <dl>
-
 <dt>element</dt>
 <dd>the entire element is copied into the named content fragment</dd>
 
 <dt>contents</dt>
-
-<dd>only the element’s contents are copied into the named content fragment. This is the default if ''content-level'' is not specified.
-
-</dd>
+<dd>only the element’s contents are copied into the named content fragment. This is the default if ''content-level'' is not specified.</dd>
 
 <dt>text</dt>
-
-<dd>only the element’s text (including normally collapsed white space) is copied into the named content fragment.
-</dd>
-
+<dd>only the element’s text (including normally collapsed white space) is copied into the named content fragment.</dd>
 </dl>
 
 <div class="example">
@@ -101,41 +90,25 @@ h1 {
 
 <h3 id="flow-persist-heading">Choosing among multiple values on a page</h3>
 
+<h4 id="page-selector-pseudo-classes">Page selector pseudo-classes</h4>
 
+By default, the content fragment name would be global, as the named flow is with 'flow-into'. But if one of the following pseudo-classes are used on the subject of the selector, then the name is locally scoped to just the page the element is on.
 
+<dl>
 
+<dt><dfn>:nth-of-page(n)</dfn></dt>
+<dd>The element is the nth matched element on the page.</dd>
 
+<dt><dfn>:first-of-page</dfn></dt>
+<dd>Same as :nth-of-page(n), but where n = 1 (it is the first matched element on the page).</dd>
 
-<!-- 
-<pre class="propdef">
-Name: <dfn id="flow-persist-property">flow-persist</dfn>
-Value: ( normal | persist | static ), ( start | first | last | first-except)?
-Initial: normal
-Applies To: all elements with a value of 'flow-from' other than none.
-Inherited: no
-Media: visual
-Computed value: as specified
-</pre> 
- -->
- 
- 
-
-
-<h4>Page selector pseudo-classes</h4>
-
-By default, the content fragment name would be global, as the named flow is with 'flow-into'. But if one of the following pseudo-classes are used on the subject of the selector, then the name is locally scoped to just the page the element is on.
-
-:: : :nth-of-page(n)
-:: The element is the nth matched element on the page.
-
-:: : :first-of-page
-:: Same as :nth-of-page(n), but where n = 1 (it is the first matched element on the page).
+<dt><dfn>:last-of-page</dfn></dt>      
+<dd>The element is the last matched element on the page.</dd>
 
-:: : :last-of-page       
-:: The element is the last matched element on the page.
+<dt><dfn>:start-of-page</dfn></dt>     
+<dd>The element is the first matched element on the page, and neither it nor its ancestors have any previous siblings that appear on the page.</dd>
 
-:: : :start-of-page      
-:: The element is the first matched element on the page, and neither it nor its ancestors have any previous siblings that appear on the page.
+</dl>
 
 
 <div class="example">
@@ -165,7 +138,9 @@ h1::after {
 </pre>
 
 
-The value of the named string “headerP1” will be “Chapter 1”, and the value of the named string “headerP2” will be “Voyage of the <i>Beagle</i>”. headerP2 will include the italic tags around "Beagle", because the <content-type> defaults to 'contents', not 'text'. The value of the named string “headerP3” will be “.”. The top-center content will be “Chapter 1: The Voyage of the <i>Horizon</i>.”</div>
+The value of the named string “headerP1” will be “Chapter 1”, and the value of the named string “headerP2” will be “Voyage of the <i>Beagle</i>”. headerP2 will include the italic tags around "Beagle", because the <code>content-type</code> defaults to ''copy-into/contents'', not ''copy-into/text''. The value of the named string “headerP3” will be “.”. The top-center content will be “Chapter 1: The Voyage of the <i>Horizon</i>.”
+
+</div>
 
 <div class="example">
 HTML:
@@ -177,10 +152,10 @@ HTML:
 CSS:
 
 <pre>
-section { string-set: header attr(title) }
+section:first-of-page { copy-into: header attr(title) }
 </pre>
 
-The value of the “header” string will be “Loomings”.
+The value of the “header” string will be “Loomings”, assuming that section intersected with the page.
 </div>
 
 
@@ -194,39 +169,42 @@ CSS:
    margin: 1.5cm;
 
    @top-left {
-   content: "first: " string(heading, first); 
+   content: "first: " heading1; 
    }
    @top-center {
-   content: "start: " string(heading, start); 
+   content: "start: " heading2; 
    }
     @top-right {
-    content: "last: " string(heading, last); 
+    content: "last: " heading3; 
    }
   }
 
-h2 { string-set: heading content() }
+h2:first-of-page { copy-into: heading1 }
+h2:start-of-page { copy-into: heading2 }
+h2:last-of-page { copy-into: heading3 }
 </pre>
+
 The following figures show the first, start, and last assignments of the “heading” string on various pages.
+
 <figure>
-<img src="using-strings-1.jpg" width="480" alt=""/>
-<figcaption>The <a href="#string-start">start</a> value is empty, as the string had not yet been set at the start of the page.</figcaption>
+<img src="images/using-strings-1.jpg" width="480" alt=""/>
+<figcaption>The <code>start</code> value is empty, as the string had not yet been set at the start of the page.</figcaption>
 </figure>
+
 <figure>
-<img src="using-strings-2.jpg" width="480" alt=""/>
-<figcaption>Since the page starts with an h2, the <a href="#string-start">start</a> value is the value of that head.</figcaption>
+<img src="images/using-strings-2.jpg" width="480" alt=""/>
+<figcaption>Since the page starts with an h2, the <code>start</code> value is the value of that head.</figcaption>
 </figure>
+
 <figure>
-<img src="using-strings-3.jpg" width="480" alt=""/>
-<figcaption>Since there’s not an h2 at the top of this page, the <a href="#string-start">start</a> value is the ''exit value'' of the previous page.</figcaption>
+<img src="images/using-strings-3.jpg" width="480" alt=""/>
+<figcaption>Since there’s not an h2 at the top of this page, the <code>start</code> value is the exit value of the previous page.</figcaption>
 </figure>
 
 </div>
 
 
 
-
-
-
 <h2 id="page-area-head">Creating Page Areas</h2>
 
 
@@ -365,76 +343,6 @@ span.footnote {
 
 
 
-<!--<h2>Flow Properties from PGT (for reference)</h2>
-
-<p class="note">For convenience, here are definitions of the flow properties used by [[EPUB-PGT]].</p>
-
-<h3>flow-options</h3>
-<pre class="propdef">
-Name: <dfn id="flow-options-pgt">flow-options</dfn>
-Values: none | [ exclusive || last || static 
-Initial: none
-Applies To: elements for which 'flow-into' property was specified
-Inherited: no
-Media: visual
-Computed value: as specified
-</pre> 
-
- <dl>
-            <dt>exclusive</dt>
-            <dd>When content is selected for a partition, elements marked as exclusive are
-                considered first. Only one exclusive element is used for a single partition and one
-                element is always consumed (and removed from the flow if it is not also marked as
-                    <span class="val">static</span>).</dd>
-            <dt>static</dt>
-            <dd>When an element is consumed in a partition, it is removed from the flow, unless it
-                is marked as <span class="val">static</span>. Static elements are placed in the flow
-                again when they are consumed.</dd>
-            <dt>last</dt>
-            <dd>When this option is applied to elements which are also marked <span class="val"
-                    >exclusive</span>, the last of them is flowed in the next available
-                partition.</dd>
-        </dl>
-
-<h3>flow-linger</h3>
-
-The 'flow-linger' property determines how many pages an element is eligible for on a page. None means it stays eligible until consumed. <integer> must be positive and means number of pages. 1 means that it should be used on the same page it became eligible.
-
-<pre class="propdef">
-Name: <dfn id="flow-linger-pgt">flow-linger</dfn>
-Values: none | &lt;integer&gt;
-Initial: none
-Applies To: elements for which 'flow-into' property was specified
-Inherited: no
-Media: visual
-Computed value: as specified
-</pre> 
-
-
-
-<h3>flow-priority</h3>
-<pre class="propdef">
-Name: <dfn id="flow-priority-pgt">flow-priority</dfn>
-Values: &lt;integer&gt;
-Initial: 0
-Applies To: 
-Inherited: no
-Media: visual
-Computed value: as specified
-</pre> 
-
-<h3>flow-consume</h3>
-<pre class="propdef">
-Name: <dfn id="flow-consume-pgt">flow-consume</dfn>
-Values: some | all
-Initial: all for body flow; some for all other flows
-Applies To: 
-Inherited: no
-Media: visual
-Computed value: as specified
-</pre> 
-
--->