Bug 255712 – WebKit applies extraneous spaces when letter-spacing

• Status: NEW
• Component: Layout and Rendering

[Fuqiao Xue]

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.

[Radar WebKit Bug Importer]

<rdar://problem/108595427>

[fantasai]

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.)