Conflict between letter-spacing and text-align:center? - html

Question

Using letter-spacing seems to really screw with text-align: http://jsfiddle.net/NFAzv/
Googling hasn't turned anything up. Am I missing something here?
EDIT #1: Here's what I'm getting (Firefox 3.6.8 and Chrome 12.0.742.91 on Vista): link removed due to link limits for newbies (it can be found in the comments) (notice how the centers do not line up at all)
EDIT #2: Here's IE9, with a centered vertical line to show what's wrong: http://i.stack.imgur.com/C0J0n.png
EDIT #3: I have a confirmation in the comments below that the problem shows up for Chrome 10 on Windows 7. At least I'm not the only one going crazy.

Answer 1

It seems that all the browser have converged on a letter-spacing implementation that is plainly at odds with what css3 says should happen.
In particular see Example XV at http://dev.w3.org/csswg/css3-text/#letter-spacing0
Browsers simply don't do this. IE has even changed its behaviour recently (IE9, I think) to be more like the other browsers, and less like the CSS3 spec as it's currently written.
The CSS3 spec in question is still at working draft status, so presumably at some point it will be changed to match what the browsers do.
You may be able to rebalance the lines by adding a padding-left value to match the letter-spacing but that may not always be possible.

Answer 2

Since the problem isn't really described I assume that the text isn't centered perfectly..
You can use text-indent at half the size of the letter spacing to correct this..
.centered {
letter-spacing:12px;
text-indent:6px;
}
Only tested on Chrome OSX though..

Answer 3

It seems to work, but your requirement for this pixel perfectness does not comply with the default working of letter-spacing. If you highlight the text, you will see that it does center.
You could use the following workaround: demo fiddle
<div style="text-align: center;">
<div style="font-size: 130%; letter-spacing: 0.6em; padding-left: 0.6em;">THIS</div>
<div style="font-size: 350%; letter-spacing: 0.4em; padding-left: 0.4em;">ILLUSTRATES</div>
<div style="font-size: 130%; letter-spacing: 0.4em; padding-left: 0.4em;">THE</div>
<div style="font-size: 200%; letter-spacing: 0.1em; padding-left: 0.1em;">PROBLEM</div>
</div>

Answer 4

I have seen similar problem with links underline:last letter's width includes the letter-spacing value.
So apply letter-spacing:0; for the last letters should resolve the issue.
It's ugly but it works
...
<div style="font-size: 350%; letter-spacing: 0.4em;">
ILLUSTRATE<span style="letter-spacing:0;">S</span>
</div>
...

Answer 5

add 50% of the font size as text indent like this
<div style="text-align: center;">
<div style="font-size: 130%; letter-spacing: 0.6em;text-indent:0.3em">THIS</div>
<div style="font-size: 350%; letter-spacing: 0.4em;text-indent:0.2em">ILLUSTRATES</div>
<div style="font-size: 130%; letter-spacing: 0.4em;text-indent:0.2em">THE</div>
<div style="font-size: 200%; letter-spacing: 0.1em;text-indent:0.05em">PROBLEM</div>
</div>

Answer 6

Although this wasn't the exact question here, I had an issue that the starting left point of the text was too far to the right:
I had an issue that my text wasn't centered horisontally any longer after letter-spacing was applied but it was due to that I had restricted the texts container in width, so it was overflowing it's container.. worth to look into.. it may seem stupid but it's an easy misstake actually.

Answer 7

I may be late to this, but just in case my solution helps anyone.
This is an example simple button set up:
<button>Enter</button>
In my stylesheet:
button {
color: #f5ebe0;
border-color: #f5ebe0;
background-color: #00000000;
text-indent: 2rem;
width: 33%;
}
a {
color: inherit;
text-decoration: none;
letter-spacing: 2rem;
}
It seems that letter-spacing does indeed only add spacing either to the right, or only in between the letters. This being the case, (when using letter-spacing) I recommend using an anchor tag with in the button and applying your letter-spacing amount to the text inside the anchor, and then apply the SAME amount of text-indent inside your button.