CSS letter-spacing parts of a word

Question

I want to do something like this in HTML:

"T i t l e"

The W3C recommends using the CSS property letter-spacing rather than inserting spaces. So, I can do the following: &quot;<span style="letter-spacing: 0.5em;">Title</span>&quot;

which gives the following result:

"T i t l e" (sometimes IE), "T i t l e " (all other browsers)

The alternative, using &quot;<span style="letter-spacing: 0.5em;">Titl</span>e&quot;, results in

"T i t le" (sometimes IE), "T i t l e" (all other browsers)

Is there some easy and elegant way to get the desired result in all common browsers (IE6-8, FF, Opera, Safari)? I know that I can use something like <span class="a"><span class="b">Titl</span>e</span> and conditional comments that assign the right CSS based on browser selection, but I want to avoid cluttering my HTML and CSS with browser-specific workarounds.

---

EDIT: About the "sometimes IE": I have two machines, both with Windows 7 and IE8 (8.0.7600.16385). One of them gives the left-hand result, one of them the right-hand result (for exactly the same HTML file). Unfortunatley, the customer's IE7 produces the left-hand result...

Answer 1

I tried your code in IE8, and got "T i t l e". Perhaps you should try different doctypes to see if the browser will respond to those and adapt their CSS behavior.

Answer 2

Have you tried using px instead of ems? IE sometimes does funny things with ems - try the following instead:

<span style="letter-spacing: 10px;">Title</span>

Answer 3

Have you considered adding margin-right:-0.5em to your span.

e.g.

&quot;<span style="letter-spacing: 0.5em; margin-right:-0.5em">Title</span>&quot;

Tested in FF 3.5.7, Opera 10.10, Chrome 3.0.195.38, IE6, IE7, and IE8 standard and compatibility modes, it sort of works. In your exact example, it seems OK, though it wouldn't be right if the span had a background colour since that would leak onto the second quote mark.

Also, you'd need to be careful to not add any CSS to the span that caused hasLayout in IE6,IE7 to be set, as that would break it.

Commentary:

This is a very curious behaviour. CSS 2.1 and earlier is quite vague about what should happen after the last character. It talks about the spacing between characters but that's insufficient when the span is viewed as part of a larger string of text. It seems that Microsoft initially came to a different conclusion to the other browser makers as to what it meant. MS have then, in IE8, chosen to switch over and copy the other browsers.

CSS 3, on the other hand, is quite clear. It provides this example:

For example, given the markup

<P>a<LS>b<Z>cd</Z><Y>ef</Y></LS>g</P>

and the style sheet

LS { letter-spacing: 1em; }

Z { letter-spacing: 0.3em; }

Y { letter-spacing: 0.4em; }

the spacing would be

a[0]b[1em]c[0.3em]d[1em]e[0.4em]f[0]g

Note the distances after d, f, and g. This clearly seems to be specifying the IE6, IE7 behaviour.

It should be noted that that section of CSS 3 is a draft, and that the example was written long before IE8 was created. It's likely therefore, IMO, that the CSS 3 requirements may well change in the future.