Browsers apply extraneous spaces when letter-spacing

[r12a]

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

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:

For more details, see this GitHub issue, which is being used to track this gap. Please add any discussion there, and not to this issue.

[r12a]

The first comment in this issue contains text that will automatically appear in one or more gap-analysis documents as a subsection with the same title as this issue. Any edits made to that comment will be immediately available in the Editor's draft of the document. Proposals for changes or discussion of the content can be made by adding comments below this point.

[Darius90332]

One simple way to eliminate that extra gap is to stop relying on the browser’s built-in letter-spacing at the end of a range and instead manually control spacing on every character except the last. In practice you’d wrap each character in its own inline element (for example, ), and then use CSS to apply a right‐margin only to non-final spans.

html*

<span class="spaced">
  <span>b</span><span>r</span><span>e</span><span>i</span><span>t</span><span>e</span><span>r</span>
</span>

CSS*
.spaced span:not(:last-child) {
margin-right: 0.2em;
}
.spaced span:last-child {
margin-right: 0;
}

This guarantees uniform spacing between letters while removing any trailing space at the end of the line. You can automate the wrapping step with a small JavaScript helper that splits the text node into individual spans, or perform it server-side if the text is static. By controlling each gap explicitly you avoid the “phantom” space browsers insert when letter-spacing an entire run, and you’ll get a perfectly aligned, just-ified line every time.

[r12a]

Thank you for the suggested workaround, but the objective here is to get the CSS fixed so that it does the right thing.

(Heavy use of markup to achieve presentational effects like this, btw, is not only fiddly to write, but also removes the flexibility for change that comes with CSS.)