Generalized vertical alignment to all writing modes.

Author: bert-github

css3-layout/new2.src.html

@@ -590,7 +590,14 @@ <h3 id=dependencies>Dependencies on other modules</h3>
 <dfn>display</dfn> and <dfn>overflow</dfn>
 
 <li><cite>CSS text layout</cite> [[!CSS3-WRITING-MODE]] &ndash;
-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]] &ndash; properties
 <dfn>z-index</dfn>, <dfn>position</dfn>, <dfn>top</dfn>,
@@ -1179,7 +1186,7 @@ <h3 id=grid-shorthand> The 'grid' shorthand property</h3>
 
 <!--=================================================================-->
 
-<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=default> Default slots</h3>
 
 <!--=================================================================-->
 
-<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 @@ <h3 id=slot-sizes> Calculating the size of the grid</h3>
 contents of the column (i.e., the row heights are specified with
 only <var>&lt;length&gt;</var> values,
 '*', <var>&lt;fraction&gt;</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 @@ <h3 id=slot-sizes> Calculating the size of the grid</h3>
 <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 @@ <h3 id=slot-sizes> Calculating the size of the grid</h3>
 <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 @@ <h3 id=slot-sizes> Calculating the size of the grid</h3>
 
 <!--=================================================================-->
 
-<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 @@ <h2 id=positioning> Putting content into a grid element</h2>
 
 <!--=================================================================-->
 
-<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 @@ <h3>Absolute positioning using a grid: 'grid-position-x' and
 
 <dt><var>&lt;grid-line&gt;</var>
 <dd>
-Equivalent to '<var>&lt;grid-line&gt;</var> + 1'.
+Equivalent to '<var>&lt;grid-line&gt;</var> + 1' (i.e., a position and
+a span of 1).
 
 <dt><var>&lt;identifier&gt;</var> - <var>&lt;identifier&gt;</var>
 <dd>
@@ -2166,7 +2178,7 @@ <h3>Absolute positioning using a grid: 'grid-position-x' and
 </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 @@ <h3 id=grid-position> The 'grid-position' shorthand property</h3>
 
 <!--=================================================================-->
 
-<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 @@ <h2>Rendering of grid elements</h2>
 <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 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>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>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>&lt;percentage&gt;</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 @@ <h2 id=changes>Changes</h2>
 <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>&lt;percentage&gt;</var> on 'vertical-align'.
+
+<li>Generalized the text for 'vertical-align' to apply to all writing
+modes.
 </ul>
 
 <!--=================================================================-->