Why does letter-spacing add a space after the last character?

Question

The CSS spec for letter spacing describes the effect of the CSS letter-spacing property as follows:

This property specifies spacing behavior between text characters.

I am wondering therefore why a space is added after the last character, as that is not a space between 2 characters.

You can see that this is happening in the picture below, where I increased the letter spacing. You can see that extra space has been added after the t. This screenshot was taken on Chrome, though the same thing happens in Firefox.

I find this behaviour particularly undesirable when animating the letter-spacing of centered text. For 3 characters, I would expect the middle character to stay in the same position, but it doesn't.

div {
width: 150px;
text-align:center;
border: 1px solid teal;
padding: 5px;
}

span{
transition: letter-spacing 0.2s;
}

span:hover {

letter-spacing: 10px;
}

<p>Hover over the word HOT to see the letter-spacing change.</p>

<div>
  <span>HOT</span>
</div>

<p>For any word with an even number of letters, the letter after the middle space stays in the same position.</p>

<div>
  <span>SHOT</span>
</div>

What wording in what specification explains this behaviour? Because this does not seem consistent with the specification I have linked to as I read it.

EDIT:

This is not a duplicate of other questions about how to remove the extra space. It is about whether that space is correct in accordance with the specification. It is important to understand how the specification maps to behaviour we see in the browser in order to reason about and predict things, and so we can write CSS with some amount of confidence that the behaviour shown by the browser we are testing in will be the same as in other browsers. It is also important to understand what is a bug and what isn't so that we know what we can and can't rely on, and so are able to build solutions which are future proof.

Possible duplicate of [How can I remove letter-spacing for the last letter of an element in CSS?](https://stackoverflow.com/questions/6949836/how-can-i-remove-letter-spacing-for-the-last-letter-of-an-element-in-css) — EGC, Oct 09 '19 at 22:36
Maybe have a look at the duplicate or this: https://iamsteve.me/blog/entry/remove-letter-spacing-from-last-letter — EGC, Oct 09 '19 at 22:37
@EGC the question is not about removing but *why* that space exist — Temani Afif, Oct 09 '19 at 23:00
Fairly sure it's a bug https://stackoverflow.com/a/6949953/11700321 — EGC, Oct 09 '19 at 23:03
letter-spacing doesn't add a space, it increases the space used by the letter on the far side of the direction set in the document: test https://jsfiddle.net/Lc6a2pzn/ there is nothing to remove, it is part of the letter layout — G-Cyrillus, Oct 09 '19 at 23:12
Interesting read from Mozilla - https://bugzilla.mozilla.org/show_bug.cgi?id=125390 — EGC, Oct 09 '19 at 23:16

G-Cyrillus · Answer 1 · 2019-10-09T23:24:57.710

4

letter-spacing doesn't add a space, it increases the space used by the letter on the far side of the direction set in the document: test https://jsfiddle.net/Lc6a2pzn there is nothing to remove, it is part of the letter layout

a trick for a single word/line without punctuation, could be direction + text-indent : https://jsfiddle.net/Lc6a2pzn/1/

b {
  letter-spacing: 1em;
  border: solid;
  display:inline-block;
}

b~b {
  text-indent:-1em;;
  direction:rtl;
}

<b>test</b>
<b>test</b>

edited Oct 09 '19 at 23:24

answered Oct 09 '19 at 23:18

G-Cyrillus

101,410
14
105
129

2

but the specification states that it control the space between characters. It's clear that we can find a lot of hacks to remove the extra space but how to explain it based on what the Spec described? – Temani Afif Oct 09 '19 at 23:43
@TemaniAfif there is no way to select that space (that it stands inside or out the letter layout) , nor there is a way to select the last letter/punctuation of a text nor if this is just the last letter of one line. the spec only describes that it allows you to varie the distance in between 2 letters inside the tag where the rule is applied :( from a font to another, this white space can also have different values from the design of the font-family itself. CSS has no hands on this fortunately imho. – G-Cyrillus Oct 09 '19 at 23:55
@TemaniAfif it reminded me of https://stackoverflow.com/questions/22866336/disable-underline-for-lowercase-characters-g-q-p-j-y/ where styling text seemed too, too limited . SVG could be the only reliable option in some cases i guess ;) – G-Cyrillus Oct 10 '19 at 00:06
I am not sure if you thought from my wording that I thought a space *character* was added. "Add a space", "Add another space", "Increase the width of the existing space" are all equivalent for the purposes of my question. And my question was not about how to remove the space, see my edit for clarification. – Mark Fisher Oct 10 '19 at 16:31
@MarkFisher & @TemaniAfif , okay,CSS style tag elements and eventually how to render the font within that tag, it never style letters individually exept maybe via `:first-letter`. Any letters are treated the same way, *CSS doesn't even know what a letter or a word is. there is no selectors to style them individually* ;) In other words , i would understand the question: "why the last letter is from the same font-family?" I guess this is why i got confused reading your question and might saw it as a possible duplicate. – G-Cyrillus Oct 10 '19 at 17:51

Why does letter-spacing add a space after the last character?

1 Answers1