- From: Bert Bos via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 28 Feb 2012 00:46:18 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-layout In directory hutz:/tmp/cvs-serv19217 Modified Files: new2.src.html Log Message: Generalized vertical alignment to all writing modes. Index: new2.src.html =================================================================== RCS file: /sources/public/csswg/css3-layout/new2.src.html,v retrieving revision 1.3 retrieving revision 1.4 diff -u -d -r1.3 -r1.4 --- new2.src.html 27 Feb 2012 22:58:04 -0000 1.3 +++ new2.src.html 28 Feb 2012 00:46:11 -0000 1.4 @@ -590,7 +590,14 @@ <dfn>display</dfn> and <dfn>overflow</dfn> <li><cite>CSS text layout</cite> [[!CSS3-WRITING-MODE]] – -properties <dfn>direction</dfn> and <dfn>writing-mode</dfn> +defines <dfn>block flow direction</dfn> and the +properties <dfn>direction</dfn> and <dfn>writing-mode</dfn>. The +latter defines when an element has a <dfn>vertical writing mode</dfn> +(text lines are vertical) or a <dfn>horizontal writing mode</dfn> +(text lines are horizontal). For brevity, we refer to the former as +a <dfn title="vertical|vertical element" >vertical element</dfn> and +to the latter as a <dfn title="horizontal|horizontal element" +>horizontal element.</dfn> <li><cite>CSS positioning</cite> [[!CSS3POS]] – properties <dfn>z-index</dfn>, <dfn>position</dfn>, <dfn>top</dfn>, @@ -1179,7 +1186,7 @@ <!--=================================================================--> -<h3 id=default> Default slots</h3> +<h3 id=default>Default slots</h3> <p>Every <span>grid element</span> has a <dfn>default slot.</dfn> If there is an asterisk (“*”) in the template, then that slot is the @@ -1230,7 +1237,7 @@ <!--=================================================================--> -<h3 id=slot-sizes> Calculating the size of the grid</h3> +<h3 id=slot-sizes>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, @@ -1328,11 +1335,11 @@ contents of the column (i.e., the row heights are specified with only <var><length></var> values, '*', <var><fraction></var> values, or any combination of those), -then <var>MINH</var> is infinite. +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 +plus its vertical padding, border and margin. <li>Otherwise, if the slot spans at least one row whose height is specified as ''max-content'' (or 'minmax()' with a first argument of @@ -1444,7 +1451,9 @@ <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. +largest <var>PREFH</var> of all slots in the row plus the amount +needed to vertically align the <span>horizontal</span> slots that have +a 'vertical-align' of ''baseline''. <div class=example> <p>For example, the second row in this grid @@ -1462,7 +1471,9 @@ <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. +largest <var>PREFW</var> of all slots in the column plus the amount +needed to align the <span>vertical</span> slots that have a +'vertical-align' of ''baseline''. <div class=example> <p>For example, in this grid @@ -1644,7 +1655,7 @@ <!--=================================================================--> -<h2 id=positioning> Putting content into a grid element</h2> +<h2 id=positioning>Putting content into a grid element</h2> <p><em>This section until the next subsection is not normative.</em> @@ -1662,7 +1673,7 @@ <!--=================================================================--> -<h3 id=flow> Flowing content into slots: 'flow'</h3> +<h3 id=flow>Flowing content into slots: 'flow'</h3> <p>The 'flow' property adds an element to a slot. @@ -2113,7 +2124,8 @@ <dt><var><grid-line></var> <dd> -Equivalent to '<var><grid-line></var> + 1'. +Equivalent to '<var><grid-line></var> + 1' (i.e., a position and +a span of 1). <dt><var><identifier></var> - <var><identifier></var> <dd> @@ -2166,7 +2178,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. +columns as slot d. In this case, that means it coincides with slot b. All of the following are thus equivalent: <pre> @@ -2319,10 +2331,10 @@ <!--=================================================================--> -<h2 id=slot-pseudo> Styling slots: the ''::slot()'' pseudo-element</h2> +<h2 id=slot-pseudo>Styling slots: the ''::slot()'' pseudo-element</h2> -<p>The slots of a <em>template element</em> can be individually -addressed with the <dfn>''slot()'' pseudo-element.</dfn> +<p>The slots of a <em>grid element</em> can be individually addressed +with the <dfn>''::slot()'' pseudo-element.</dfn> <div class=example> <p>For example, the following sets the background and vertical @@ -2419,45 +2431,84 @@ <h3 id=vertical-alignment>Vertical alignment of the contents of slots</h3> <p>The 'vertical-align' property of a '::slot()' pseudo-element can be -used to align elements vertically in a slot. The effect is as if the +used to align elements vertically in a slot (or horizontally, if the +slot is <span>vertical</span>). The effect is as if the <em title="anonymous block of a slot">hypothetical anonymous block</em> -that contains the slot's contents is positioned as follows: +that contains the slot's contents is positioned as defined below. + +<p>For the purpose of this section we define the <dfn>tail edge</dfn> +and <dfn>head edge</dfn> of a box as a writing-mode-dependent edge as +follows: + +<table class=equiv-table> +<thead> +<tr><th>Value of 'writing-mode' <th>Meaning of “head” <th>Meaning of “tail” +<tbody> +<tr><th>''horizontal-tb'' <td>top <td>bottom +<tr><th>''vertical-rl'' <td>right <td>left +<tr><th>''vertical-lr'' <td>left <td>right +</table> + +<p>E.g., if a box is <span>horizontal,</span> “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. +The content of the slot is aligned to the <span>tail edge</span> 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> +The content of the slot is centered in the slot: the distance between +the <span title="head edge">head</span> margin edge of the anonymous +block and the <span title="head edge">head</span> margin edge of the +slot is equal to the distance between the <span title="tail +edge">tail</span> margin edge of the anonymous block and +the <span title="tail edge">tail</span> 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: +The anonymous block that encloses the content is placed as far as +possible in the direction against the <em>block flow direction</em> +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 <span title="head edge">head</span> margin edge of the +anonymous block may not be beyond the <span title="head edge">head</span> +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 'vertical-align: baseline'. 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 'writing-mode' and the +same 'vertical-align' in the same row (if the slot +is <span>horizontal</span>) or same column (if the slot +is <span>vertical</span>). 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 'writing-mode' as the slot itself. </ol> + +<p class=note>For example, for a <span>horizontal</span> 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 +'vertical-align: baseline'. + +<dt><var><percentage></var> +<dd> +''0%'' means the same as ''bottom'', ''100%'' means the same as +''top'', 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 ''baseline''. <!--=================================================================--> @@ -3965,6 +4016,11 @@ <li>References to 'page-break-*' properties and to [[CSS3PAGE]] have been replaced with references to 'break-*' properties and the new [[CSS3-BREAK]] module. + +<li>Now allows <var><percentage></var> on 'vertical-align'. + +<li>Generalized the text for 'vertical-align' to apply to all writing +modes. </ul> <!--=================================================================-->
Received on Tuesday, 28 February 2012 00:46:21 UTC