Question

I would have assumed that setting letter-spacing to -1px on a two-character span would reduce its width by 1px. However, see the following in Chrome:

span.style.fontSize=48
48
span.textContent="99"
"99"
span.style.letterSpacing=0
0
span.offsetWidth
16
span.style.letterSpacing="-1px"
"-1px"
span.offsetWidth
14

Setting letter-spacing to -1px has reduced the width by 2px rather than 1.

This might be less important if it did not cause the text with letter-spacing of -1px to be slight off-center when you are trying to align it with text-align: center.

The CSS spec appears to say clearly that letter-spacing is supposed to affect spacing between letters. However, it seems that at least in Chrome the spacing between some conceptual start point and the first character of text is also compressed.

Any ideas or thoughts on this? IE 10 exhibits the same behavior. A bug? Or misreading of the spec?

Answer 1

The Behavior

I agree that the spec states this fairly explicitly. To quote this page:

Letter-spacing must not be applied at the beginning or at the end of a
line.

However, this fiddle on Win 7 is showing me that on Chrome, IE9, and Firefox, all are applying one less pixel after the last letter (Firefox is showing me to start out with one less pixel to begin with in the gap to the border), which seems to be in violation of it not being applied to the end of the line. The result being that all appear to be reducing total width by 1px per character in the string.

So it does not appear that it works as is should in any browser, nor does it matter if the letter-spacing is instead a positive number.

Probably the “Best” Workaround

Add padding-right: 1px to the span with letter-spacing: -1px to offset the problem as seen in this fiddle.

Optional Workaround: :after pseudo-element

On the span with letter-spacing: -1px put the following as seen in this fiddle:

span:after {content:''; display: inline-block; width: 1px;}

Final Thought

Either solution above may or may not help with differences in text-align: center calculations, as that appears to partially depend on the 1px rounding for center based on the display width, as seen when one stretches the width of this fiddle).