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

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