expand issue text, add OM example

Author: astearns

css3-page-template/Overview.html

@@ -240,11 +240,11 @@
 
    <h1>CSS Pagination Templates Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 4 April 2012</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 5 April 2012</h2>
 
    <dl>
     <dt>This version:
-     <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-page-template-20120404/">http://www.w3.org/TR/2012/ED-css3-page-template-20120404/</a>-->
+     <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-page-template-20120405/">http://www.w3.org/TR/2012/ED-css3-page-template-20120405/</a>-->
 
 
     <dd><a
@@ -408,9 +408,9 @@ <h2 id=intro><span class=secno>1. </span>Introduction</h2>
   <p>Pagination templates consist of anonymous boxes called slots created by
    CSS to contain content. Layouts that use pagination templates mainly
    determine the size of these slots from the template definition instead of
-   the intrinsic size of their content. When content does not fit into a
-   template slot, additional pages are created with more slots to contain the
-   overflow content.
+   the size of their content. When content does not fit into a template slot,
+   additional pages are created with more slots to contain the overflow
+   content.
 
   <p>Multiple pagination templates can be defined for a given document. A
    paginated element can use a single template or select from a set of
@@ -453,12 +453,16 @@ <h2 id=templates-and-slots><span class=secno>2. </span>Pagination Templates
    slot containing the paginated element's contents.
 
   <div class=issue-marker>
-   <div class=issue-details>Do pagination templates get their size (and other
-    characteristics) from the element with the overflow-style property, or
-    does this have be set in the @template rule? Can templates use a default
-    100%/100% size based on the element's box?</div>
+   <div class=issue-details>Instead of a dependency on GCPM, this spec could
+    define what happens with a paginated view, without specifying how the
+    paginated view comes into existence. What happens when you apply
+    &lsquo;<code class=css>overflow-style:paged-x</code>&rsquo; to an iframe
+    or region?</div>
   </div>
 
+  <p>The box created from an @template rule defaults to the size of the
+   paginated element's box.
+
   <p>A slot is an anonymous box in a pagination template where content can be
    placed. In an @template rule @slot rules name and create slots. The order
    of @slot rules determines the order of the boxes in the pagination
@@ -527,26 +531,30 @@ <h2 id=templates-and-slots><span class=secno>2. </span>Pagination Templates
   </div>
 
   <div class=issue-marker>
-   <div class=issue-details>@slot rules are a first pass at defining
-    CSS-created boxes. Other means of creating and addressing pseudo-element
-    slots have been discussed on www-style. Another possibility is using HTML
-    like WebComponents does to define the boxes. However the boxes are
-    created there needs to be a way of assigning content to boxes and
-    accessing the template structure through scripting. If pseudo-elements
-    are used, then OM for pseudo-elements must be defined. If HTML templates
-    are used a declarative method of mapping content to elements must be
-    defined.</div>
+   <div class=issue-details>
+    <p>@slot rules are a first pass at defining CSS-created boxes. Other
+     means of creating and addressing pseudo-element slots have been
+     discussed on www-style. If @slot rules or pseudo-elements are used to
+     create template boxes, then OM for pseudo-elements must be defined
+     (scripting and events working with paginated content is a valid use
+     case).
+
+    <p>One argument against using pseudo-elements to create templates is that
+     this is defining structure in CSS. If nested slots are required, then
+     we're on a slippery slope towards re-inventing HTML inside of CSS.
+
+    <p>An alternative could use Shadow DOM to define the boxes. This gives us
+     structure and OM, but would need a declarative method of mapping content
+     to elements. One suggestion was to use @slot rules in a flat list for
+     the simple case, but start to rely on Shadow DOM for more complicated
+     cases. If this route is taken, then @slot rules probably aren't
+     required, as Shadow DOM can also handle the flat list case.
+   </div>
   </div>
 
   <p>Pagination templates can use declarations to determine the layout method
    for slots. @slot rules can use sizing and positioning declarations.
 
-  <div class=issue-marker>
-   <div class=issue-details>Is there a need to create more structure, nesting
-    slots within slots? If so, then slots can also have layout method
-    declarations?</div>
-  </div>
-
   <div class=example>
    <p>A pagination template could contain two side-by-side slots that
     paginate two separate articles. Side-by-side translations are often laid
@@ -642,6 +650,16 @@ <h2 id=conditional-templates><span class=secno>3. </span>Template Selection</h2>
    class=property>available-content</code>&rsquo; declarations, or just
    taking the first template found.
 
+  <div class=issue-marker>
+   <div class=issue-details>The following section describes selecting
+    templates with several mechanisms (selectors and declarations, and
+    presumably @template rules could be scoped by media queries). An
+    alternative could be to define all selection mechanisms like a media
+    query, where all of the selection mechanisms are outside the declaration
+    block. Attempting to define template rejection rather than selection
+    might also prove fruitful.</div>
+  </div>
+
   <div class=example>
    <p>In this example the divs are paginated using the first template found
     from the set of templates that apply to the div. The first div uses
@@ -663,23 +681,6 @@ <h2 id=conditional-templates><span class=secno>3. </span>Template Selection</h2>
     </pre>
   </div>
 
-  <div class="issue-marker wrapper">
-   <div class=issue-marker>
-    <div class=issue-details>Instead of specifying a template-set, should
-     there be a way of scoping @template rules to an element? The reason to
-     put them on the document is to re-use pagination templates with multiple
-     elements.</div>
-   </div>
-
-   <div class=issue-marker>
-    <div class=issue-details>One way of promoting re-use of pagination
-     templates would be to parameterize the named flow idents. Instead of
-     using named flow idents directly, @slot rules could use a parameter and
-     a paginated element using the template would pass in the particular
-     named flow ident meant for that parameter.</div>
-   </div>
-  </div>
-
   <h3 id=ordered-templates><span class=secno>3.1. </span>Selecting Templates
    by Page Order</h3>
 
@@ -693,8 +694,8 @@ <h3 id=ordered-templates><span class=secno>3.1. </span>Selecting Templates
   </div>
 
   <div class=issue-marker>
-   <div class=issue-details>Describe how @template rules with selectors
-    cascade.</div>
+   <div class=issue-details>Describe how @template rules cascade with names
+    and selectors (or how they do not cascade, if that's preferable).</div>
   </div>
 
   <div class=example>
@@ -809,8 +810,9 @@ <h3 id=selection-from-available-content><span class=secno>3.3.
    </span>Selecting Templates from Available Content</h3>
 
   <p>Pagination templates can be selected based on the order of content in
-   the original markup. Content may be split out into one or more named
-   flows, but the original order can be discovered in the markup.
+   the DOM tree. Content may be split out into one or more named flows, but
+   the original order can be discovered in the DOM and used for template
+   selection.
 
   <p>Pagination templates have a &lsquo;<code
    class=property>primary</code>&rsquo; content flow. The primary flow for a
@@ -821,9 +823,9 @@ <h3 id=selection-from-available-content><span class=secno>3.3.
 
   <p>When selecting the pagination template for the next page, the primary
    flow in the original markup can be scanned to determine whether any
-   out-of-flow content in named flows was originally related to the next page
-   of primary flow. If this is the case, then those named flows have
-   &lsquo;<code class=property>available</code>&rsquo; content for the
+   out-of-flow content in other named flows was originally related to the
+   next page of primary flow. If this is the case, then those named flows
+   have &lsquo;<code class=property>available</code>&rsquo; content for the
    purpose of selecting an appropriate template that can display this
    content.
 
@@ -839,7 +841,7 @@ <h3 id=selection-from-available-content><span class=secno>3.3.
    displayed in the slots associated with those flows.
 
   <div class=example>
-   <p>Clarification example
+   <p>Clarification example (not meant to be a valid use case)
 
    <p>Consider an article element that contains images scattered throughout.
     Assign the images to a flow named &lsquo;<code
@@ -856,17 +858,13 @@ <h3 id=selection-from-available-content><span class=secno>3.3.
     &lsquo;<code class=property>images</code>&rsquo; flow. Each time a page
     is laid out, the original article element is scanned to see whether an
     image element is in the next page's worth of content (determined by some
-    markup-scanning heuristic – not layout). If so, then that content from
-    the &lsquo;<code class=property>images</code>&rsquo; flow is available
-    for the purpose of selecting a template.
-  </div>
-
-  <div class=issue-marker>
-   <div class=issue-details>Expand this.</div>
+    DOM-tree-scanning heuristic – not layout). If so, then that content
+    from the &lsquo;<code class=property>images</code>&rsquo; flow is
+    available for the purpose of selecting a template.
   </div>
 
   <div class=example>
-   <p>Motivational example
+   <p>Motivational example (meant as a use case)
 
    <p>Assume you have an article that contains both pull quotes and images.
     If only images <em>or</em> pull quotes would occur on a page, position
@@ -889,6 +887,14 @@ <h2 id=cssom><span class=secno>4. </span>CSS Object Model</h2>
     page should be determinable. Lots to fill out here.</div>
   </div>
 
+  <div class=example>
+   <p>Motivational example
+
+   <p>Given the side-by-side paginated template for French and English, allow
+    the user to click and drag the French text from the right to the left to
+    switch sides for both flows.
+  </div>
+
   <h2 id=conformance><span class=secno>5. </span>Conformance</h2>
 
   <h2 class=no-num id=acknowledgments>Acknowledgments</h2>