- From: Bert Bos via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 28 Feb 2012 00:47:47 +0000
- To: public-css-commits@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
‘<code class=property>grid</code>’ 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: ‘<code class=property>flow</code>’</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
‘<code class=css>::slot()</code>’ 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]] – properties
- <dfn id=direction>direction</dfn> and <dfn
- id=writing-mode>writing-mode</dfn>
+ <li><cite>CSS text layout</cite> [[!CSS3-WRITING-MODE]] – 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> – 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 ‘<code class=css>calc()</code>’ 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 ‘<a href="#margin-left"><code
class=property>margin-left</code></a>’, ‘<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 @@
‘<code class=css>*</code>’, <var><fraction></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 ‘<code class=css>max-content</code>’ (or
@@ -1753,12 +1764,13 @@
contents of the column (i.e., the row heights are specified with only
<a href="#ltlengthgt"><var><length></var></a> values,
‘<code class=css>*</code>’, <var><fraction></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 ‘<code class=css>max-content</code>’ (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 ‘<a href="#vertical-align"><code
+ class=property>vertical-align</code></a>’ of ‘<code
+ class=css>baseline</code>’.
<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
+ ‘<a href="#vertical-align"><code
+ class=property>vertical-align</code></a>’ of ‘<code
+ class=css>baseline</code>’.
<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>’ 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:
‘<a href="#flow0"><code class=property>flow</code></a>’</h3>
<p>The ‘<a href="#flow0"><code class=property>flow</code></a>’
@@ -2618,7 +2638,7 @@
<dt><var><grid-line></var>
<dd> Equivalent to ‘<code class=css><var><grid-line></var> +
- 1</code>’.
+ 1</code>’ (i.e., a position and a span of 1).
<dt><var><identifier></var> - <var><identifier></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
- ‘<a href="#slot"><code class=css>::slot()</code></a>’
- pseudo-element</h2>
+ <h2 id=slot-pseudo><span class=secno>4. </span>Styling slots: the ‘<a
+ href="#slot"><code class=css>::slot()</code></a>’ pseudo-element</h2>
- <p>The slots of a <em>template element</em> can be individually addressed
- with the <dfn id=slot-pseudo-element.>‘<code
- class=css>slot()</code>’ 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.>‘<code
+ class=css>::slot()</code>’ pseudo-element.</dfn>
<div class=example>
<p>For example, the following sets the background and vertical alignment
@@ -2987,45 +3006,117 @@
<p>The ‘<a href="#vertical-align"><code
class=property>vertical-align</code></a>’ property of a ‘<a
href="#slot"><code class=css>::slot()</code></a>’ 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 ‘<a href="#writing-mode"><code
+ class=property>writing-mode</code></a>’
+
+ <th>Meaning of “head”
+
+ <th>Meaning of “tail”
+
+ <tbody>
+ <tr>
+ <th>‘<code class=css>horizontal-tb</code>’
+
+ <td>top
+
+ <td>bottom
+
+ <tr>
+ <th>‘<code class=css>vertical-rl</code>’
+
+ <td>right
+
+ <td>left
+
+ <tr>
+ <th>‘<code class=css>vertical-lr</code>’
+
+ <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 ‘<code class=css>vertical-align: baseline</code>’.
- 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 ‘<a
+ href="#writing-mode"><code
+ class=property>writing-mode</code></a>’ and the same ‘<a
+ href="#vertical-align"><code
+ class=property>vertical-align</code></a>’ 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 ‘<a
+ href="#writing-mode"><code
+ class=property>writing-mode</code></a>’ 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 ‘<code
+ class=css>vertical-align: baseline</code>’.
+
+ <dt><var><percentage></var>
+
+ <dd> ‘<code class=css>0%</code>’ means the same as ‘<a
+ href="#bottom"><code class=css>bottom</code></a>’, ‘<code
+ class=css>100%</code>’ means the same as ‘<a
+ href="#top"><code class=css>top</code></a>’, 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 ‘<code
+ class=css>baseline</code>’.
<!--=================================================================-->
<h3 id=paged><span class=secno>6.2. </span>Breaking grid elements across
@@ -4699,6 +4790,14 @@
references to ‘<code class=css>break-*</code>’ properties and
the new <a href="#CSS3-BREAK"
rel=biblioentry>[CSS3-BREAK]<!--{{CSS3-BREAK}}--></a> module.
+
+ <li>Now allows <var><percentage></var> on ‘<a
+ href="#vertical-align"><code
+ class=property>vertical-align</code></a>’.
+
+ <li>Generalized the text for ‘<a href="#vertical-align"><code
+ class=property>vertical-align</code></a>’ to apply to all writing
+ modes.
</ul>
<!--=================================================================-->
@@ -4950,6 +5049,12 @@
<!--begin-index-->
<ul class=indexlist>
+ <li>‘<code class=css> </code>
+ <ul>
+ <li>slot()’ 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>‘<a href="#slot"><code class=css>slot()</code></a>’
- pseudo-element., <a href="#slot-pseudo-element."
- title="''slot()'' pseudo-element."><strong>4.</strong></a>
-
<li><a href="#ltstringgt"><var><string></var></a>, <a
href="#ltstringgt" title="<string>"><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