W3C home > Mailing lists > Public > public-css-commits@w3.org > February 2012

csswg/css3-layout new2.html,1.3,1.4

From: Bert Bos via cvs-syncmail <cvsmail@w3.org>
Date: Tue, 28 Feb 2012 00:47:47 +0000
To: public-css-commits@w3.org
Message-Id: <E1S2BER-000522-5k@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-layout
In directory hutz:/tmp/cvs-serv19328

Modified Files:
	new2.html 
Log Message:
Generated. Do not edit!

Index: new2.html
===================================================================
RCS file: /sources/public/csswg/css3-layout/new2.html,v
retrieving revision 1.3
retrieving revision 1.4
diff -u -d -r1.3 -r1.4
--- new2.html	27 Feb 2012 22:58:35 -0000	1.3
+++ new2.html	28 Feb 2012 00:47:35 -0000	1.4
@@ -50,13 +50,13 @@
    <h1>CSS Grid Template Layout Module</h1>
    <!--=================================================================-->
    <h2 class="no-num no-toc" id=longstatus-date-3-august-2004>Editor's Draft
-    27 February 2012</h2>
+    28 February 2012</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a
-     href="http://www.w3.org/TR/2012/ED-css3-layout-20120227/">http://www.w3.org/TR/2012/ED-css3-layout-20120227/</a>
+     href="http://www.w3.org/TR/2012/ED-css3-layout-20120228/">http://www.w3.org/TR/2012/ED-css3-layout-20120228/</a>
      
 
     <dt>Latest version:
@@ -241,16 +241,16 @@
      <li><a href="#grid-shorthand"><span class=secno>2.4. </span> The
       &lsquo;<code class=property>grid</code>&rsquo; shorthand property</a>
 
-     <li><a href="#default"><span class=secno>2.5. </span> Default slots</a>
+     <li><a href="#default"><span class=secno>2.5. </span>Default slots</a>
 
-     <li><a href="#slot-sizes"><span class=secno>2.6. </span> Calculating the
+     <li><a href="#slot-sizes"><span class=secno>2.6. </span>Calculating the
       size of the grid</a>
     </ul>
 
-   <li><a href="#positioning"><span class=secno>3. </span> Putting content
+   <li><a href="#positioning"><span class=secno>3. </span>Putting content
     into a grid element</a>
     <ul class=toc>
-     <li><a href="#flow"><span class=secno>3.1. </span> Flowing content into
+     <li><a href="#flow"><span class=secno>3.1. </span>Flowing content into
       slots: &lsquo;<code class=property>flow</code>&rsquo;</a>
 
      <li><a href="#absolute-positioning-using-a-grid-grid-p"><span
@@ -263,7 +263,7 @@
       property</a>
     </ul>
 
-   <li><a href="#slot-pseudo"><span class=secno>4. </span> Styling slots: the
+   <li><a href="#slot-pseudo"><span class=secno>4. </span>Styling slots: the
     &lsquo;<code class=css>::slot()</code>&rsquo; pseudo-element</a>
 
    <li><a href="#styling-the-contents-of-slots-fragment"><span class=secno>5.
@@ -868,9 +868,17 @@
     id=height>height</dfn>, <dfn id=float>float</dfn>, <dfn
     id=display0>display</dfn> and <dfn id=overflow>overflow</dfn>
 
-   <li><cite>CSS text layout</cite> [[!CSS3-WRITING-MODE]] &ndash; properties
-    <dfn id=direction>direction</dfn> and <dfn
-    id=writing-mode>writing-mode</dfn>
+   <li><cite>CSS text layout</cite> [[!CSS3-WRITING-MODE]] &ndash; defines
+    <dfn id=block-flow-direction>block flow direction</dfn> and the
+    properties <dfn id=direction>direction</dfn> and <dfn
+    id=writing-mode>writing-mode</dfn>. The latter defines when an element
+    has a <dfn id=vertical-writing-mode>vertical writing mode</dfn> (text
+    lines are vertical) or a <dfn id=horizontal-writing-mode>horizontal
+    writing mode</dfn> (text lines are horizontal). For brevity, we refer to
+    the former as a <dfn id=vertical-element
+    title="vertical|vertical element">vertical element</dfn> and to the
+    latter as a <dfn id=horizontal-element.
+    title="horizontal|horizontal element">horizontal element.</dfn>
 
    <li><cite>CSS positioning</cite> <a href="#CSS3POS"
     rel=biblioentry>[CSS3POS]<!--{{!CSS3POS}}--></a> &ndash; properties <dfn
@@ -1577,7 +1585,7 @@
   </div>
   <!--=================================================================-->
 
-  <h3 id=default><span class=secno>2.5. </span> Default slots</h3>
+  <h3 id=default><span class=secno>2.5. </span>Default slots</h3>
 
   <p>Every <a href="#grid-element.">grid element</a> has a <dfn
    id=default-slot.>default slot.</dfn> If there is an asterisk (“*”) in
@@ -1635,8 +1643,8 @@
   </div>
   <!--=================================================================-->
 
-  <h3 id=slot-sizes><span class=secno>2.6. </span> Calculating the size of
-   the grid</h3>
+  <h3 id=slot-sizes><span class=secno>2.6. </span>Calculating the size of the
+   grid</h3>
 
   <p>For the purpose of the calculations below, each slot (letter or “*”)
    in a grid has four dimensions associated with it, called <var>MINW</var>
@@ -1661,7 +1669,8 @@
       specified with &lsquo;<code class=css>calc()</code>&rsquo; as well, see
       [CSS3VALUES]].)</span>
 
-     <li>Otherwise, if the slot is <em>vertical,</em> then <var>MINW</var> is
+     <li>Otherwise, if the slot is <a
+      href="#vertical-element"><em>vertical,</em></a> then <var>MINW</var> is
       the <em>block dimension</em> of the slot, plus its horizontal padding,
       border and margin (i.e., any &lsquo;<a href="#margin-left"><code
       class=property>margin-left</code></a>&rsquo;, &lsquo;<a
@@ -1701,7 +1710,8 @@
       values, or any combination of those), then <var>PREFW</var> is
       infinite.
 
-     <li>Otherwise, if the slot is <em>vertical,</em> then <var>PREFW</var>
+     <li>Otherwise, if the slot is <a
+      href="#vertical-element"><em>vertical,</em></a> then <var>PREFW</var>
       is the <em>block dimension</em> of the slot, plus its horizontal
       padding, border and margin.
 
@@ -1728,9 +1738,10 @@
       &lsquo;<code class=css>*</code>&rsquo;, <var>&lt;fraction&gt;</var>
       values, or any combination of those), then <var>MINH</var> is 0.
 
-     <li>Otherwise, if the slot is <em>horizontal,</em> then <var>MINH</var>
-      is the <em>block dimension</em> of the slot, plus its vertical padding,
-      border and margin
+     <li>Otherwise, if the slot is <a
+      href="#horizontal-element."><em>horizontal,</em></a> then
+      <var>MINH</var> is the <em>block dimension</em> of the slot, plus its
+      vertical padding, border and margin
 
      <li>Otherwise, if the slot spans at least one row whose height is
       specified as &lsquo;<code class=css>max-content</code>&rsquo; (or
@@ -1753,12 +1764,13 @@
       contents of the column (i.e., the row heights are specified with only
       <a href="#ltlengthgt"><var>&lt;length&gt;</var></a> values,
       &lsquo;<code class=css>*</code>&rsquo;, <var>&lt;fraction&gt;</var>
-      values, or any combination of those), then <var>MINH</var> is infinite.
-      
+      values, or any combination of those), then <var>PREFH</var> is
+      infinite.
 
-     <li>Otherwise, if the slot is <em>horizontal,</em> then <var>PREFH</var>
-      is the <em>block dimension</em> of the slot, plus its vertical padding,
-      border and margin
+     <li>Otherwise, if the slot is <a
+      href="#horizontal-element."><em>horizontal,</em></a> then
+      <var>PREFH</var> is the <em>block dimension</em> of the slot, plus its
+      vertical padding, border and margin.
 
      <li>Otherwise, if the slot spans at least one row whose height is
       specified as &lsquo;<code class=css>max-content</code>&rsquo; (or
@@ -1879,7 +1891,11 @@
    <li>
     <p>Each row that contains slots that span only one row and no slots that
      span more than one row, must not be higher than the largest
-     <var>PREFH</var> of all slots in the row.
+     <var>PREFH</var> of all slots in the row plus the amount needed to
+     vertically align the <a href="#horizontal-element.">horizontal</a> slots
+     that have a &lsquo;<a href="#vertical-align"><code
+     class=property>vertical-align</code></a>&rsquo; of &lsquo;<code
+     class=css>baseline</code>&rsquo;.
 
     <div class=example>
      <p>For example, the second row in this grid
@@ -1897,7 +1913,11 @@
    <li>
     <p>Each column that contains slots that span only one column and no slots
      that span more than one column, must not be wider than the largest
-     <var>PREFW</var> of all slots in the column.
+     <var>PREFW</var> of all slots in the column plus the amount needed to
+     align the <a href="#vertical-element">vertical</a> slots that have a
+     &lsquo;<a href="#vertical-align"><code
+     class=property>vertical-align</code></a>&rsquo; of &lsquo;<code
+     class=css>baseline</code>&rsquo;.
 
     <div class=example>
      <p>For example, in this grid
@@ -2084,7 +2104,7 @@
    possible, third one taking up all remaining space.]
    <!--=================================================================-->
 
-  <h2 id=positioning><span class=secno>3. </span> Putting content into a grid
+  <h2 id=positioning><span class=secno>3. </span>Putting content into a grid
    element</h2>
 
   <p><em>This section until the next subsection is not normative.</em>
@@ -2103,7 +2123,7 @@
    class=property>z-index</code></a>&rsquo; property applies to them.
    <!--=================================================================-->
 
-  <h3 id=flow><span class=secno>3.1. </span> Flowing content into slots:
+  <h3 id=flow><span class=secno>3.1. </span>Flowing content into slots:
    &lsquo;<a href="#flow0"><code class=property>flow</code></a>&rsquo;</h3>
 
   <p>The &lsquo;<a href="#flow0"><code class=property>flow</code></a>&rsquo;
@@ -2618,7 +2638,7 @@
    <dt><var>&lt;grid-line&gt;</var>
 
    <dd> Equivalent to &lsquo;<code class=css><var>&lt;grid-line&gt;</var> +
-    1</code>&rsquo;.
+    1</code>&rsquo; (i.e., a position and a span of 1).
 
    <dt><var>&lt;identifier&gt;</var> - <var>&lt;identifier&gt;</var>
 
@@ -2690,7 +2710,7 @@
 </pre>
 
    <p>mean that any P spans the same rows as slot a and spans the same
-    columns as slot c. In this case, that means it coincides with slot b. All
+    columns as slot d. In this case, that means it coincides with slot b. All
     of the following are thus equivalent:
 
    <pre>
@@ -2866,13 +2886,12 @@
   </div>
   <!--=================================================================-->
 
-  <h2 id=slot-pseudo><span class=secno>4. </span> Styling slots: the
-   &lsquo;<a href="#slot"><code class=css>::slot()</code></a>&rsquo;
-   pseudo-element</h2>
+  <h2 id=slot-pseudo><span class=secno>4. </span>Styling slots: the &lsquo;<a
+   href="#slot"><code class=css>::slot()</code></a>&rsquo; pseudo-element</h2>
 
-  <p>The slots of a <em>template element</em> can be individually addressed
-   with the <dfn id=slot-pseudo-element.>&lsquo;<code
-   class=css>slot()</code>&rsquo; pseudo-element.</dfn>
+  <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.>&lsquo;<code
+   class=css>::slot()</code>&rsquo; pseudo-element.</dfn>
 
   <div class=example>
    <p>For example, the following sets the background and vertical alignment
@@ -2987,45 +3006,117 @@
   <p>The &lsquo;<a href="#vertical-align"><code
    class=property>vertical-align</code></a>&rsquo; property of a &lsquo;<a
    href="#slot"><code class=css>::slot()</code></a>&rsquo; pseudo-element can
-   be used to align elements vertically in a slot. The effect is as if the <a
-   href="#anonymous-block"><em title="anonymous block of a slot">hypothetical
-   anonymous block</em></a> that contains the slot's contents is positioned
-   as follows:
+   be used to align elements vertically in a slot (or horizontally, if the
+   slot is <a href="#vertical-element">vertical</a>). The effect is as if the
+   <a href="#anonymous-block"><em
+   title="anonymous block of a slot">hypothetical anonymous block</em></a>
+   that contains the slot's contents is positioned as defined below.
+
+  <p>For the purpose of this section we define the <dfn id=tail-edge>tail
+   edge</dfn> and <dfn id=head-edge>head edge</dfn> of a box as a
+   writing-mode-dependent edge as follows:
+
+  <table class=equiv-table>
+   <thead>
+    <tr>
+     <th>Value of &lsquo;<a href="#writing-mode"><code
+      class=property>writing-mode</code></a>&rsquo;
+
+     <th>Meaning of “head”
+
+     <th>Meaning of “tail”
+
+   <tbody>
+    <tr>
+     <th>&lsquo;<code class=css>horizontal-tb</code>&rsquo;
+
+     <td>top
+
+     <td>bottom
+
+    <tr>
+     <th>&lsquo;<code class=css>vertical-rl</code>&rsquo;
+
+     <td>right
+
+     <td>left
+
+    <tr>
+     <th>&lsquo;<code class=css>vertical-lr</code>&rsquo;
+
+     <td>left
+
+     <td>right
+  </table>
+
+  <p>E.g., if a box is <a href="#horizontal-element.">horizontal,</a> “head
+   edge” means the top edge.
 
   <dl>
    <dt>bottom
 
-   <dd> The content of the slot is aligned to the bottom of the slot: the
-    bottom margin edge of the anonymous block coincides with the bottom of
-    the slot.
+   <dd> The content of the slot is aligned to the <a href="#tail-edge">tail
+    edge</a> of the slot: the tail margin edge of the anonymous block
+    coincides with the tail margin edge of the slot.
 
    <dt>middle
 
-   <dd> The content of the slot is vertically centered in the slot: the
-    distance between the top margin edge of the anonymous block and the top
-    of the slot is equal to the distance between the bottom margin edge of
-    the anonymous block and the bottom of the slot. <span class=note>(Note
-    that if the content overflows the slot, it will overflow both at the top
-    and at the bottom.)</span>
+   <dd> The content of the slot is centered in the slot: the distance between
+    the <a href="#head-edge" title="head edge">head</a> margin edge of the
+    anonymous block and the <a href="#head-edge" title="head edge">head</a>
+    margin edge of the slot is equal to the distance between the <a
+    href="#tail-edge" title="tail edge">tail</a> margin edge of the anonymous
+    block and the <a href="#tail-edge" title="tail edge">tail</a> margin edge
+    of the slot. <span class=note>(Note that if the content overflows the
+    slot, it will overflow at both edges.)</span>
 
    <dt>baseline
 
-   <dd> The anonymous block that encloses the content is placed as high as
-    possible under two constraints:
+   <dd> The anonymous block that encloses the content is placed as far as
+    possible in the direction against the <a
+    href="#block-flow-direction"><em>block flow direction</em></a> under two
+    constraints:
     <ol>
-     <li>The top margin edge of the anonymous block may not be higher than
-      the top edge of the slot.
+     <li>The <a href="#head-edge" title="head edge">head</a> margin edge of
+      the anonymous block may not be beyond the <a href="#head-edge"
+      title="head edge">head</a> margin edge of the slot.
 
-     <li>The topmost baseline in the content may not be higher than the
-      topmost baseline of content in any other slot in the same row that also
-      has &lsquo;<code class=css>vertical-align: baseline</code>&rsquo;.
-      Baselines of content inside floats are not taken into account. Slots
-      that span several rows are considered to occur in their topmost row.
+     <li>If the content has a relevant first line (see below), then the
+      baseline of that line must align with the baselines of the relevant
+      first lines in all other slots with the same &lsquo;<a
+      href="#writing-mode"><code
+      class=property>writing-mode</code></a>&rsquo; and the same &lsquo;<a
+      href="#vertical-align"><code
+      class=property>vertical-align</code></a>&rsquo; in the same row (if the
+      slot is <a href="#horizontal-element.">horizontal</a>) or same column
+      (if the slot is <a href="#vertical-element">vertical</a>). A slot has a
+      relevant first line, if the content has a first line (ignoring any
+      lines inside floats) and that first line has the same &lsquo;<a
+      href="#writing-mode"><code
+      class=property>writing-mode</code></a>&rsquo; as the slot itself.
     </ol>
+
+    <p class=note>For example, for a <a
+     href="#horizontal-element.">horizontal</a> slot, this means that the
+     first baseline must be aligned with the first baselines of all other
+     horizontal slots in the row that also have &lsquo;<code
+     class=css>vertical-align: baseline</code>&rsquo;.
+
+   <dt><var>&lt;percentage&gt;</var>
+
+   <dd> &lsquo;<code class=css>0%</code>&rsquo; means the same as &lsquo;<a
+    href="#bottom"><code class=css>bottom</code></a>&rsquo;, &lsquo;<code
+    class=css>100%</code>&rsquo; means the same as &lsquo;<a
+    href="#top"><code class=css>top</code></a>&rsquo;, other values are
+    linear interpolations of these. Negative values and values over 100% are
+    interpreted as 0% and 100% respectively.
+    <p class=note>Note that 100% minus the percentage corresponds to the
+     initial position of the scrolling mechanism (if any) in case the content
+     overflows.
   </dl>
 
-  <p>For all other values, the content is top aligned: the top margin edge of
-   the anonymous box coincides with the top edge of the slot.
+  <p>For all other values, the content is aligned as for &lsquo;<code
+   class=css>baseline</code>&rsquo;.
    <!--=================================================================-->
 
   <h3 id=paged><span class=secno>6.2. </span>Breaking grid elements across
@@ -4699,6 +4790,14 @@
     references to &lsquo;<code class=css>break-*</code>&rsquo; properties and
     the new <a href="#CSS3-BREAK"
     rel=biblioentry>[CSS3-BREAK]<!--{{CSS3-BREAK}}--></a> module.
+
+   <li>Now allows <var>&lt;percentage&gt;</var> on &lsquo;<a
+    href="#vertical-align"><code
+    class=property>vertical-align</code></a>&rsquo;.
+
+   <li>Generalized the text for &lsquo;<a href="#vertical-align"><code
+    class=property>vertical-align</code></a>&rsquo; to apply to all writing
+    modes.
   </ul>
   <!--=================================================================-->
 
@@ -4950,6 +5049,12 @@
   <!--begin-index-->
 
   <ul class=indexlist>
+   <li>&lsquo;<code class=css> </code>
+    <ul>
+     <li>slot()&rsquo; pseudo-element., <a href="#slot-pseudo-element."
+      title="'', slot()'' pseudo-element."><strong>4.</strong></a>
+    </ul>
+
    <li>anonymous block of a slot, <a href="#anonymous-block"
     title="anonymous block of a slot"><strong>2.6.</strong></a>
 
@@ -4965,6 +5070,9 @@
    <li>block container, <a href="#block-container"
     title="block container"><strong>1.2.</strong></a>
 
+   <li>block flow direction, <a href="#block-flow-direction"
+    title="block flow direction"><strong>1.2.</strong></a>
+
    <li>bottom, <a href="#bottom" title=bottom><strong>1.2.</strong></a>
 
    <li>box-decoration-break, <a href="#box-decoration-break"
@@ -5046,8 +5154,20 @@
    <li>grid-template, <a href="#grid-template0"
     title=grid-template><strong>2.1.</strong></a>
 
+   <li>head edge, <a href="#head-edge"
+    title="head edge"><strong>6.1.</strong></a>
+
    <li>height, <a href="#height" title=height><strong>1.2.</strong></a>
 
+   <li>horizontal, <a href="#horizontal-element."
+    title=horizontal><strong>1.2.</strong></a>
+
+   <li>horizontal element, <a href="#horizontal-element."
+    title="horizontal element"><strong>1.2.</strong></a>
+
+   <li>horizontal writing mode, <a href="#horizontal-writing-mode"
+    title="horizontal writing mode"><strong>1.2.</strong></a>
+
    <li>implicit template, <a href="#implicit-template"
     title="implicit template"><strong>2.1.</strong></a>
 
@@ -5099,18 +5219,26 @@
 
    <li>slot, <a href="#slot" title=slot><strong>2.1.</strong></a>
 
-   <li>&lsquo;<a href="#slot"><code class=css>slot()</code></a>&rsquo;
-    pseudo-element., <a href="#slot-pseudo-element."
-    title="''slot()'' pseudo-element."><strong>4.</strong></a>
-
    <li><a href="#ltstringgt"><var>&lt;string&gt;</var></a>, <a
     href="#ltstringgt" title="&lt;string&gt;"><strong>1.2.</strong></a>
 
+   <li>tail edge, <a href="#tail-edge"
+    title="tail edge"><strong>6.1.</strong></a>
+
    <li>top, <a href="#top" title=top><strong>1.2.</strong></a>
 
+   <li>vertical, <a href="#vertical-element"
+    title=vertical><strong>1.2.</strong></a>
+
    <li>vertical-align, <a href="#vertical-align"
     title=vertical-align><strong>1.2.</strong></a>
 
+   <li>vertical element, <a href="#vertical-element"
+    title="vertical element"><strong>1.2.</strong></a>
+
+   <li>vertical writing mode, <a href="#vertical-writing-mode"
+    title="vertical writing mode"><strong>1.2.</strong></a>
+
    <li>width, <a href="#width" title=width><strong>1.2.</strong></a>
 
    <li>writing-mode, <a href="#writing-mode"
Received on Tuesday, 28 February 2012 00:47:57 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 20:44:50 UTC