Generated. Do not edit!

Author: bert-github

css3-layout/Overview.html

@@ -5,7 +5,7 @@
   profile="http://microformats.org/profile/hcard http://microformats.org/wiki/rel-license">
   <title>CSS Grid Template Layout Module</title>
   <meta content="text/html; charset=utf-8" http-equiv=content-type>
-  <link href=default.css rel=stylesheet type="text/css">
+  <link href="../default.css" rel=stylesheet type="text/css">
 
   <style type="text/css">
   /* Just in case an incorrect max-width occurs in default.css */
@@ -36,13 +36,13 @@
    <h1>CSS Grid Template Layout Module</h1>
    <!--=================================================================-->
    <h2 class="no-num no-toc" id=longstatus-date-3-august-2004>Editor's Draft
-    1 May 2012</h2>
+    8 May 2012</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a
-     href="http://www.w3.org/TR/2012/ED-css3-layout-20120501/">http://www.w3.org/TR/2012/ED-css3-layout-20120501/</a>
+     href="http://www.w3.org/TR/2012/ED-css3-layout-20120508/">http://www.w3.org/TR/2012/ED-css3-layout-20120508/</a>
 
 
     <dt>Latest version:
@@ -273,7 +273,7 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
       </span>Floating elements inside templates</a>
     </ul>
 
-   <li><a href="#page-templates"><span class=secno>7. </span> Page-based grid
+   <li><a href="#page-templates"><span class=secno>7. </span>Page-based grid
     templates</a>
 
    <li><a href="#chains"><span class=secno>8. </span>Chaining slots: the
@@ -3062,6 +3062,30 @@ <h3 id=vertical-alignment><span class=secno>6.1. </span>Vertical alignment
    edge</dfn> and <dfn id=head-edge>head edge</dfn> of a box as a
    writing-mode-dependent edge as follows:
 
+  <div class=issue>
+   <p>Especially in paged material, it is very common for a column of text to
+    be not just aligned or centered, but vertically “justified” to align
+    at both top and bottom, by a combination of means: scaling an image (if
+    there is one available), changing the line height, changing the vertical
+    margins, etc. Probably the easiest to specify in CSS is an elastic
+    margin, e.g.:
+
+   <pre>margin-top: 1.2em + 1fill - 0.6em</pre>
+
+   <p>(Which could mean: preferred width is 1.2em, may be increased without
+    limit, may be decreased by no more than 0.6em.) To increase the padding
+    instead of the margin, the &lsquo;<code class=property>flex</code>&rsquo;
+    property from css3-flex might be useful:
+
+   <pre>flex: 1</pre>
+
+   <p>although that doesn't say at which side the padding is added and thus
+    requires another property to align the content inside the box. A more
+    direct way could be:
+
+   <pre>padding-top: 0.5em + 1fill</pre>
+  </div>
+
   <table class=equiv-table>
    <thead>
     <tr>
@@ -3370,10 +3394,10 @@ <h3 id=floating-elements-inside-templates><span class=secno>6.4.
    needs to be extended to apply to slots: &lsquo;<code class=css>@footnote
    :first::slot(a)</code>&rsquo; is the footnote area of slot a on the first
    page.
+   <!--=================================================================-->
 
   <div class=level4>
-   <!--=================================================================-->
-   <h2 id=page-templates><span class=secno>7. </span> Page-based grid
+   <h2 id=page-templates><span class=secno>7. </span>Page-based grid
     templates</h2>
 
    <p>A template can also be attached to a page, rather than an element. Such
@@ -3476,6 +3500,45 @@ <h2 id=page-templates><span class=secno>7. </span> Page-based grid
     that a UA has to print a page (force page breaks) even though some slots
     aren't filled yet.
 
+   <div class=example>
+    <p>This example shows a document with text in two languages, which are to
+     be shown side by side:
+
+    <pre>
+@page {grid: "a b"}
+:lang(en) {flow: a}
+:lang(fr) {flow: b}
+</pre>
+
+    <p>This works with a document where the languages are separated like
+     this:
+
+    <pre>
+&lt;BODY>
+ &lt;DIV LANG=en>
+  &lt;H1>The blue house&lt;/H1>
+  ...
+ &lt;/DIV>
+ &lt;DIV LANG=fr>
+  &lt;H1>La maison bleue&lt;/H1>
+  ...
+ &lt;/DIV>
+&lt;/BODY>
+</pre>
+
+    <p>But also with a document where the languages are interleaved:
+
+    <pre>
+&lt;BODY>
+ &lt;H1 LANG=en>
+ &lt;H1 LANG=fr>
+ &lt;P LANG=en>...
+ &lt;P LANG=fr>...
+ ...
+&lt;/BODY>
+</pre>
+   </div>
+
    <div class=example>
     <p>This example shows how the first page may have a different layout from
      the other pages. The slot &lsquo;<code class=css>a</code>&rsquo; only