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.

Debag

Possible duplicate of How can I remove letter-spacing for the last letter of an element in CSS? – Mccandless

Maybe have a look at the duplicate or this: iamsteve.me/blog/entry/remove-letter-spacing-from-last-letter – Mccandless

@Mccandless the question is not about removing but why that space exist – Autogiro

Fairly sure it's a bug https://mcmap.net/q/299135/-how-can-i-remove-letter-spacing-for-the-last-letter-of-an-element-in-css – Mccandless

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 jsfiddle.net/Lc6a2pzn there is nothing to remove, it is part of the letter layout – Hartfield

Interesting read from Mozilla - bugzilla.mozilla.org/show_bug.cgi?id=125390 – Mccandless

Answer 1

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>

Hartfield

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? – Autogiro

@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. – Hartfield

@TemaniAfif it reminded me of #22866836 where styling text seemed too, too limited . SVG could be the only reliable option in some cases i guess ;) – Hartfield

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. – Debag

@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. – Hartfield