Bug 255712

Summary: WebKit applies extraneous spaces when letter-spacing
Product: WebKit Reporter: Fuqiao Xue <xfq.free>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: bfulgham, fantasai.bugs, mmaxfield, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   

Description Fuqiao Xue 2023-04-20 00:46:36 PDT 
Currently WebKit applies letter-spacing by adding a space after every letter in the text that is tracked. This results in a superfluous space at the end of the range, which creates an inappropriate gap before the following text. Letter spacing at the end of a line makes the line look misaligned in justified or right-justified text. It also has implications for text that has other styling, such as an outline or a coloured background, at the same time as being stretched.

Example in German: https://user-images.githubusercontent.com/4839211/87327736-5c89f780-c52c-11ea-8d22-7b994925d61a.png

Spec: https://github.com/w3c/csswg-drafts/issues/1518
https://drafts.csswg.org/css-text-3/#letter-spacing-property requires letter-spacing to only insert space within the selection, not outside, so it is the browser implementations that need to be fixed.

Tests & results:
Letter-spaced text should create no space on the outside of the selection: https://github.com/w3c/line_paragraph_tests/issues/55

Webkit puts the letter spacing after a letter even when it is at the end of a line, which makes the line look misaligned in justified or right-justified text.

For now, content authors have to work around the problem by applying a negative margin to remove the trailing space.
Comment 1 Radar WebKit Bug Importer 2023-04-27 00:47:18 PDT 
<rdar://problem/108595427>
Comment 2 fantasai 2024-06-23 21:10:42 PDT 
See the latest CSSWG resolution on this topic: https://github.com/w3c/csswg-drafts/issues/10193

Current plan is to apply letter-spacing symmetrically on either side of each letter, and to trim at the line edges.

(Chrome suspects that trimming at the edge of an inline would not be Web-compatible, so we're starting with this more conservative change to see if it can fly.)