Generated. Do not edit!

Author: bert-github

css-template/Overview.html

@@ -11,7 +11,7 @@
    rel=dcterms.rights>
   <meta content="CSS Template Layout Module" name=dcterms.title>
   <meta content=text name=dcterms.type>
-  <meta content=2015-03-20 name=dcterms.date>
+  <meta content=2015-03-24 name=dcterms.date>
   <meta content="Bert Bos" name=dcterms.creator>
   <meta content="César Acebal" name=dcterms.creator>
   <meta content=W3C name=dcterms.publisher>
@@ -41,7 +41,7 @@
 
    <h1 class=p-name>CSS Template Layout Module</h1>
 
-   <h2 class="no-num no-toc">Editor's Draft 20 March 2015</h2>
+   <h2 class="no-num no-toc">Editor's Draft 24 March 2015</h2>
 
    <dl>
     <dt>This version:
@@ -92,7 +92,7 @@ <h2 class="no-num no-toc">Editor's Draft 20 March 2015</h2>
     href="http://www.ercim.eu/"><abbr
     title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
     <a href="http://www.keio.ac.jp/">Keio</a>, <a
-    href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a
+    href="http://ev.buaa.edu.cn/">Beihang</a>). W3C <a
     href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
     <a
     href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
@@ -119,37 +119,27 @@ <h2 class="no-num no-toc" id=abstract>Abstract</h2>
    contains experimental ideas for <em>layout templates</em> and alternative
    layout models in CSS.
 
-  <p>At the moment, this module defines a <em>typographic grid</em> for CSS.
-   It has features to set up a grid-based template and to flow content into
-   it.
+  <p>At the moment, it defines a <em>typographic grid</em> for CSS. It has
+   features to set up a grid-based template, to style the <a
+   href="#slot"><em>slots</em></a> of the template and to flow content into
+   them.
 
-  <p>A grid template can be seen as a cross between table layout (aligning
-   &amp; sizing blocks of text automatically in a two-dimensional grid) and
-   absolute positioning (making visual order of content independent of source
-   document order), but it also has unique features of its own.
-
-  <p>The ‘<a href="#grid"><code class=property>grid</code></a>’ property
-   sets up a matrix of rows and columns and uses it to define areas that
-   accept content (called “slots”). The ‘<a href="#flow0"><code
-   class=property>flow</code></a>’ property then specifies into which slot
-   an element flows. The <a href="#slot-pseudo-element.">‘<code
-   class=css>::slot()</code>’ pseudo-element</a> allows to style the slots
-   (backgrounds, borders, etc.)
+  <p>A grid template can be seen as a cross between table layout (align
+   blocks of text automatically in two-dimensions) and absolute positioning
+   (position elements in arbitrary order), but it also has unique features of
+   its own.
 
   <p>Grid templates can also be associated with pages in paged media (via
    ‘<code class=css>@page</code>’), to create <em>page templates.</em>
 
-  <p>Slots can form “chains” to create non-rectangular regions. A chain
-   of slots is like a series of pages or columns: content is distributed over
-   the slots by breaking it at possible break points (see the ‘<code
-   class=css>break-*</code>’ properties from <a href="#ref-CSS3-BREAK"
-   rel=biblioentry>[CSS3-BREAK]<!--{{CSS3-BREAK}}--></a>).
-
-  <p>Templates can make use of the ‘<a href="#atregion"><code
-   class=css>@region</code></a>’ rule <a href="#ref-CSS-REGIONS-1"
-   rel=biblioentry>[CSS-REGIONS-1]<!--{{!CSS-REGIONS-1}}--></a> for selectors
-   to style the contents of slots (<a
-   href="#region-based-styling"><em>region-based styling</em></a>).
+  <p>Slots can form <a href="#chains0"><em>chains,</em></a> to create
+   non-rectangular regions. A chain of slots is like a series of small pages:
+   content is broken at possible page breaks and distributed over the slots.
+
+  <p><a href="#region-based-styling"><em>Region-based styling</em></a> allows
+   content to be styled not only based on its position in the document tree,
+   but also based on the slot it finds itself in. This is achieved by
+   allowing slot names to appear in selectors.
    <!--=================================================================-->
 
   <h2 class="no-num no-toc" id=status>Status of this document</h2>
@@ -1042,9 +1032,9 @@ <h3 id=dependencies><span class=secno>1.2. </span>Dependencies on other
 
    <li><cite>CSS values and Units module</cite> <a href="#ref-CSS3VAL"
     rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a> – <a
-    href="/TR/css3-values#strings"> <dfn
+    href="http://www.w3.org/TR/css3-values#strings"> <dfn
     id=ltstringgt><var>&lt;string&gt;</var></dfn></a> and <a
-    href="/TR/css3-values#length-value"> <dfn
+    href="http://www.w3.org/TR/css3-values#length-value"> <dfn
     id=ltlengthgt><var>&lt;length&gt;</var></dfn></a>.
 
    <li><cite>CSS box module</cite> <a href="#ref-CSS3BOX"
@@ -1590,8 +1580,8 @@ <h3 id=grid-column-sizes><span class=secno>3.2. </span>Specifying the
    <dt><var>&lt;fraction&gt;</var>
 
    <dd> (A non-negative number followed by ‘<code class=css>fr</code>’.)
-    A fraction of the remaining space, see <a
-    href="#fraction-values-fr">Fraction values</a> below.
+    A fraction of the remaining space. ‘<code class=css>1fr</code>’ means
+    the same as ‘<code class=css>*</code>’
 
    <dt>*
 
@@ -1733,8 +1723,8 @@ <h3 id=grid-template-row-sizes><span class=secno>3.3. </span>Specifying the
    <dt><var>&lt;fraction&gt;</var>
 
    <dd> (A non-negative number followed by ‘<code class=css>fr</code>’.)
-    A fraction of the remaining space, see <a
-    href="#fraction-values-fr">Fraction values</a> below.
+    A fraction of the remaining space. ‘<code class=css>1fr</code>’ means
+    the same as ‘<code class=css>*</code>’
 
    <dt>* (asterisk)
 
@@ -2118,10 +2108,9 @@ <h3 id=slot-sizes><span class=secno>3.7. </span>Calculating the size of the
       class=property>margin-left</code></a>’, ‘<a
       href="#margin-right"><code class=property>margin-right</code></a>’,
       ‘<code class=property>padding-left</code>’ etc., that is set on it
-      by means of the <a href="#slot-pseudo-element.">‘<code
-      class=css>::slot()</code>’ pseudo-element</a>). Any ‘<code
-      class=css>auto</code>’ margins are counted as 0 for this purpose.
-      <span class=note>(Note that <a
+      by means of the <span>‘<code class=css>::slot()</code>’
+      pseudo-element</span>). Any ‘<code class=css>auto</code>’ margins
+      are counted as 0 for this purpose. <span class=note>(Note that <a
       href="#ltlengthgt"><var>&lt;length&gt;</var></a> values can be
       specified with ‘<code class=css>calc()</code>’ as well, see
       [CSS3VALUES]].)</span>
@@ -2518,11 +2507,11 @@ <h3 id=slot-sizes><span class=secno>3.7. </span>Calculating the size of the
 
   <p>An extra step may be necessary in paged media if a page break occurs
    inside a template (only in the case of an <a
-   href="#element-based-template."><em>element-based template,</em></a> see
-   <a href="#element-based-page-break">below</a>). If the template, after
-   computing the width and height, is too big to fit on the current page, and
-   if a suitable break point exists, the part of the template after that
-   break point is put on the next page. The width of the <span class=index
+   href="#element-based-template."><em>element-based template</em></a> see <a
+   href="#page-break">below</a>). If the template, after computing the width
+   and height, is too big to fit on the current page, and if a suitable break
+   point exists, the part of the template after that break point is put on
+   the next page. The width of the <span class=index
    id=containing-block>containing block</span> on that page may be different
    if that page has different margins from the current page (see <a
    href="#ref-CSS3PAGE" rel=biblioentry>[CSS3PAGE]<!--{{!CSS3PAGE}}--></a>)
@@ -3055,9 +3044,9 @@ <h2 id=flow><span class=secno>4. </span>Flowing content into slots: ‘<a
    documentation by Andrew Fedoniouk and Ivan Goroun.</a> E.g., <code>&lt;ul
    style="grid: '2 1'">&lt;li>one &lt;li>two &lt;/ul></code> puts “two”
    on the left and “one” on the right. It is thus also a shortcut for
-   some applications of <a
-   href="http://www.w3.org/TR/css3-flexbox/#flex-order">‘<code
-   class=property>flex-order</code>’.</a>
+   some applications Flexbox's of <a
+   href="http://www.w3.org/TR/css3-flexbox/#order-property">‘<code
+   class=property>order</code>’ property.</a>
    <!--=================================================================-->
 
   <h2 id=absolute><span class=secno>5. </span>Comparison with ‘<code
@@ -3104,8 +3093,9 @@ <h3 id=slot-pseudo><span class=secno>6.1. </span>The ‘<code
    class=css>::slot()</code>’ pseudo-element</h3>
 
   <p>The slots of a <a href="#grid-element."><em>grid element</em></a> can be
-   individually addressed with the <dfn id=slot-pseudo-element.>‘<code
-   class=css>slot()</code>’ pseudo-element.</dfn>
+   individually addressed with the <dfn id=slot-pseudo-element.
+   title="slot!!pseudo-element">‘<code class=css>slot()</code>’
+   pseudo-element.</dfn>
 
   <div class=example>
    <p>For example, the following sets the background and vertical alignment
@@ -3241,15 +3231,15 @@ <h3 id=the-blank-pseudo-element><span class=secno>6.2. </span>The ‘<code
    ‘<code class=css>::slot(a):empty</code>’ and ‘<code
    class=css>:slot(a):blank' are invalid syntax… </code>
 
-  <p>The <dfn id=blank-pseudo-element>'blank()' pseudo-element</dfn> selects
-   named slots that have no content flowed into them. ’::slot(a)‘<code
-   class=css> and </code>’::blank(a)‘<code class=css> select the same
-   slot, but the latter matches only if the slot has no content flowed into
-   it. Whether </code>’::blank()‘<code class=css> matches is independent
-   of the slot's 'content' property. (In other words: a “blank” slot is
-   not necessarily empty and a slot that looks empty is not necessarily
-   “blank,” although that is usually the case, given the initial value of
-   'content'.) </code>
+  <p>The <dfn id=blank-pseudo-element title="blank!!pseudo-element">'blank()'
+   pseudo-element</dfn> selects named slots that have no content flowed into
+   them. ’::slot(a)‘<code class=css> and </code>’::blank(a)‘<code
+   class=css> select the same slot, but the latter matches only if the slot
+   has no content flowed into it. Whether </code>’::blank()‘<code
+   class=css> matches is independent of the slot's 'content' property. (In
+   other words: a “blank” slot is not necessarily empty and a slot that
+   looks empty is not necessarily “blank,” although that is usually the
+   case, given the initial value of 'content'.) </code>
 
   <div class=exmaple>
    <p>For example, slots a, b and c in the following document are blank, but
@@ -3429,7 +3419,7 @@ <h2 id=region-based><span class=secno>7. </span>Styling the contents of
   <p>In CSS level 2, pseudo-elements could only occur at the end of a
    selector. Thus an attempt to select ‘<code class=css>P::first-line
    EM</code>’ fails. That restriction does not apply to the <a class=index
-   href="#slot-pseudo-element." id="âslotâ-pseudo-element">‘<code
+   href="#slot-pseudo-element." id=s1 title="slot!!pseudo-element">‘<code
    class=css>::slot()</code>’ pseudo-element,</a> as shown in the example
    above.
 
@@ -3949,9 +3939,10 @@ <h2 id=page-templates><span class=secno>9. </span>Page-based grid templates</h2>
     property on slots.
   </div>
 
-  <p>The syntax of a page-based template is the same as that of an
-   element-based one, but the declaration appears in an ‘<code
-   class=css>@page</code>’ rule.
+  <p>The syntax of a page-based template is the same as that of an <a
+   href="#element-based-template."
+   title="element-based template">element-based one,</a> but the declaration
+   appears in an ‘<code class=css>@page</code>’ rule.
 
   <p>In a page-based template, the height and width are typically known
    (defined by the output media and the margin boxes, see <a
@@ -5570,13 +5561,10 @@ <h3 class=no-ref id=testing> Non-experimental implementations</h3>
   <h2 id=changes><span class=secno>13. </span>Changes</h2>
 
   <p>Summary of major changes since the <a
-   href="/TR/2011/WD-css3-layout-20111129/">29 November 2011 draft:</a>
+   href="http://www.w3.org/TR/2011/WD-css3-layout-20111129/">29 November
+   2011 draft:</a>
 
   <ul>
-   <li>Short rows in a template aren't automatically padded with ‘<code
-    class=css>.</code>’, but make the template illegal.
-    <!-- WG decision 11 Apr 2012 -->
-
    <li>Added a <a href="#accessibility">note about accessibility.</a>
 
    <li>Instead of directly on ‘<a href="#display0"><code
@@ -5646,9 +5634,8 @@ <h2 id=changes><span class=secno>13. </span>Changes</h2>
     class=property>vertical-align</code></a>’ to apply to all writing
     modes.
 
-   <li>Added the <a href="#blank-pseudo-element"><em>blank()
-    pseudo-element</em></a> to be able to select and style slots that, for
-    whatever reason, have nothing flowed into them.
+   <li>Added the <em>blank() pseudo-element</em> to be able to select and
+    style slots that, for whatever reason, have nothing flowed into them.
 
    <li>Added a placeholder section for a stack-of-cards layout model.
 
@@ -5663,29 +5650,28 @@ <h2 id=changes><span class=secno>13. </span>Changes</h2>
   <h2 class=no-num id=acknowledgments>Acknowledgments</h2>
 
   <p>The first ideas for describing a template in CSS date from 1996 and are
-   described in <a href="/TR/NOTE-layout"><cite>Frame-based layout via Style
-   Sheets</cite></a> by Bert Bos, Dave Raggett and HÃ¥kon Wium Lie. The idea
-   was revived in 2005 on the request of W3C's Device Independence Working
-   Group and benefited especially from discussions with Rhys Lewis and Rotan
-   Hanrahan from that group.
+   described in <a href="http://www.w3.org/TR/NOTE-layout"><cite>Frame-based
+   layout via Style Sheets</cite></a> by Bert Bos, Dave Raggett and Håkon
+   Wium Lie. The idea was revived in 2005 on the request of W3C's Device
+   Independence Working Group and benefited especially from discussions with
+   Rhys Lewis and Rotan Hanrahan from that group.
 
   <p>This specification was further influenced by ideas about form layout by
    <a
    href="https://lists.w3.org/Archives/Member/w3c-css-wg/2002JulSep/0077.html">
    Dave Raggett [member-only link]</a> and an early write-up of the features
-   of <a href="http://www.mozilla.org/projects/xul/xul.html"> XUL</a> by <a
+   of <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL">
+   XUL</a> by <a
    href="https://lists.w3.org/Archives/Member/w3c-css-wg/2002JanMar/0432.html">
    Ian Hickson [member-only link].</a>
 
-  <p><a href="http://transcendingcss.com/support/">Andy Clarke,</a> <a
+  <p><a href="http://stuffandnonsense.co.uk/about">Andy Clarke,</a> <a
    href="http://sushiandrobots.com/about">Jina Bolton</a> and <a
    href="http://lawver.net/">Kevin Lawver</a> provided use cases, examples
    and requirements. The analysis in the <a href="#history">History</a>
    section is a slightly shortened version of work by Steve Zilles.
 
-  <p>César Acebal built the first <a
-   href="http://transcendingcss.com/support/almcss.zip"> prototype,</a> see
-   <a href="#ref-ACEBAL2012"
+  <p>César Acebal built the first prototype, see <a href="#ref-ACEBAL2012"
    rel=biblioentry>[ACEBAL2012]<!--{{ACEBAL2012}}--></a>. Andrew Fedoniouk
    built <a
    href="http://lists.w3.org/Archives/Public/www-style/2009Mar/0278.html">the
@@ -6004,12 +5990,6 @@ <h2 class=no-num id=index>Index</h2>
   <!--begin-index-->
 
   <ul class=indexlist>
-   <li>‘<code class=css> </code>
-    <ul>
-     <li>slot()’ pseudo-element,, <a href="#âslotâ-pseudo-element"
-      title="section 7.">7.</a>
-    </ul>
-
    <li>A edge, <a href="#a-edge"
     title="section 8.1."><strong>8.1.</strong></a>
 
@@ -6028,8 +6008,11 @@ <h2 class=no-num id=index>Index</h2>
    <li>background-size, <a href="#background-size"
     title="section 1.2."><strong>1.2.</strong></a>
 
-   <li>'blank()' pseudo-element, <a href="#blank-pseudo-element"
-    title="section 6.2."><strong>6.2.</strong></a>
+   <li>blank
+    <ul>
+     <li>pseudo-element, <a href="#blank-pseudo-element"
+      title="section 6.2."><strong>6.2.</strong></a>
+    </ul>
 
    <li>block container,, <a href="#block-container"
     title="section 1.2."><strong>1.2.</strong></a>
@@ -6266,10 +6249,11 @@ <h2 class=no-num id=index>Index</h2>
     title="section 3.3."><strong>3.3.</strong></a>
 
    <li>slot, <a href="#slot" title="section 3.1."><strong>3.1.</strong></a>
-
-   <li>‘<code class=css>slot()</code>’ pseudo-element., <a
-    href="#slot-pseudo-element."
-    title="section 6.1."><strong>6.1.</strong></a>
+    <ul>
+     <li>pseudo-element, <a href="#s1" title="section 7.">7.</a>, <a
+      href="#slot-pseudo-element."
+      title="section 6.1."><strong>6.1.</strong></a>
+    </ul>
 
    <li>slots., <a href="#slots." title="section 7.">7.</a>