From 706fb9ed0193b21e6e1505c41e142e11d45601bb Mon Sep 17 00:00:00 2001
From: Stefan Zager <szager@chromium.org>
Date: Tue, 23 Jan 2024 14:11:42 -0800
Subject: [PATCH 1/2] [css-text-3] #8649 Describe the extent of ink overflow
 from hanging glyphs

---
 css-text-3/Overview.bs | 52 ++++++++++++++++++++++++++++++++++++++----
 1 file changed, 47 insertions(+), 5 deletions(-)

diff --git a/css-text-3/Overview.bs b/css-text-3/Overview.bs
index ab5197bcfbb..7ede58ec763 100644
--- a/css-text-3/Overview.bs
+++ b/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>
 

From 88b3b8ea3cf84ec545dea048416060ee81659787 Mon Sep 17 00:00:00 2001
From: Stefan Zager <szager@chromium.org>
Date: Tue, 7 May 2024 14:26:10 -0700
Subject: [PATCH 2/2] Add font selection caveat, don't reference hanging glyphs

---
 css-text-3/Overview.bs | 36 +++++++++++++++++++++---------------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/css-text-3/Overview.bs b/css-text-3/Overview.bs
index 7ede58ec763..5ae642e251c 100644
--- a/css-text-3/Overview.bs
+++ b/css-text-3/Overview.bs
@@ -8262,38 +8262,44 @@ 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>
+	  <p>The example below demonstrates [=ink overflow=] from text.</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,
+	Some glyphs have a painted area that extends beyond the
+	bounding box described by their origin and advance.
+	In these cases, the extra painted area generates [=ink overflow=],
+	and hence is not included in [=inline box=] geometry.
+	There is no straightforward way to measure the extent
+	of [=ink overflow=] generated by these glyphs,
 	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.
+	prevent them from overlapping adjacent content.
+	The actual extent of [=ink overflow=] is determined by the font rendering system,
+	and is 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
+	within a 2-pixel margin of error. For a known font,
+	a practical way to prevent glyph [=ink overflow=] 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,
+	of [=ink overflow=] 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.
 
+	Note that there are many factors that may cause the glyph rendering subsystem
+	to use a font other than the one specified in stylesheets when drawing text,
+	including but not limited to UA settings, accessibility features,
+	and the availability of web fonts.
+	The extent of [=ink overflow=] derives from the actual font used for rendering text,
+	and developers should allow for the possibility that
+	the actual rendered extent of [=ink overflow=] from text
+	does not match what they measured during development.
 
 <h2 id="priv" class="no-num">
 Privacy Considerations</h2>