Generated. Do not edit!

Author: bert-github

css3-layout/Overview.html

@@ -11,7 +11,7 @@
    rel=dcterms.rights>
   <meta content="CSS Grid Template Layout Module" name=dcterms.title>
   <meta content=text name=dcterms.type>
-  <meta content=2013-03-12 name=dcterms.issued>
+  <meta content=2013-03-13 name=dcterms.issued>
   <meta content="Bert Bos" name=dcterms.creator>
   <meta content="César Acebal" name=dcterms.creator>
   <meta content=W3C name=dcterms.publisher>
@@ -38,13 +38,13 @@
    <h1>CSS Grid Template Layout Module</h1>
 
    <h2 class="no-num no-toc" id=longstatus-date-3-august-2004>Editor's Draft
-    12 March 2013</h2>
+    13 March 2013</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a
-     href="http://dev.w3.org/csswg/css3-layout/">http://www.w3.org/TR/2013/ED-css3-layout-20130312/</a>
+     href="http://dev.w3.org/csswg/css3-layout/">http://www.w3.org/TR/2013/ED-css3-layout-20130313/</a>
 
     <dt>Latest version:
 
@@ -463,6 +463,10 @@ <h3 id=summary-and-use-cases><span class=secno>1.1. </span>Summary and use
     <p>Complex pages with multiple regions, where the style of the text does
      not only depend on the type of element it comes from, but also on the
      region it is displayed in.
+
+   <li>Paged displays with complex running headers and footers, e.g., running
+    headers that are in between parts of the page content, rather than at the
+    edge of the page.
   </ul>
 
   <p>Once a grid template has been defined, it can also be used to position
@@ -799,13 +803,16 @@ <h3 id=summary-and-use-cases><span class=secno>1.1. </span>Summary and use
     differently from other H1s:
 
    <pre>
-::slot(*) {
-  font-weight: bold;
-  color: #0C3D5F;
-  font-size: larger }
-h1::slot(*) {
-  color: crimson;
-  display: run-in }
+@region ::slot(*)
+{
+  * {
+    font-weight: bold;
+    color: #0C3D5F;
+    font-size: larger }
+  h1 {
+    color: crimson;
+    display: run-in }
+}
 </pre>
 
    <p>(For brevity, the example doesn't show the style rules to set the color
@@ -840,7 +847,9 @@ <h3 id=summary-and-use-cases><span class=secno>1.1. </span>Summary and use
 
     <dt>[Method 3]
 
-    <dd class=issue>
+    <dd class=issue>[If ‘<a href="#vertical-align"><code
+     class=property>vertical-align</code></a>’ is generalized to apply to
+     all blocks, rather than only to table cells, margin boxes and slots:]
      <pre>P {height: 20em; vertical-align: bottom}</pre>
    </dl>
 
@@ -879,8 +888,9 @@ <h3 id=summary-and-use-cases><span class=secno>1.1. </span>Summary and use
     different than if they were on the same line.
 
    <p>With a grid template, we can say that the P has not one, but two flows,
-    a and b; and then we assign the fourth and subsequent SPANs to the
-    “b” flow. (The others automatically go into the default, first flow.)
+    a and b, the second one positioned below the first; and then we assign
+    the fourth and subsequent SPANs to the “b” flow. (The others
+    automatically go into the default, first flow.)
 
    <pre>
 p {grid: "a" "b"}
@@ -903,6 +913,40 @@ <h3 id=summary-and-use-cases><span class=secno>1.1. </span>Summary and use
     inside a grid element. For the moment, there is no such thing.
     Suggestions are welcome.
   </div>
+
+  <div class=example>
+   <p>This example uses a <a href="#page-based-template"><em>page-based
+    template</em></a> to create a running header that is not at the top of
+    the page, but exactly in the middle. We need to define our own page
+    template for this, because the predefined page template of <a
+    href="#CSS3PAGE" rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a> only
+    has margin boxes along the edge of the page.
+
+   <pre>
+@page {
+  grid:
+    "top-half"
+    "running-header" 3em
+    "bottom-half";
+  chains: top-half bottom-half
+}
+::slot(running-header) {
+  content: "My Magazine - page " counter(page) " - February 2013";
+  text-align: center;
+  vertical-align: middle;
+  border: solid;
+  margin: 1em 0;
+}
+</pre>
+
+   <div class=figure>
+    <p><img alt="Image: Example rendering" longdesc=page.desc src=page.png>
+
+    <p class=caption>An example of a page rendered with the above page
+     template. It has the “running header” with the page number right in
+     the middle of the page.
+   </div>
+  </div>
   <!--=================================================================-->
 
   <h3 id=dependencies><span class=secno>1.2. </span>Dependencies on other
@@ -998,7 +1042,7 @@ <h3 id=dependencies><span class=secno>1.2. </span>Dependencies on other
   </ul>
 
   <p class=issue>Add to the above all the properties that are allowed on
-   slots (see <a href="#slot-pseudo">“The ‘<code
+   slots (see <a href="#slot-pseudo">“Styling slots: the ‘<code
    class=css>::slot()</code>’ pseudo-element”</a>).
 
   <p>It has non-normative (informative) references to the following other
@@ -3150,19 +3194,15 @@ <h2 id=slot-pseudo><span class=secno>4. </span>Styling slots: the ‘<code
 
   <p>Margins on slots do not collapse, neither with other slots, nor with
    elements inside the slot.
-
-  <p class=issue>Margins aren't really necessary on slots. You can add
-   ‘<code class=css>.</code>’ cells in the grid template to make empty
-   space.
    <!--=================================================================-->
 
   <h2 id=content><span class=secno>5. </span>Slots and the ‘<a
    href="#content1"><code class=property>content</code></a>’ property</h2>
 
   <p>The ‘<a href="#content1"><code class=property>content</code></a>’
    property applies to slot pseudo elements in a similar way as it applies to
-   elements and other pseudo-elements. In particular, values have the
-   following meaning:
+   normal elements and other pseudo-elements. When applied to slots, values
+   have the following meaning:
 
   <dl>
    <dt><dfn id=normal>‘<code class=css>normal</code>’</dfn>
@@ -3187,12 +3227,7 @@ <h2 id=content><span class=secno>5. </span>Slots and the ‘<a
 
    <dd>Renders as the content that is flowed into the slot (with the ‘<a
     href="#flow0"><code class=property>flow</code></a>’ property, or
-    because the slot is the <a href="#default-slot.">default slot</a>). If
-    the keyword ‘<a href="#contents0"><code
-    class=css>contents</code></a>’ appears multiple times in the value of
-    ‘<a href="#content1"><code class=property>content</code></a>’, the
-    second and subsequent occurrences are ignored. (But those occurrences are
-    still part of the computed value.)
+    because the slot is the <a href="#default-slot.">default slot</a>).
   </dl>
 
   <p>Other values are as defined in <a href="#CSS3GENCON"
@@ -3202,11 +3237,20 @@ <h2 id=content><span class=secno>5. </span>Slots and the ‘<a
    example of the use of ‘<code class=css>string()</code>’ in the value
    of ‘<a href="#content1"><code class=property>content</code></a>’.
 
-  <p>Even if the value of ‘<a href="#content1"><code
-   class=property>content</code></a>’ does not include ‘<a
-   href="#contents0"><code class=css>contents</code></a>’ and the content
-   that is flowed into a slot is thus not rendered, any counters associated
-   with that content are incremented normally.
+  <p class=issue>[This should be moved to <a href="#CSS3GENCON"
+   rel=biblioentry>[CSS3GENCON]<!--{{!CSS3GENCON}}--></a>.] Even if the value
+   of ‘<a href="#content1"><code class=property>content</code></a>’ does
+   not include ‘<a href="#contents0"><code class=css>contents</code></a>’
+   and the content that is flowed into a slot is thus not rendered, any
+   counters associated with that content are incremented normally.
+
+  <p class=note>Note: as defined in <a href="#CSS3GENCON"
+   rel=biblioentry>[CSS3GENCON]<!--{{CSS3GENCON}}--></a>, the keyword ‘<a
+   href="#contents0"><code class=css>contents</code></a>’ may appear
+   multiple times in the value of ‘<a href="#content1"><code
+   class=property>content</code></a>’, but the second and subsequent
+   occurrences are ignored. (Those occurrences are still part of the computed
+   value.)
    <!--=================================================================-->
 
   <h2 id=region-based><span class=secno>6. </span>Styling the contents of
@@ -3470,24 +3514,14 @@ <h3 id=vertical-alignment><span class=secno>7.1. </span>Vertical alignment
     than the contents of slot a).
   </div>
 
-  <div class=note>
-   <p>Note that <a href="#CSS3BOX"
-    rel=biblioentry>[CSS3BOX]<!--{{CSS3BOX}}--></a> has a ‘<code
-    class=css>fill</code>’ value for margins, which can also be used to
-    align content in several cases, although not in the case that the slot
-    consists of text inserted by ‘<a href="#content1"><code
-    class=property>content</code></a>’ or of the content of the <a
-    href="#grid-element.">grid element</a> itself, because then there is no
-    element to set a margin on.
-
-   <p>Not also that, if there are one or more margins in the contents of the
-    slot with a ‘<code class=css>fill</code>’ value, the height of the
-    content fits the height of the slot and thus the ‘<a href="#top"><code
-    class=css>top</code></a>’, ‘<code class=css>middle</code>’ and
-    ‘<a href="#bottom"><code class=css>bottom</code></a>’ values are
-    indistinguishable.
-  </div>
-  <!--=================================================================-->
+  <p class=note>Note that, if there are one or more margins in the contents
+   of the slot with a ‘<code class=css>fill</code>’ value (see <a
+   href="#CSS3BOX" rel=biblioentry>[CSS3BOX]<!--{{CSS3BOX}}--></a>), the
+   height of the content fits the height of the slot and thus the ‘<a
+   href="#top"><code class=css>top</code></a>’, ‘<code
+   class=css>middle</code>’ and ‘<a href="#bottom"><code
+   class=css>bottom</code></a>’ values are indistinguishable.
+   <!--=================================================================-->
 
   <h3 id=paged><span class=secno>7.2. </span>Breaking grid elements across
    pages or columns</h3>
@@ -3986,12 +4020,33 @@ <h2 id=page-templates><span class=secno>8. </span>Page-based grid templates</h2>
    on p. " targetcounter(???, page)</code>’ or extend text-overflow from <a
    href="#CSS3TEXT" rel=biblioentry>[CSS3TEXT]<!--{{!CSS3TEXT}}--></a>?
 
-  <p class=issue>How do you set the ‘<a href="#vertical-align"><code
-   class=property>vertical-align</code></a>’ property of a slot in a page?
-   Does the ‘<code class=css>::slot()</code>’ pseudo-element apply?
-   ‘<code class=css>@page :first :slot(A) {vertical-align:
-   bottom}</code>’
-   <!--=================================================================-->
+  <div class=issue>
+   <p>How do you style the slots of page-based template? E.g., with
+
+   <pre>
+@page :first {
+  grid: "a b"
+        "c d" }
+@page {
+  grid: "a a a"
+        "b c d" }
+
+::slot(a) {background: silver}
+</pre>
+
+   <p>the background could be set on all “a” slots on all pages. But how
+    do you set a background only on the “a” slot of the <em>first</em>
+    page? Maybe we need to extend the page selectors and allow something like
+    this:
+
+   <pre>
+@page :first::slot(a) {background: silver}
+</pre>
+
+   <p>A space between the pseudo-class and the pseudo-element could be
+    optional.
+  </div>
+  <!--=================================================================-->
 
   <h2 id=chains><span class=secno>9. </span>Chaining slots: the ‘<a
    href="#chains0"><code class=property>chains</code></a>’ property</h2>
@@ -4711,11 +4766,6 @@ <h4 id=style-the-slots-pseudo-elements><span class=secno>10.2.12.
   <p>‘<code class=property>Wrap-flow</code>’ (from <a
    href="http://www.w3.org/TR/css3-exclusions/">CSS Exclusions and
    Shapes</a>) could be useful for slots with negative margins, too.
-
-  <p>‘<a href="#content1"><code class=property>Content</code></a>’ might
-   be useful, but is maybe too powerful: you could write a whole document,
-   with proper styling, in a style sheet and would only need an empty source
-   document.
    <!--=================================================================-->
 
   <h4 id=select-after-pseudo><span class=secno>10.2.13. </span>Style the