[css-inline-3] Rip apart and rewrite inline height calculation section.

Author: fantasai

css-inline-3/Overview.bs

@@ -197,21 +197,22 @@ Layout Within Line Boxes</h3>
 	user agents flow [=inline-level boxes=] into a stack of [=line boxes=].
 	Layout within the [=line box=] is performed as follows:
 
-	1. The [=logical height=] of each [=inline-level box=] in the [=line box=]
-		is calculated.
+	1. The [=layout bounds=] of each [=inline-level box=] in the [=line box=]
+		are calculated.
 
 		<ul class=switch>
 			<li>
 				For [=atomic inlines=] such as [=replaced elements=] and [=inline blocks=]:
-				this is their [=outer size=].
+				this is their [=margin box=].
 			<li>
 				For the [=root inline box=]
 				and for [=inline boxes=] with ''line-sizing: legacy'':
-				this is their used 'line-height'.
+				this derived from their used 'line-height',
+				see [[#inline-height]].
 
 			<li>
 				For other (non-root) [=inline boxes=] with ''line-sizing: normal'':
-				this is their [=outer size=].
+				this is their [=margin box=].
 
 				Issue(5178): Handle negative half-leading?
 		</ul>
@@ -221,8 +222,9 @@ Layout Within Line Boxes</h3>
 		Those with [=line-relative alignment values=]
 		are aligned so as to minimize the line box height.
 
-	3. The [=line box=]’s [=logical height=] is calculated as the distance between
-		the uppermost box top and the lowermost box bottom.
+	3. The [=line box=]’s [=logical height=] is calculated
+		to exactly include the aligned [=layout bounds=]
+		of all its [=inline-level boxes=].
 
 	4. The [=root inline box=]’s [=aligned subtree=]
 		and boxes with line-box&ndash;relative 'vertical-align' values
@@ -354,6 +356,34 @@ Baseline Types and Metrics</h3>
 	they must be synthesized,
 	see [[#baseline-tables]] and [[#baseline-synthesis]].
 
+<h4 id="ascent-descent">
+Ascent and Descent Metrics</h4>
+
+	CSS assumes that every font has font metrics
+	that specify a characteristic height above the baseline--
+	called the <dfn>ascent metric</dfn>--
+	and a characteristic depth below it--
+	called the <dfn>descent metric</dfn>--
+	which CSS uses for laying out text and boxes
+	in an [=inline formatting context=].
+	Note that these are metrics of the font as a whole
+	and need not correspond to the ascender and descender of any individual glyph.
+
+	Note: It is recommended that implementations that use OpenType or TrueType fonts
+	use the metrics <code>sTypoAscender</code> and <code>sTypoDescender</code>
+	from the font's OS/2 table
+	(after scaling to the current element's font size)
+	to find the [=ascent metric=] and [=descent metric=] for CSS layout.
+	In the absence of these metrics,
+	the "Ascent" and "Descent" metrics from the HHEA table should be used.
+
+	User Agents may use different sets of font metrics
+	when determining the [=ascent metric=] and [=descent metric=]
+	depending on whether the 'line-height' property is
+	''line-height/normal'' or some other value,
+	for instance taking external leading metrics into account
+	only in the ''line-height/normal'' case.
+
 <h3 id="baseline-tables">
 Baselines of Glyphs and Boxes</h3>
 
@@ -736,7 +766,7 @@ Line Spacing: the 'line-height' property</h3>
 		<dd>
 			Determine the [=preferred line height=]
 			automatically based on font metrics.
-			See [[#leading]].
+			See [[#inline-height]].
 
 		<dt><dfn><<length>></dfn>
 		<dd>
@@ -758,6 +788,10 @@ Line Spacing: the 'line-height' property</h3>
 			Negative values are illegal.
 	</dl>
 
+	Note: Glyphs from fonts other than the [=first available font=]
+	do not impact the [=layout bounds=] or [=baseline=] position
+	of an [=inline box=] with a non-''line-height/normal'' 'line-height'.
+
 	<div class="example">
 		The three rules in the example below have the same resultant line height:
 
@@ -782,75 +816,64 @@ Line Spacing: the 'line-height' property</h3>
 	See also <a href="https://github.com/w3c/csswg-drafts/issues/3118">Issue 3118</a>
 	and <a href="https://github.com/w3c/csswg-drafts/issues/2165">Issue 2165</a>.
 
-<h4 id="leading">Leading and half-leading</h4>
-
-	CSS assumes that every font has font metrics
-	that specify a characteristic height above the baseline and a depth below it.
-	In this section we use <var>A</var> to mean that height
-	(for a given font at a given size)
-	and <var>D</var> the depth.
-	We also define <var>AD</var> = <var>A</var> + <var>D</var>,
-	the distance from the top to the bottom.
-	(See the note below for <a href="#sTypoAscender">how to find <var>A</var> and <var>D</var> for TrueType and OpenType fonts.</a>)
-	Note that these are metrics of the font as a whole
-	and need not correspond to the ascender and descender of any individual glyph.
-
-	The User Agent must align the glyphs in a non-replaced [=inline box=]
+<h3 id="inline-height">
+Logical Height Contributions of Inline Boxes</h3>
+
+	The contribution of an [=inline box=] to the [=logical height=] of its [=line box=],
+	here referred to as its <dfn>layout bounds</dfn>,
+	is always calculated with respect to its text metrics,
+	as described below.
+	The sizes and positions of child boxes do not influence
+	its [=layout bounds=]
+	(or its own [=logical height=], for that matter,
+	see 'inline-sizing').
+
+	Note: The [=layout bounds=] need not correspond
+	to the box’s visible edges (see 'line-sizing').
+
+	These calculations use the metrics <var>A</var> and <var>D</var>,
+	where <var>A</var> refers to the [=ascent metric=]
+	(for the given font at its given size)
+	and <var>D</var> to the [=descent metric=],
+	each adjusted to account for the [=dominant baseline=]’s offset from zero.
+
+	To find the [=layout bounds=] of an [=inline box=],
+	the UA must first align
+	all the glyphs <em>directly</em> contained in the [=inline box=]
 	to each other by their [=dominant baselines=].
-	Then, for each glyph,
-	determine the <var>A</var> and <var>D</var>.
-	(Note that glyphs in a single element
-	can come from different fonts
-	and thus need not all have the same <var>A</var> and <var>D</var>.)
-	If the inline box contains no glyphs at all,
+	(See [[#baseline-tables]].)
+	If the [=inline box=] contains no glyphs at all,
 	or if it contains only glyphs from fallback fonts,
 	it is considered to contain a “strut” (an invisible glyph of zero width)
 	with the <var>A</var> and <var>D</var> of the box's [=first available font=].
 
-	<p id="inline-box-height">When the value of the 'line-height' property
-	is something other than ''line-height/normal'',
-	determine the leading <var>L</var> to add,
-	where <var>L</var> = 'line-height' - <var>AD</var> of the first available font.
-	Half the leading is added above <var>A</var> of the first available font,
+	When its computed 'line-height' is ''line-height/normal'',
+	the [=layout bounds=] of an inline box encloses all its glyphs,
+	going from the highest <var>A</var> to the deepest <var>D</var>.
+	(Note that glyphs in a single box
+	can come from different fonts
+	and thus might not all have the same <var>A</var> and <var>D</var>.)
+
+	When its computed 'line-height' is not ''line-height/normal'',
+	its [=layout bounds=] are derived solely from
+	metrics of its [=first available font=]
+	(ignoring glyphs from other fonts),
+	and <dfn>leading</dfn> is used
+	to adjust the effective <var>A</var> and <var>D</var>
+	to add up to the used 'line-height'.
+	Calculate the [=leading=] <var>L</var>
+	as <var>L</var> = 'line-height' - (<var>A</var> + <var>D</var>).
+	Half the [=leading=] is added above <var>A</var> of the first available font,
 	and the other half below <var>D</var> of the first available font,
-	giving a total height above the baseline of
+	giving an effective ascent above the baseline of
 	<var>A′</var> = <var>A</var> + <var>L</var>/2,
-	and a total depth of <var>D′</var> = <var>D</var> + <var>L</var>/2.
-	Glyphs from fonts other than the first available font
-	do not impact the height or baseline of the inline box
-	for 'line-height' values other than ''line-height/normal''.
+	and an effective descent of <var>D′</var> = <var>D</var> + <var>L</var>/2.
+	The [=layout bounds=] exactly encloses
+	this effective <var>A′</var> and <var>D′</var>.
 
 	Note: <var>L</var> may be negative.
 
-	Boxes of child elements do not influence this height.
-
-	When the value of the 'line-height' property is ''line-height/normal'',
-	the height of the inline box encloses all glyphs,
-	going from the highest <var>A</var> to the deepest <var>D</var>.
-
-	User Agents may use different sets of font metrics
-	when determining <var>A</var> and <var>D</var>
-	depending on whether the 'line-height' property is
-	''line-height/normal'' or some other value,
-	for instance taking external leading metrics into account
-	only in the ''line-height/normal'' case.
-
-
-	Note: CSS&nbsp;2 does not define what the content area of an inline box is
-	(see [[#line-fill]])
-	and thus different UAs may draw the backgrounds and borders in different places.
-
-	<p class=note id=sTypoAscender>Note: It is recommended that
-	implementations that use OpenType or TrueType fonts
-	use the metrics <code>sTypoAscender</code> and <code>sTypoDescender</code>
-	from the font's OS/2 table
-	(after scaling to the current element's font size)
-	to find <var>A</var> and <var>D</var>.
-	In the absence of these metrics,
-	the "Ascent" and "Descent" metrics from the HHEA table should be used.
-
-	Note: The ascent and descent metrics in the font data might need to be adjusted
-	to account for the [=dominant baseline=]’s offset from zero.
+	ISSUE: Integrate effects of ''line-sizing: normal'' and 'leading-trim'.
 
 <h3 id="line-sizing-property">
 Line Sizing Containment: the 'line-sizing' property</h3>
@@ -880,7 +903,7 @@ Line Sizing Containment: the 'line-sizing' property</h3>
 			The inline box contributes to the sizing of its line box
 			based on its 'line-height',
 			rather than based on its box edges,
-			as defined in [[!CSS2]].
+			as defined in [[#inline-height]].
 			In Quirks Mode [[!QUIRKS]],
 			any <a>inline box</a> <a lt="box fragment">fragment</a>
 			that has zero borders and padding and
@@ -1185,8 +1208,8 @@ Inline Box Heights: the 'inline-sizing' property</h3>
 		<dt><dfn>normal</dfn>
 		<dd>
 			The <a>content area</a> of the <a>inline box</a>
-			is sized and position to fit its (possibly hypothetical) text,
-			see below.
+			is sized and position to fit (possibly hypothetical) text
+			from its [=first available font=].
 
 		<dt><dfn>stretch</dfn>
 		<dd>