[css-align] Finish baseline alignment.

Author: tabatkins

css-align/Overview.bs

@@ -13,7 +13,7 @@ Previous Version: http://www.w3.org/TR/2013/WD-css3-align-20130514/
 Previous Version: http://www.w3.org/TR/2012/WD-css3-align-20120612/
 Abstract: This module contains the features of <a href="http://www.w3.org/TR/CSS/">CSS</a> relating to the alignment of boxes within their containers in the various CSS box layout models: block layout, table layout, flex layout, and grid layout. (The alignment of text and inline-level content is defined in [[CSS3TEXT]] and [[CSS3LINE]].)
 !Issue Tracking: <a href="http://www.w3.org/Style/CSS/Tracker/products/39">http://www.w3.org/Style/CSS/Tracker/products/39</a>
-Link Defaults: selectors-3 (dfn) first formatted line, css-flexbox-1 (dfn) flex line, css-multicol-1 (dfn) multi-column element, css-fonts-3 (dfn) first available font, css21 (property) max-width/max-height/min-width/min-height
+Link Defaults: selectors-3 (dfn) first formatted line, css-flexbox-1 (dfn) flex line, css-multicol-1 (dfn) multi-column element, css-fonts-3 (dfn) first available font, css21 (property) max-width/max-height/min-width/min-height, css-writing-modes-3 (dfn) dominant baseline
 Ignored Terms: table cell, stretch
 At Risk: ''last-baseline''
 </pre>
@@ -83,19 +83,21 @@ Values</h3>
 <h2 id="overview">
 Overview of Alignment Properties</h2>
 
-	The alignment properties in CSS can be described along two axes:
+	The <dfn>box alignment properties</dfn> in CSS are a set of 6 properties
+	that control alignment of boxes within other boxes.
+	They can be described along two axises:
 
 	<ul>
 		<li>which dimension they apply to (inline vs. stacking), and
 		<li>whether they control the position of the box within its parent, or the box's content within itself.
 	</ul>
 
-	Note: This proposal uses the terms “justify” and “align” to distinguish
+	Note: This specification uses the terms “justify” and “align” to distinguish
 	between alignment in the inline and stacking dimensions, respectively.
 	The choice is somewhat arbitrary, but having the two terms allows for
 	a consistent naming scheme that works across all of CSS's layout models.
 
-	The following table summarizes the proposed alignment properties
+	The following table summarizes the <a>box alignment properties</a>
 	and the display types they can apply to.
 
 	<table class=data>
@@ -108,7 +110,6 @@ Overview of Alignment Properties</h2>
 			<th>Axis
 			<th>Aligns
 			<th>Applies to
-	</thead>
 	<tbody>
 		<tr>
 			<th>'justify-content'
@@ -308,15 +309,15 @@ Baseline Alignment: the ''baseline'' and ''last-baseline'' keywords</h3>
 	these values trigger <a>baseline content-alignment</a>,
 	shifting the content of the box within the box,
 	and may also affect the sizing of the box itself.
-	See [#baseline-align-content].
+	See [[#baseline-align-content]].
 
 	When specified for 'align-self'/'justify-self',
 	these values trigger <a>baseline self-alignment</a>,
 	shifting the entire box within its container,
 	which may affect the sizing of its container.
-	See [#baseline-align-self].
+	See [[#baseline-align-self]].
 
-	If both <a>baseline content-alignment</a> <em>and</em> <a>baseline self-alignment</a> are specified in the same axis,
+	If both <a>baseline content-alignment</a> <em>and</em> <a>baseline self-alignment</a> are specified in the same axis on the same box,
 	only <a>baseline self-alignment</a> is honored in that axis;
 	the content-alignment in that axis must be treated as ''self-start''.
 
@@ -328,38 +329,6 @@ Baseline Alignment: the ''baseline'' and ''last-baseline'' keywords</h3>
 	Note: The 'vertical-align' property will also need a ''first-baseline'' value
 	because per CSS2.1 for inline blocks, ''baseline'' is equivalent to ''last-baseline''.
 
-	<hr>
-
-	A <dfn>baseline-sharing group</dfn>
-	is composed of boxes that participate in baseline alignment together.
-	This is possible only if they
-
-	<ul>
-		<li>share an <a>alignment context</a> whose axis is parallel to their <a>inline axis</a>
-		<li>either have the same <a>block flow direction</a> and <a>baseline alignment preference</a>,
-			or have opposite <a>block flow direction</a> and opposite <a>baseline alignment preference</a>
-			(in other words, the baselines that want to align are on the same side of the alignment context).
-	</ul>
-
-	Boxes <dfn title="shared alignment context|alignment context">share an alignment context</dfn> along a particular axis when they are:
-
-	<ul>
-		<li>table cells in the same row, along the table's row (inline) axis
-		<li>table cells in the same column, along the table's column (block) axis
-		<li>grid items in the same row, along the grid's row (inline) axis
-		<li>grid items in the same column, along the grid's colum (block) axis
-		<li>flex items in the same flex line, along the flex container's main axis
-	</ul>
-
-	Boxes in a <a>baseline-sharing group</a> are aligned to each other
-	using their <dfn>alignment baseline</dfn>.
-	This is the dominant baseline associated with
-	the box that generates their <a>shared alignment context</a>
-	on the first (last, for ''last-baseline'' alignment) <a title="first formatted line">formatted line</a>.
-	For example, in horizontal writing modes,
-	specifying ''align-content: baseline'' on table cells in the same row
-	will align the alphabetic baselines of their <a>first formatted lines</a>.
-
 
 <h3 id='distribution-values'>
 Distributed Alignment: the ''<content-distribution>/stretch'', ''space-between'', ''space-around'', and ''space-evenly'' keywords</h3>
@@ -585,6 +554,7 @@ Baseline Content-Alignment</h3>
 	its <a>alignment subject</a> is aligned to the start (end) edge of its <a>alignment container</a>
 	and the minimum necessary extra space is added between its start (end) edge and the <a>alignment subject</a>
 	to match its <a>alignment baseline</a> in that axis up to that of its <a>baseline-sharing group</a>.
+	See [[#align-by-baseline]].
 	This increases the intrinsic size of the box.
 
 <h3 id="overflow-scroll-position">
@@ -839,6 +809,7 @@ Baseline Self-Alignment</h3>
 	its <a>alignment subject</a> is aligned to the start (end) edge of its <a>alignment container</a>
 	and the minimum necessary extra space is added between its start (end) edge and the <a>alignment container</a>
 	to match its <a>alignment baseline</a> in that axis up to that of its <a>baseline-sharing group</a>.
+	See [[#align-by-baseline]].
 	This may increase the intrinsic size contribution of the <a>alignment subject</a>.
 
 <h2 id='default-alignment'>
@@ -928,6 +899,9 @@ Block/Cross-Axis Alignment: the 'align-items' property</h3>
 
 
 <h2 id='baseline-rules'>
+Baseline Alignment Details</h2>
+
+<h3 id='baseline-export'>
 Determining the Baseline of a Box</h2>
 
 	The <dfn export title="first baselines|baselines of a box">first baselines</dfn> (and <dfn export>last baselines</dfn>) of a box
@@ -1005,7 +979,8 @@ Determining the Baseline of a Box</h2>
 	</dl>
 
 	To <dfn local-title=generate|generated>generate baselines</dfn> for a box from a single baseline,
-	use the baseline table from the font settings and <a>first available font</a> of that box.
+	use the baseline table from the font settings and <a>first available font</a> of that box,
+	and align that baseline set to the given single baseline.
 
 	To <dfn local-title=synthesize|synthesized>synthesize baselines</dfn> from a rectangle (or two parallel lines),
 	synthesize the alphabetic baseline from the lower line
@@ -1017,13 +992,58 @@ Determining the Baseline of a Box</h2>
 		Maybe these things are wrong?
 		CSS 2.1 is really weird about baseline alignment.
 
-	<div class="issue">
-		We're still working on handling multiple baseline types (alphabetc, central, etc.)
-		and rows with multiple baseline-sharing groups (e.g. contains both first and last-aligned cells, or contains opposing writing modes).
-		Consider this section to be Under Construction.
-		<img src="http://dev.w3.org/csswg/construction.gif" style="display: block; margin: 1em auto;">
-	</div>
+<h3 id='baseline-terms'>
+Baseline Alignment Terminology</h3>
+
+	A <dfn>baseline-sharing group</dfn>
+	is composed of boxes that participate in baseline alignment together.
+	This is possible only if they
+
+	<ul>
+		<li>share an <a>alignment context</a> whose axis is parallel to their <a>inline axis</a>
+		<li>either have the same <a>block flow direction</a> and <a>baseline alignment preference</a>,
+			or have opposite <a>block flow direction</a> and opposite <a>baseline alignment preference</a>
+			(in other words, the baselines that want to align are on the same side of the alignment context).
+	</ul>
+
+	Boxes <dfn title="shared alignment context|alignment context">share an alignment context</dfn> along a particular axis when they are:
+
+	<ul>
+		<li>table cells in the same row, along the table's row (inline) axis
+		<li>table cells in the same column, along the table's column (block) axis
+		<li>grid items in the same row, along the grid's row (inline) axis
+		<li>grid items in the same column, along the grid's colum (block) axis
+		<li>flex items in the same flex line, along the flex container's main axis
+	</ul>
+
+	Boxes in a <a>baseline-sharing group</a> are aligned to each other
+	using their <dfn>alignment baseline</dfn>.
+	This is the dominant baseline associated with
+	the box that generates their <a>shared alignment context</a>
+	on the first (last, for ''last-baseline'' alignment) <a title="first formatted line">formatted line</a>.
+	For example, in horizontal writing modes,
+	specifying ''align-content: baseline'' on table cells in the same row
+	will align the alphabetic baselines of their <a>first formatted lines</a>.
+
+<h3 id='align-by-baseline'>
+Aligning Boxes by Baseline</h3>
+
+	Given a set of boxes and their baselines that all belong to a single <a>baseline-sharing group</a>,
+	the boxes are baseline-aligned as follows:
+
+	First, generate the alignment context's baseline table
+	from its <a>first available font</a>
+	and overlay also the mirror of this baseline table by aligning their central baselines.
+	These are the baseline grids to which the boxes will align.
+
+	Next, align all boxes by their specified <a>alignment baseline</a>
+	to the alignment context's baseline table
+	or its mirror, whichever matches its <a>line orientation</a>.
+	Unless otherwise specified (e.g. via the 'alignment-baseline' property),
+	the <a>alignment baseline</a> is the <a>dominant baseline</a> of the alignment context.
 
+	Position this <dfn>aligned subtree</dfn> within the alignment container
+	according to the rules of the <a>box alignment properties</a> in effect.
 
 <h2 id="changes">
 Changes</h2>