Update to new terminology

Author: fantasai

css3-align/Overview.html

@@ -25,11 +25,11 @@
 
    <h1>CSS Box Alignment Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 24 May 2012</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 31 May 2012</h2>
 
    <dl><!--
   <dt>This version:
-    <dd><a href="http://www.w3.org/TR/2012/ED-css3-align-20120524/">http://www.w3.org/TR/2012/ED-css3-align-20120524/</a>
+    <dd><a href="http://www.w3.org/TR/2012/ED-css3-align-20120531/">http://www.w3.org/TR/2012/ED-css3-align-20120531/</a>
   <dt>Latest version:
     <dd><a href="http://www.w3.org/TR/css3-align/">http://www.w3.org/TR/css3-align/</a>
 -->
@@ -570,6 +570,9 @@ <h3 id=box-justify><span class=secno>3.1. </span> Inline/Main-Axis
    up by the float), not with respect to the containing block. (Note: This is
    the legacy behavior of HTML <code>align</code>.)
 
+  <p>For flex containers, if the "start" and "end" are not in the alignment
+   dimension, the "head" and "foot" sides are used instead.
+
   <p class=note>This property would replace ‘<code
    class=property>grid-column-align</code>’.
 
@@ -587,7 +590,7 @@ <h3 id=box-align><span class=secno>3.2. </span> Stacking/Cross-Axis
     <tr>
      <th><a href="#values">Value</a>:
 
-     <td>auto | [ baseline | before | after | center | stretch ] && true?
+     <td>auto | [ baseline | head | foot | center | stretch ] && true?
 
     <tr>
      <th>Initial:
@@ -639,8 +642,8 @@ <h3 id=box-align><span class=secno>3.2. </span> Stacking/Cross-Axis
    <dt><dfn id=auto0>‘<code class=css>auto</code>’</dfn>
 
    <dd>For flexbox items, computes to alignment specified by the ‘<code
-    class=property>child-align</code>’ property of the flexbox container.
-    For grid items, computes to ‘<a href="#stretch"><code
+    class=property>child-align</code>’ property of the flex container. For
+    grid items, computes to ‘<a href="#stretch"><code
     class=css>stretch</code></a>’.
 
    <dt><dfn id=baseline>‘<code class=css>baseline</code>’</dfn>
@@ -650,13 +653,13 @@ <h3 id=box-align><span class=secno>3.2. </span> Stacking/Cross-Axis
     href="#baseline0"><code class=css>baseline</code></a>’-aligned siblings
     in the same row/line.
 
-   <dt><dfn id=before>‘<code class=css>before</code>’</dfn>
+   <dt><dfn id=head>‘<code class=css>head</code>’</dfn>
 
-   <dd>Before-aligns the box within its containing block.
+   <dd>Head-aligns the box within its containing block.
 
-   <dt><dfn id=after>‘<code class=css>after</code>’</dfn>
+   <dt><dfn id=foot>‘<code class=css>foot</code>’</dfn>
 
-   <dd>After-aligns the box within its containing block.
+   <dd>Foot-aligns the box within its containing block.
 
    <dt><dfn id=center0>‘<code class=css>center</code>’</dfn>
 
@@ -669,13 +672,12 @@ <h3 id=box-align><span class=secno>3.2. </span> Stacking/Cross-Axis
    <dt><dfn id=true0>‘<code class=css>true</code>’</dfn>
 
    <dd>If specified, alignment is "true", and may cause the box to overflow
-    the before edge of the containing block. Otherwise, the box is forced to
-    before-align if its outer extent is longer than the containing block.
+    the head edge of the containing block. Otherwise, the box is forced to
+    head-align if its outer extent is longer than the containing block.
   </dl>
 
-  <p>For flex items "before" and "after" are interpreted relative to the flex
-   flow, not the writing mode. (Is this actually what we want? Even in the
-   overflow-correction case?)
+  <p>For flex items, if the "head" and "foot" are not in the alignment
+   dimension, the "start" and "end" sides are used instead.
 
   <p class=note>This replaces ‘<code
    class=property>flex-item-align</code>’.
@@ -717,7 +719,7 @@ <h3 id=box-justify><span class=secno>4.1. </span> Inline/Main-Axis
     <tr>
      <th>Applies to:
 
-     <td>block containers and flexbox containers
+     <td>block containers and flex containers
 
     <tr>
      <th>Inherited:
@@ -753,7 +755,7 @@ <h3 id=box-justify><span class=secno>4.1. </span> Inline/Main-Axis
 
   <p>Gives the default alignment of the box's content along the inline/row
    axis. For block containers, this simply changes the meaning of ‘<code
-   class=css>box-justify: auto</code>’ on its children. For flexbox
+   class=css>box-justify: auto</code>’ on its children. For flex
    containers, this aligns the contents of each flexbox line within its
    flexbox line box. See [[!CSS3FLEXBOX]] for exact details.
 
@@ -775,13 +777,13 @@ <h3 id=box-justify><span class=secno>4.1. </span> Inline/Main-Axis
 
    <dt><dfn id=left>‘<code class=css>left</code>’</dfn>
 
-   <dd>Aligns content to the line-left edge. On a flexbox container, this is
+   <dd>Aligns content to the line-left edge. On a flex container, this is
     treated as ‘<a href="#auto2"><code class=css>auto</code></a>’ if the
     line-left direction is in the wrong dimension.
 
    <dt><dfn id=right>‘<code class=css>right</code>’</dfn>
 
-   <dd>Aligns content to the line-right edge. On a flexbox container, this is
+   <dd>Aligns content to the line-right edge. On a flex container, this is
     treated as ‘<a href="#auto2"><code class=css>auto</code></a>’ if the
     line-right direction is in the wrong dimension.
 
@@ -812,8 +814,10 @@ <h3 id=box-justify><span class=secno>4.1. </span> Inline/Main-Axis
     applied) is wider than the containing block.
   </dl>
 
-  <p class=note>This property would replace ‘<code
-   class=property>flex-pack</code>’ and would, in conjunction with ‘<code
+  <p>For flex containers, if the "start" and "end" are not in the alignment
+   dimension, the "head" and "foot" sides are used instead.
+
+  <p class=note>This would, in conjunction with ‘<code
    class=property>text-align</code>’, implement the HTML <code>align</code>
    attribute and <code>&lt;center&gt;</code>. The weird behavior of ‘<a
    href="#auto2"><code class=css>auto</code></a>’ is for that and because
@@ -836,7 +840,7 @@ <h3 id=box-align><span class=secno>4.2. </span> Stacking/Cross-Axis
     <tr>
      <th><a href="#values">Value</a>:
 
-     <td>auto | [ before | after | baseline | center | space-between |
+     <td>auto | [ head | foot | baseline | center | space-between |
       space-around ] && true?
 
     <tr>
@@ -847,7 +851,7 @@ <h3 id=box-align><span class=secno>4.2. </span> Stacking/Cross-Axis
     <tr>
      <th>Applies to:
 
-     <td>block containers and flexbox containers
+     <td>block containers and flex containers
 
     <tr>
      <th>Inherited:
@@ -887,30 +891,29 @@ <h3 id=box-align><span class=secno>4.2. </span> Stacking/Cross-Axis
   <dl>
    <dt><dfn id=auto2>‘<code class=css>auto</code>’</dfn>
 
-   <dd>For block containers, equivalent to ‘<a href="#before0"><code
-    class=css>before</code></a>’, except that it does not cause the block
-    to establish a block formatting context. For table cells, defers
-    alignment to ‘<code class=property>vertical-align</code>’ as
-    specified in <a href="#CSS21"
-    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> chapter 17. For flexbox
-    containers, it causes any positive free space to be distributed equally
-    across the lines. <a href="#CSS3-FLEXBOX"
+   <dd>For block containers, equivalent to ‘<a href="#head0"><code
+    class=css>head</code></a>’, except that it does not cause the block to
+    establish a block formatting context. For table cells, defers alignment
+    to ‘<code class=property>vertical-align</code>’ as specified in <a
+    href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> chapter 17.
+    For flex containers, it causes any positive free space to be distributed
+    equally across the lines. <a href="#CSS3-FLEXBOX"
     rel=biblioentry>[CSS3-FLEXBOX]<!--{{!CSS3-FLEXBOX}}--></a>
 
-   <dt><dfn id=before0>‘<code class=css>before</code>’</dfn>
+   <dt><dfn id=head0>‘<code class=css>head</code>’</dfn>
 
-   <dd>Before-aligns the box's content within its content box: the content is
-    laid out beginning at the box's before content edge.
+   <dd>Head-aligns the box's content within its content box: the content is
+    laid out beginning at the box's head content edge.
 
    <dt><dfn id=center2>‘<code class=css>center</code>’</dfn>
 
    <dd>Centers the box's content within its content box: the content is
-    centered between the box's before and after content edges.
+    centered between the box's head and foot content edges.
 
-   <dt><dfn id=after0>‘<code class=css>after</code>’</dfn>
+   <dt><dfn id=foot0>‘<code class=css>foot</code>’</dfn>
 
-   <dd>After-aligns the box's content within its content box: the content is
-    laid out so that it finishes at the after content edge.
+   <dd>Foot-aligns the box's content within its content box: the content is
+    laid out so that it finishes at the foot content edge.
 
    <dt><dfn id=baseline0>‘<code class=css>baseline</code>’</dfn>
 
@@ -923,44 +926,43 @@ <h3 id=box-align><span class=secno>4.2. </span> Stacking/Cross-Axis
     rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> chapter 17 for details. If
     size constraints prevent the baselines from fully aligning, alignment is
     as close as possible. If the content's position is not fully determined
-    by baseline alignment, the content is before-aligned insofar as possible
+    by baseline alignment, the content is head-aligned insofar as possible
     while preserving the baseline alignment. (Content that has no first-line
-    baseline is thus also before-aligned.)
+    baseline is thus also head-aligned.)
 
    <dt><dfn id=space-between0>‘<code
     class=css>space-between</code>’</dfn>
 
-   <dd>For flexbox containers, distributes lines evenly by adjusting
-    inter-line spacing. If there is only one line (or if the element is
-    container of line boxes), this is equivalent to centering. UAs may also
-    apply ‘<a href="#space-between0"><code
-    class=css>space-between</code></a>’ to lines in a block container.
+   <dd>For flex containers, distributes lines evenly by adjusting inter-line
+    spacing. If there is only one line (or if the element is container of
+    line boxes), this is equivalent to centering. UAs may also apply ‘<a
+    href="#space-between0"><code class=css>space-between</code></a>’ to
+    lines in a block container.
 
    <dt><dfn id=space-around0>‘<code class=css>space-around</code>’</dfn>
 
-   <dd>For flexbox containers, distributes lines evenly by adjusting
-    inter-line spacing and applying half of that spacing between the
-    first/last child and the box edges. If there is only one line (or if the
-    element is not a container of line boxes), this is equivalent to
-    centering. UAs may also apply ‘<a href="#space-between0"><code
+   <dd>For flex containers, distributes lines evenly by adjusting inter-line
+    spacing and applying half of that spacing between the first/last child
+    and the box edges. If there is only one line (or if the element is not a
+    container of line boxes), this is equivalent to centering. UAs may also
+    apply ‘<a href="#space-between0"><code
     class=css>space-between</code></a>’ to lines in a block container.
 
    <dt><dfn id=true2>‘<code class=css>true</code>’</dfn>
 
    <dd>If specified, alignment is "true", and may cause the content to
-    overflow the before edge of the containing block. Otherwise, the content
-    is forced to before-align if is longer than the box's content area, and
-    will thus overflow only the after edge.
+    overflow the head edge of the containing block. Otherwise, the content is
+    forced to head-align if is longer than the box's content area, and will
+    thus overflow only the foot edge.
   </dl>
 
   <p>All values other than ‘<a href="#auto2"><code
    class=css>auto</code></a>’ cause a block box to establish a block
    formatting context such that its margins do not collapse with its children
    and floats do not intrude into its content box.
 
-  <p>For flexbox containers "before" and "after" are interpreted relative to
-   the flex flow, not the writing mode. <span class=issue>Is this actually
-   what we want? Even in the overflow-correction case?</span>
+  <p>For flex containers, if the "head" and "foot" are not in the alignment
+   dimension, the "start" and "end" sides are used instead.
 
   <p class=note>This would replace ‘<code
    class=property>flex-line-pack</code>’.
@@ -1060,7 +1062,7 @@ <h3 id=child-align><span class=secno>5.2. </span> Stacking/Cross-Axis
     <tr>
      <th><a href="#values">Value</a>:
 
-     <td>auto | [ before | after | center | baseline | stretch ] && true?
+     <td>auto | [ head | foot | center | baseline | stretch ] && true?
 
     <tr>
      <th>Initial:
@@ -1105,8 +1107,8 @@ <h3 id=child-align><span class=secno>5.2. </span> Stacking/Cross-Axis
   </table>
 
   <p>Sets the default ‘<a href="#align-self"><code
-   class=property>align-self</code></a>’ of the flexbox container's
-   children or the grid container's items. The ‘<a href="#auto2"><code
+   class=property>align-self</code></a>’ of the flex container's children
+   or the grid container's items. The ‘<a href="#auto2"><code
    class=css>auto</code></a>’ value computes to ‘<a href="#stretch"><code
    class=css>stretch</code></a>’ on flexbox and grid containers.
 
@@ -1370,10 +1372,6 @@ <h2 class=no-num id=index> Index</h2>
   <!--begin-index-->
 
   <ul class=indexlist>
-   <li>‘<a href="#after0"><code class=css>after</code></a>’, <a
-    href="#after" title="''after''"><strong>3.2.</strong></a>, <a
-    href="#after0" title="''after''"><strong>4.2.</strong></a>
-
    <li>align-content, <a href="#align-content"
     title=align-content><strong>4.2.</strong></a>
 
@@ -1396,10 +1394,6 @@ <h2 class=no-num id=index> Index</h2>
     href="#baseline" title="''baseline''"><strong>3.2.</strong></a>, <a
     href="#baseline0" title="''baseline''"><strong>4.2.</strong></a>
 
-   <li>‘<a href="#before0"><code class=css>before</code></a>’, <a
-    href="#before" title="''before''"><strong>3.2.</strong></a>, <a
-    href="#before0" title="''before''"><strong>4.2.</strong></a>
-
    <li>‘<a href="#center2"><code class=css>center</code></a>’, <a
     href="#center" title="''center''"><strong>3.1.</strong></a>, <a
     href="#center0" title="''center''"><strong>3.2.</strong></a>, <a
@@ -1410,6 +1404,14 @@ <h2 class=no-num id=index> Index</h2>
     title="''end''"><strong>3.1.</strong></a>, <a href="#end0"
     title="''end''"><strong>4.1.</strong></a>
 
+   <li>‘<a href="#foot0"><code class=css>foot</code></a>’, <a
+    href="#foot" title="''foot''"><strong>3.2.</strong></a>, <a href="#foot0"
+    title="''foot''"><strong>4.2.</strong></a>
+
+   <li>‘<a href="#head0"><code class=css>head</code></a>’, <a
+    href="#head" title="''head''"><strong>3.2.</strong></a>, <a href="#head0"
+    title="''head''"><strong>4.2.</strong></a>
+
    <li>justify-content, <a href="#justify-content"
     title=justify-content><strong>4.1.</strong></a>
 
@@ -1484,12 +1486,12 @@ <h2 class=no-num id=property-index> Property index</h2>
     <tr>
      <th><a class=property href="#align-content">align-content</a>
 
-     <td>auto | [ before | after | baseline | center | space-between |
+     <td>auto | [ head | foot | baseline | center | space-between |
       space-around ] && true?
 
      <td>auto
 
-     <td>block containers and flexbox containers
+     <td>block containers and flex containers
 
      <td>no
 
@@ -1500,7 +1502,7 @@ <h2 class=no-num id=property-index> Property index</h2>
     <tr>
      <th><a class=property href="#align-items">align-items</a>
 
-     <td>auto | [ before | after | center | baseline | stretch ] && true?
+     <td>auto | [ head | foot | center | baseline | stretch ] && true?
 
      <td>auto
 
@@ -1515,7 +1517,7 @@ <h2 class=no-num id=property-index> Property index</h2>
     <tr>
      <th><a class=property href="#align-self">align-self</a>
 
-     <td>auto | [ baseline | before | after | center | stretch ] && true?
+     <td>auto | [ baseline | head | foot | center | stretch ] && true?
 
      <td>auto
 
@@ -1535,7 +1537,7 @@ <h2 class=no-num id=property-index> Property index</h2>
 
      <td>auto
 
-     <td>block containers and flexbox containers
+     <td>block containers and flex containers
 
      <td>no