[css-text-3] w3c#8649 Describe the extent of ink overflow from hanging glyphs

Author: szager-chromium

css-text-3/Overview.bs

@@ -28,6 +28,7 @@ WPT Path Prefix: /css/css-text/
 <pre class=link-defaults>
 spec:css2; type:dfn; text:document language
 spec:css-ruby-1; type:dfn; text:ruby
+spec:css-overflow-3; type:dfn; text:ink overflow
 </pre>
 
 <style type="text/css">
@@ -6948,7 +6949,7 @@ Hanging Glyphs</h3>
 	when measuring the line’s contents for fit, alignment, or justification.
 	Depending on the line’s alignment/justification, this can
 	result in the mark being placed outside the line box.
-	The [=hanging=] glyph is also not taken into account
+	The <dfn>hanging glyph</dfn> is also not taken into account
 	when computing [=intrinsic sizes=] ([=min-content size=] and [=max-content size=]),
 	and any sizes derived thereof.
 	(The interaction of this measurement and kerning is currently UA-defined;
@@ -6961,14 +6962,13 @@ Hanging Glyphs</h3>
 	overflow-wrap/overflow-wrap-min-content-size-009.html
 	</wpt>
 
-	A <dfn><a lt=hang>hanging</a> glyph</dfn>
-	is still enclosed inside its parent inline box
+	A [=hanging glyph=] is still enclosed inside its parent inline box
 	and still participates in text justification:
 	its character advance is just not measured when determining
 	how much content fits on the line,
 	how much the line’s contents need to be expanded or compressed for justification,
 	or how to position the content within the line box for text alignment.
-	Effectively, the [=hanging=] glyph character advance
+	Effectively, the [=hanging glyph=] character advance
 	is re-interpreted as an additional negative margin
 	on the affected edge of its parent [=inline box=];
 	the line is otherwise laid out as usual.
@@ -6979,6 +6979,8 @@ Hanging Glyphs</h3>
 	when the content is editable
 	or in other circumstances where treating it as [=scrollable overflow=]
 	would be useful to the user.
+	[[#text-ink-overflow]] contains additional information about
+	[=ink overflow=] from text rendering.
 	[[!CSS-OVERFLOW-3]]
 
 	<wpt>
@@ -7047,7 +7049,7 @@ Hanging Punctuation: the 'hanging-punctuation' property</h4>
 		* it is not considered when measuring the line’s contents for […] justification
 		* Non-zero inline-axis borders or padding between a hangable mark and the edge of the line prevent the mark from hanging
 		* At most one punctuation character may hang at each edge of the line.
-		* should be treated as ink overflow"></wpt>
+		* should be treated as [=ink overflow=]"></wpt>
 
 	<pre class="propdef">
 	Name: hanging-punctuation
@@ -8253,6 +8255,46 @@ Small Kana Mappings</h2>
 	text-transform/text-transform-full-size-kana-008.html
 	</wpt>
 
+<h2 id="text-ink-overflow" class="no-num">
+Appendix H:
+Ink Overflow from Text</h2>
+
+        <p><em>This appendix is non-normative.</em></p>
+
+	<div class="example">
+	  <p>The example below demonstrates a [=hanging glyph=].</p>
+	  <div class="figure" style="margin:0; font-size:10rem; font-family:garamond; font-style:italic">
+	    <span style="display:inline-block; width:1ch; height:1lh; background:green; opacity:0.5"></span><span style="vertical-align: top;">f</span><span style="display:inline-block; width:1ch; height:1lh; background:green; opacity:0.5"></span>
+	  </div>
+	</div>
+
+	Because [=hanging glyphs=] are considered [=ink overflow=],
+	and hence are not included in [=inline box=] geometry,
+	there is no straightforward way to measure their extent,
+	or to pre-compute padding or margin lengths that will
+	prevent [=hanging glyphs=] from overlapping adjacent content.
+	The extent of [=ink overflow=] from [=hanging glyphs=]
+	is determined by the font rendering system,
+	and beyond the scope of this specification.
+
+	However, any two conforming browser implementations,
+	when rendering a given piece of text content
+	using a given font in a supported format
+	(see [[css-fonts-4#font-format-definitions]]),
+	will produce identically-sized [=ink overflow rectangles=],
+	within a 2-pixel margin of error.
+
+	A practical way to prevent [=hanging glyphs=] from
+	overlapping adjacent content is to load the target
+	content in any conforming web browser, gauge the extent
+	of [=ink overflow=] from [=hanging glyphs=] via visual inspection,
+	and adjust padding/margin lengths to avoid overlap, plus
+	an extra two pixels to allow for variations between implementations.
+	This should be sufficient to prevent unwanted overlap in all
+	conforming implementations without the necessity of testing
+	each implementation individually.
+
+
 <h2 id="priv" class="no-num">
 Privacy Considerations</h2>