title: CSS letter-spacing parts of a word
body: <p>I want to do something like this in HTML:</p>
  
  <pre><code>"T i t l e"
  </code></pre>
  
  <p><a href="http://www.w3.org/TR/WCAG-TECHS/C8.html" rel="nofollow noreferrer">The W3C recommends</a> using the CSS property <code>letter-spacing</code> rather than inserting spaces. So, I can do the following: <code>&amp;quot;&lt;span style="letter-spacing: 0.5em;"&gt;Title&lt;/span&gt;&amp;quot;</code></p>
  
  <p>which gives the following result:</p>
  
  <pre><code>"T i t l e" (sometimes IE), "T i t l e " (all other browsers)
  </code></pre>
  
  <p>The alternative, using <code>&amp;quot;&lt;span style="letter-spacing: 0.5em;"&gt;Titl&lt;/span&gt;e&amp;quot;</code>, results in</p>
  
  <pre><code>"T i t le" (sometimes IE), "T i t l e" (all other browsers)
  </code></pre>
  
  <p>Is there some <em>easy</em> and <em>elegant</em> way to get the desired result in all common browsers (IE6-8, FF, Opera, Safari)? I know that I can use something like <code>&lt;span class="a"&gt;&lt;span class="b"&gt;Titl&lt;/span&gt;e&lt;/span&gt;</code> and  <a href="http://www.quirksmode.org/css/condcom.html" rel="nofollow noreferrer">conditional comments</a> that assign the right CSS based on browser selection, but I want to avoid cluttering my HTML and CSS with browser-specific workarounds.</p>
  
  <hr>
  
  <p>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 <em>exactly</em> the same HTML file). Unfortunatley, the customer's IE7 produces the left-hand result...</p>