[css-text-3][css-text-4] Switch letter-spacing from between letters to around letters #10193 (#14315)

Author: fantasai

css-text-3/Overview.bs

@@ -6126,9 +6126,10 @@ Word Spacing: the 'word-spacing' property</h3>
 Tracking: the 'letter-spacing' property</h3>
 
 	<wpt title="
-		This section has partial test coverage.
+		This section has partial test coverage. Some tests may also need updating to the new letter-spacing model.
 
 		Missing tests:
+		* switch to applying letter-spacing on both sides of each letter instead of between letters
 		* Applies to text
 		* Due to <a href=https://github.com/w3c/csswg-drafts/issues/1518>issue 1518</a>, some/many tests in this section should be converted from MUST to SHOULD.
 		* inherit lengths as absolute
@@ -6317,8 +6318,9 @@ Tracking: the 'letter-spacing' property</h3>
 	letter-spacing/letter-spacing-204.html
 	</wpt>
 
-	Letter-spacing must not be applied at the beginning of a line.
-	Whether letter-spacing is applied at the end of a line is undefined in this level.
+	Letter-spacing is applied to each [=typographic character unit=]
+	by inserting half of the additional spacing on each side;
+	except it is not applied at the beginning or end of a line.
 
 	<wpt>
 	letter-spacing/letter-spacing-trim-start-001.html
@@ -6331,8 +6333,8 @@ Tracking: the 'letter-spacing' property</h3>
 	</wpt>
 
 	<div class="example">
-		When letter-spacing is not applied at the beginning or end of a line,
-		text always fits flush with the edge of the block.
+		Letter-spacing is not applied at the beginning or end of a line
+		so that text always fits flush with the edge of the block.
 
 		<pre highlight=css>
 			p { letter-spacing: 1em; }
@@ -6345,27 +6347,12 @@ Tracking: the 'letter-spacing' property</h3>
 		<p class="ls-ex good ls-fixed-width color-box" style="text-align: left">a&#x3000;b&#x3000;c</p>
 		<p class="ls-ex good ls-fixed-width color-box" style="text-align: right">a&#x3000;b&#x3000;c</p>
 
-		UAs therefore <em>really should not</em> [[RFC6919]]
-		append letter spacing to the right or trailing edge of a line:
+		Applying letter spacing to the right or trailing edge of a line
+		is incorrect:
 
 		<p class="ls-ex bad ls-fixed-width color-box" style="text-align: right">a&#x3000;b&#x3000;c&#x3000;</p>
 	</div>
 
-	Letter spacing between two [=typographic character units=]
-	effectively “belongs” to the innermost element
-	that contains the two [=typographic character units=]:
-	the total letter spacing between two adjacent [=typographic character units=]
-	(after bidi reordering)
-	is specified by and rendered within the innermost element
-	that <em>contains</em> the boundary
-	between the two [=typographic character units=].
-	However, the UA may instead attach letter-spacing at element boundaries
-	to one or the other [=typographic character unit=]
-	using the letter-spacing value pertaining to its containing element.
-
-	Note: This secondary behavior is permitted in this level
-	due to Web-compat concerns.
-
 	<wpt>
 	letter-spacing/letter-spacing-bidi-002.html
 	letter-spacing/letter-spacing-bidi-004.xht
@@ -6377,6 +6364,7 @@ Tracking: the 'letter-spacing' property</h3>
 	letter-spacing/letter-spacing-205.html
 	</wpt>
 
+<!-- THIS EXAMPLE IS WRONG FIX IT
 	<div class="example">
 		An inline box is expected to only include
 		letter spacing between characters completely contained within that element,
@@ -6427,13 +6415,14 @@ Tracking: the 'letter-spacing' property</h3>
 
 		<pre highlight=html>
 
-			&lt;!-- abc followed by Hebrew letters alef (&#x5d0;), bet (&#x5d1;) and gimel (&#x5d2;) -->
+			&lt;!-- abc followed by Hebrew letters alef (&#x5d0;), bet (&#x5d1;) and gimel (&#x5d2;) --&gt;
 			&lt;!-- Reordering will display these in reverse order. --&gt;
 			<bdo dir=ltr>&lt;p>ab&lt;span>c&#x5d0;&lt;/span>&#x5d1;&#x5d2;&lt;/p></bdo>
 		</pre>
 
 		<p class="ls-ex">a&#x3000;b&#x3000;<span class="color-box">c</span>&#x3000;<span class="color-box">&#x5d0;</span>&#x3000;&#x5d1;&#x3000;&#x5d2;</p>
 	</div>
+-->
 
 	Letter spacing ignores invisible zero-width formatting characters
 	(such as those from the Unicode Cf category).
@@ -8407,7 +8396,9 @@ Recent Changes</h3>
 
 	The following changes have been made since
 	the <a href="https://www.w3.org/TR/2026/CRD-css-text-3-20260608/">June 2026 Candidate Recommendation Draft</a>:
-	* Clarify that shaping breaks when 'vertical-align' is not its [=initial value=],
+	* Changed the 'letter-spacing' model from inserting space <a href="https://www.w3.org/TR/2026/CRD-css-text-3-20260608/#letter-spacing">between characters</a> to <a href="#letter-spacing">around characters</a>.
+		(<a href="https://github.com/w3c/csswg-drafts/issues/10193">Issue 10193</a>)
+	* Clarified that shaping breaks when 'vertical-align' is not its [=initial value=],
 		rather than mentioning ''vertical-align/baseline'' specifically,
 		to avoid confusion given further developments to 'vertical-align'.
 		(<a href="https://github.com/w3c/csswg-drafts/issues/13277">Issue 13277</a>)

css-text-4/Overview.bs

@@ -9961,9 +9961,10 @@ Word Spacing: the 'word-spacing' property</h3>
 Tracking: the 'letter-spacing' property</h3>
 
 	<wpt title="
-		This section has partial test coverage.
+		This section has partial test coverage. Some tests may also need updating to the new letter-spacing model.
 
 		Missing tests:
+		* switch to applying letter-spacing on both sides of each letter instead of between letters
 		* Applies to text
 		* Due to <a href=https://github.com/w3c/csswg-drafts/issues/1518>issue 1518</a>, some/many tests in this section should be converted from MUST to SHOULD.
 		* inherit lengths as absolute
@@ -10165,8 +10166,9 @@ Tracking: the 'letter-spacing' property</h3>
 	letter-spacing/letter-spacing-204.html
 	</wpt>
 
-	Letter-spacing must not be applied at the beginning of a line.
-	Whether letter-spacing is applied at the end of a line is undefined in this level.
+	Letter-spacing is applied to each [=typographic character unit=]
+	by inserting half of the additional spacing on each side;
+	except it is not applied at the beginning or end of a line.
 
 	<wpt>
 	letter-spacing/letter-spacing-trim-start-001.html
@@ -10179,8 +10181,8 @@ Tracking: the 'letter-spacing' property</h3>
 	</wpt>
 
 	<div class="example">
-		When letter-spacing is not applied at the beginning or end of a line,
-		text always fits flush with the edge of the block.
+		Letter-spacing is not applied at the beginning or end of a line
+		so that text always fits flush with the edge of the block.
 
 		<pre highlight=css>
 			p { letter-spacing: 1em; }
@@ -10193,27 +10195,12 @@ Tracking: the 'letter-spacing' property</h3>
 		<p class="ls-ex good ls-fixed-width color-box" style="text-align: left">a&#x3000;b&#x3000;c</p>
 		<p class="ls-ex good ls-fixed-width color-box" style="text-align: right">a&#x3000;b&#x3000;c</p>
 
-		UAs therefore <em>really should not</em> [[RFC6919]]
-		append letter spacing to the right or trailing edge of a line:
+		Applying letter spacing to the right or trailing edge of a line
+		is incorrect:
 
 		<p class="ls-ex bad ls-fixed-width color-box" style="text-align: right">a&#x3000;b&#x3000;c&#x3000;</p>
 	</div>
 
-	Letter spacing between two [=typographic character units=]
-	effectively “belongs” to the innermost element
-	that contains the two [=typographic character units=]:
-	the total letter spacing between two adjacent [=typographic character units=]
-	(after bidi reordering)
-	is specified by and rendered within the innermost element
-	that <em>contains</em> the boundary
-	between the two [=typographic character units=].
-	However, the UA may instead attach letter-spacing at element boundaries
-	to one or the other [=typographic character unit=]
-	using the letter-spacing value pertaining to its containing element.
-
-	Note: This secondary behavior is permitted in this level
-	due to Web-compat concerns.
-
 	<wpt>
 	letter-spacing/letter-spacing-bidi-002.html
 	letter-spacing/letter-spacing-bidi-004.xht
@@ -10225,6 +10212,7 @@ Tracking: the 'letter-spacing' property</h3>
 	letter-spacing/letter-spacing-205.html
 	</wpt>
 
+<!-- THIS EXAMPLE IS WRONG FIX IT
 	<div class="example">
 		An inline box is expected to only include
 		letter spacing between characters completely contained within that element,
@@ -10275,13 +10263,14 @@ Tracking: the 'letter-spacing' property</h3>
 
 		<pre highlight=html>
 
-			&lt;!-- abc followed by Hebrew letters alef (&#x5d0;), bet (&#x5d1;) and gimel (&#x5d2;) -->
+			&lt;!-- abc followed by Hebrew letters alef (&#x5d0;), bet (&#x5d1;) and gimel (&#x5d2;) --&gt;
 			&lt;!-- Reordering will display these in reverse order. --&gt;
 			<bdo dir=ltr>&lt;p>ab&lt;span>c&#x5d0;&lt;/span>&#x5d1;&#x5d2;&lt;/p></bdo>
 		</pre>
 
 		<p class="ls-ex">a&#x3000;b&#x3000;<span class="color-box">c</span>&#x3000;<span class="color-box">&#x5d0;</span>&#x3000;&#x5d1;&#x3000;&#x5d2;</p>
 	</div>
+-->
 
 	Letter spacing ignores invisible zero-width formatting characters
 	(such as those from the Unicode Cf category).