This issue applies to all languages that use letter-spacing.

Various orthographies use letter-spacing to stretch words or phrases. This may be for a purely visual effect, but may also carry semantics, for example in languages such as German and Hebrew it is a way of emphasizing text.

When letter-spacing is applied, authors expect the spaces to occur only within the text to which it is applied.

The GAP

Currently browsers that apply letter-spacing do so 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:

Gecko, Chrome, and Webkit put 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 also applying a negative margin to remove the trailing space. This is problematic not only because it requires additional work on the part of the author every time letter-spacing is used, but it is quite likely that the author is unaware that they need to do this, or indeed how to do it.

Priority

Given that a workaround is possible, though not really acceptable, this is prioritised as an advanced issue.

Tests & results

Interactive test Letter-spaced text should create no space on the outside of the selection

Action taken

CSS issue 1518
The css-text specification requires letter-spacing to only insert space within the selection, not outside, so it is the browser implementations that need to be fixed. However, there is discussion around how to manage backward compatibility if browsers change their implementations.

Outcomes

tbd