[css-inline-3] Tighten up initial letter layout. Dedup, reorganize, fix minor glitches, etc.

Author: fantasai

css-inline-3/Overview.bs

@@ -794,120 +794,6 @@ Applicability</h4>
 	whose 'float' is not ''float/none'' or 'position' is not ''static'',
 	because these values cause its 'display' to compute to ''display/block''.
 
-<h4 id="initial-letter-properties">
-Properties</h4>
-
-	All properties that apply to an <a>inline box</a>
-	also apply to an <a>initial letter</a> 
-	(unless it is an <a>atomic inline</a>,
-	in which case the set of properties that apply to an <a>atomic inline</a> apply)
-	except for 'vertical-align' and its <a>sub-properties</a>,
-	'font-size', and 'line-height'.
-	<!-- Basically, any properties defined in css-inline
-	except those specific to initial letters,
-	so keep this list updated as we add things to this spec. -->
-	Additionally, all of the <a>sizing properties</a>
-	and 'box-sizing' also apply to <a>initial letters</a>.
-
-<h4 id="initial-letter-model">
-Layout Model</h4>
-
-	An <a>initial letter</a> is laid out following the steps outlined below:
-
-	<ol>
-		<li>
-			Find the used font size based on its 'initial-letters' size,
-			'initial-letters-align' alignment points,
-			and font metrics.
-			Note that no layout is required in this step.
-			The font size used for sizing the <a>initial letter</a> contents
-			<em>does not</em> affect its computed 'font-size' property
-			(and therefore has no effect on the computation of ''em'' length values, etc.).
-
-		<li>
-			Size the <a>initial letter</a>’s content box.
-
-			If its <a>width</a>/<a>height</a> is definite,
-			use that value
-			(clamped as required by the <a>min size</a> and <a>max size</a> properties,
-			and handling 'box-sizing' as required)
-			for that dimension of the box.
-			In the case of a definite <a>inline size</a>,
-			'text-align' is honored
-			for aligning the contents of the <a>initial letter</a> within its box
-			in the <a>inline axis</a>
-			(using its <a>inline-axis</a> bearings as usual,
-			not the bounding box of its glyph outlines).
-			In the case of a definite <a>block size</a>,
-			'align-content' is honored
-			for aligning its contents in the <a>block axis</a>
-			(using its <a>block-axis</a> bearings,
-			synthesizing them if needed).
-
-			Otherwise
-			it is considered to have an <a>automatic size</a> in that dimension
-			and is sized and positioned to coincide with
-			the smallest rectangle that would include
-			the bounding boxes of all its glyphs--
-			excluding any that <a spec="css-text-3">hang</a>
-			(see 'hanging-punctuation')--
-			as well as the margin boxes of any atomic inlines it contains.
-
-			ISSUE: Should the hanging punctuation be included in the box instead
-			(so that the box is drawn around the punctuation when it is made visible through borders/background),
-			but rather only excluded when positioning the box
-			(so that the initial letter remains flush,
-			with the hanging punctuation properly hanging)?
-			See <a href="https://github.com/w3c/csswg-drafts/issues/310">discussion</a>.
-
-		<li>
-			In the <a>inline axis</a>,
-			the initial letter's margin box is placed at the start edge of the line.
-			If it is a non-atomic inline
-			with an <a lt="automatic size">automatic</a> <a>inline size</a>
-			and has no padding or borders,
-			it is negatively offset
-			by the distance from the start edge of its content box
-			to the point in the content that would have been placed
-			at the start edge of the containing block
-			if it had ''initial-letters: none''.
-
-			In the <a>block axis</a>,
-			the initial letter is anchored to the dominant baseline
-			of the <a>first formatted line</a>,
-			positioned with respect to that baseline
-			such that it would sink the number of lines
-			specified by 'initial-letters'’s second argument
-			if its containing block held only
-			the <a>initial letter</a> itself
-			followed by an infinite sequence of plain text
-			as the direct contents of its <a>root inline box</a>.
-			
-			<figure>
-				<img src="images/infinite-text.png" width="300"
-		     alt="text underlay shows how initial letter alignment is not affected
-		     by the content of the spanned lines">
-			</figure>
-
-		<li>
-			Exclude content within the inline letter's margin box
-			according to 'initial-letters-wrap'.
-	</ol>
-
-<h4 id="initial-letter-box">
-Content-box Size, Margins, Borders, and Padding</h4>
-
-	Initial letters can be styled with margins, padding, and borders
-	just like any other box.
-	Unless 'initial-letters-align' is ''initial-letters-align/border-box'',
-	its vertical alignment and sizing are not affected;
-	however the effective exclusion area is
-	(and corresponds to the margin area).
-
-	When padding and borders are zero,
-	the initial letter may be kerned;
-	see below.
-
 <h3 id="aligning-initial-letter">
 Alignment of Initial Letters: the 'initial-letters-align' property</h3>
 
@@ -1048,11 +934,96 @@ UA Default Stylesheet for 'initial-letters-align'</h4>
 	Issue: This only covers the most common cross-linguistic transcription systems.
 	Should we include any other / all script tags in the UA style sheet?
 
+<h3 id="initial-letter-layout">
+Initial Letter Layout</h3>
+
+	There are two types of <a>initial letter boxes</a>:
+	those that arise from non-replaced <a>inline boxes</a>
+	and those that arise from <a>atomic inlines</a>.
+
+	For the non-atomic <dfn lt="inline initial letter | inline initial letter box">inline initial letter</dfn>,
+	the box and its contents
+	participate in the same <a>inline formatting context</a>
+	as the line on which it occurs,
+	and a lot of special rules apply
+	to give the expected sizing and alignment.
+
+	For an <dfn lt="atomic initial letter | atomic initial letter box">atomic initial letter</dfn>,
+	however,
+	which is either a <a>replaced element</a>
+	or which establishes an <a>independent formatting context</a> for its contents,
+	the sizing of the box
+	and layout of the contents within the box
+	follows the usual rules:
+	it is primarily the positioning of the box
+	which is special.
+
+<h4 id="initial-letter-properties">
+Properties Applying to Initial Letters</h4>
+
+	All properties that apply to an <a>inline box</a>
+	also apply to an <a>inline initial letter</a>
+	except for 'vertical-align' and its <a>sub-properties</a>,
+	'font-size', 'line-height', 'line-sizing', and 'inline-sizing'.
+	<!-- Basically, any properties defined in css-inline
+	except those specific to initial letters,
+	so keep this list updated as we add things to this spec. -->
+	Additionally, all of the <a>sizing properties</a>
+	and 'box-sizing' also apply to <a>initial letters</a>,
+	(see [[!css-sizing-3]]).
+
+	All properties that apply to an <a>atomic inline</a>
+	also apply to the <a>atomic inline</a> when styled as an <a>initial letter</a>,
+	except for 'vertical-align' and its <a>sub-properties</a>.
+
+<h4 id="initial-letter-box">
+Margins, Borders, and Padding</h4>
+
+	Initial letters can be styled with margins, padding, and borders
+	just like any other box.
+	Unless 'initial-letters-align' is ''initial-letters-align/border-box'',
+	its vertical alignment and sizing are not affected;
+	however the effective exclusion area is
+	(and corresponds to the margin area).
+
+	ISSUE: Reword that to handle 'box-sizing' correctly.
+
+	When padding and borders are zero,
+	the initial letter may be kerned;
+	see below.
+
 <h3 id="sizing-initial-letters">
-Sizing Initial Letters</h3>
+Font Sizing of Initial Letters</h3>
+
+	For an <a>inline initial letter</a>,
+	the font size used for sizing the <a>initial letter</a> contents
+	is calculated to fulfill its specified <a>size</a> (see 'initial-letters')
+	as anchored by its specified alignment points (see 'initial-letters-align').
+	Note that no layout is required in this calculation:
+	it is based only on computed values and font metrics.
+	These <a lt="used value">used</a> font size calculations
+	<em>do not</em> affect the <a lt="computed value">computed</a> 'font-size',
+	and therefore have no effect on the computation of ''em'' length values, etc.
+
+	ISSUE: What about inheritance to descendants?
+
+	For an <a>atomic initial letter</a>,
+	the used font size is the computed font size as usual.
+
+	The line height used in these calculations
+	is the 'line-height' of the containing block
+	(or, in the case where a baseline grid is in use,
+	the baseline-to-baseline spacing required by the baseline grid [[CSS-LINE-GRID-1]]).
+	The contents of the lines spanned,
+	and therefore any variation in their heights and positions,
+	is not accounted for.
+
+	<figure>
+		<img src="images/infinite-text.png" width="300"
+     alt="text underlay shows how initial letter alignment is not affected
+     by the content of the spanned lines">
+	</figure>
 
-	The size of a drop initial is determined
-	by the need to satisfy the required alignment.
 	For an <var>N</var>-line drop initial in a Western script,
 	the cap-height of the letter needs to be (<var>N</var> – 1) times the line-height,
 	plus the cap-height of the surrounding text.
@@ -1073,26 +1044,21 @@ Sizing Initial Letters</h3>
 	</div>
 	-->
 
+	ISSUE: Update this calculation to be a) generic across writing systems / alignment points and b) handle non-integer sizes.
+
 	<div class="example">
 		A three-line drop initial in Adobe Minion Pro
 		would have a font size of 61.2pt given
 		12pt text, 16pt line-height, and a cap-height of 651/1000 (from the font’s OS/2 table).
 	</div>
 
-	The line height used in this calculation
-	is the 'line-height' of the containing block
-	(or, in the case where a baseline grid is in use,
-	the baseline-to-baseline spacing required by the baseline grid [[CSS-LINE-GRID-1]]).
-	The contents of the lines spanned,
-	and therefore any variation in their heights and positions,
-	is not accounted for.
-
 <h4 id="initial-letter-shaping">
 Shaping and Glyph Selection</h4>
 
 	When 'initial-letters' is not ''initial-letters/normal'',
-	shaping <em>should</em> still occur across the box's boundaries,
-	see [[css-text-3#boundary-shaping]].
+	shaping <em>should</em> still occur across
+	an <a>inline initial letter box</a>'s boundaries.
+	(See [[css-text-3#boundary-shaping]].)
 	For example, if the first letter of the Farsi word “پس”
 	were styled with ''initial-letters: 2 1'',
 	both letters would be styled in their joined forms,
@@ -1102,9 +1068,64 @@ Shaping and Glyph Selection</h4>
 	even when shaped in their joining forms.
 
 	Issue: Are there other things we need to consider here?
-	
-<h3 id="initial-letter-exclusions">
-Space Around Initial Letters</h3>
+
+<h3 id="initial-letter-box-size">
+Sizing the Initial Letter Box</h3>
+
+	If the <a>initial letter</a>’s <a>specified width</a>/<a>specified height</a>
+	is <a>definite</a>,
+	use that value
+	(clamped as required by the <a>min size</a> and <a>max size</a> properties,
+	and handling 'box-sizing' as required)
+	for that dimension of the box.
+
+	Otherwise
+	it is considered to have an <a>automatic size</a> in that dimension
+	and is sized and positioned to coincide with
+	the smallest rectangle that would include
+	the bounding boxes of all its glyphs--
+	excluding any that <a spec="css-text-3">hang</a>
+	(see 'hanging-punctuation')--
+	as well as the margin boxes of any atomic inlines it contains.
+
+	ISSUE: Should the hanging punctuation be included in the box instead
+	(so that the box is drawn around the punctuation when it is made visible through borders/background),
+	but rather only excluded when positioning the box
+	(so that the initial letter remains flush,
+	with the hanging punctuation properly hanging)?
+	See <a href="https://github.com/w3c/csswg-drafts/issues/310">discussion</a>.
+
+<h4 id="initial-letter-content-align">
+Alignment Within an Initial Letter Box</h4>
+
+	By default (i.e. under <a>automatic sizing</a>),
+	the content box of an <a>inline initial letter</a>
+	is fitted exactly to its content,
+	and alignment properties like 'text-align' or 'align-content' do not apply.
+	However, if the box is <em>not</em> sized automatically:
+
+	<ul>
+		<li>
+			If the <a>inline size</a> is <a>definite</a>,
+			'text-align' is honored
+			for aligning the contents of the <a>initial letter</a>
+			within its box in the <a>inline axis</a>
+			(using its <a>inline-axis</a> bearings as usual,
+			not the bounding box of its glyph outlines).
+
+		<li>
+			If the <a>block size</a> is <a>definite</a>,
+			'align-content' is honored
+			for aligning its contents in the <a>block axis</a>
+			(using its <a>block-axis</a> bearings,
+			synthesizing them if needed).
+	</ul>
+
+<h3 id="initial-letter-position">
+Initial Letter Positioning and Spacing</h3>
+
+<h4 id="initial-letter-exclusions">
+Space Below Initial Letters</h4>
 
 	The glyph(s) of an initial letter do not always fit within the specified sink.
 	For example, if an initial letter has a descender,
@@ -1118,8 +1139,9 @@ Space Around Initial Letters</h3>
 		In this font, the capital “J” extends well below the baseline (shown in red).</figcaption>
 	</figure>
 
-	Text is therefore excluded around the glyph bounding boxes of the initial letters.
-
+	Therefore all line boxes impacted by the glyph bounding boxes
+	of an <a>initial letter</a> are excluded,
+	not just those within range of the <a>initial letter sink</a>.
 	Specifically, for non-atomic initial letters,
 	the content box of the element is sized to fit:
 
@@ -1136,27 +1158,56 @@ Space Around Initial Letters</h3>
 		even if they leak outside its own line-height.
 	</ul>
 
-	The margin box of the initial letter is then made an exclusion area for subsequent text.
+	The initial letter is then made an exclusion area,
+	the same as if it were a float.
+	See 'initial-letter-wrap' for details.
 
 	<figure>
 		<img src="images/Dropcap-J-3line-exclude.png" width="480"
 		     alt="3-line drop cap with J, but four-line exclusion">
 		<figcaption>Correct: text excluded around glyph bounding box</figcaption>
 	</figure>
 
-<h3 id="initial-letter-position">
-Positioning and Kerning Initial Letters</h3>
+<h4 id="initial-letter-block-position">
+Block-axis Positioning</h4>
 
 	In the <a>block axis</a>, the <a>initial letter</a> is positioned
-	to satisfy its alignment requirements. (See 'initial-letters-align'.)
+	as required to satisfy its <a>under</a> alignment point ('initial-letters-align')
+	at its specified [=initial letter sink|sink=] ('initial-letters'),
+	i.e. it is positioned
+	such that it would sink the number of lines
+	specified by 'initial-letters'’s second argument
+	and align to the requisite <a>under</a> alignment point
+	if it was assumed that its containing block held only
+	the <a>initial letter</a> itself
+	followed by an infinite sequence of plain text
+	as the direct contents of its <a>root inline box</a>.
+
+	 <figure>
+		<img src="images/infinite-text.png" width="300"
+		     alt="Constant-sized text underlay shows how initial letter alignment
+		          is not affected by the content of the spanned lines.">
+	</figure>
 
-	In the <a>inline axis</a>, the position of the inline letter
-	is given by aligning its start margin edge to the start edge of the containing block.
+	Its position is anchored with respect to the line on which it occurs.
+
+<h4 id="initial-letter-inline-position">
+Inline Positioning and Kerning</h4>
 
-	However, if the <a>initial letter</a> is a non-atomic inline with zero padding and borders,
-	the UA must apply an additional negative offset on the start side,
-	of the amount necessary to optically align the first glyph
-	to the containing block edge as it would be in normal text.
+	In the <a>inline axis</a>, the position of the inline letter
+	is given by matching its <a>inline-start</a> <a>margin edge</a>
+	with the <a>inline-start</a> edge of the line box.
+
+	However, if the <a>initial letter</a> is a non-atomic inline
+	with an [=automatic size|automatic=] [=inline size=] and
+	zero padding and borders,
+	it is negatively offset
+	by the distance from the start edge of its content box
+	to the point in the content that would have been placed
+	at the start edge of the containing block
+	if it were not an <a>initial letter</a>
+	(i.e. the distance between its glyph bounding box
+	and its start side bearing).
 
 <h3 id="initial-letter-wrapping">
 Initial Letter Wrapping: the 'initial-letters-wrap' property</h3>