Strange looking words using webkit transform rotate in chrome

Question

Hi,

I've trying to get some vertical text on a little test webpage after reading an article on how to do this. In my CSS I have the following:

#navMenu li{
    list-style:none;
    float:left;
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

And the navMenu in my markup is:

<ul id="navMenu">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

This works fine in FF 3.6, IE8(!) but in Chrome some of the words look distorted/fuzzy. 2 particular words that look 'odd' are: Contact and Portfolio. Why would certain words be messed up but all others are okay?

I thought it was having a 'round' letter (c, o, q etc) at the end of the word so I did a little bit of testing (by no means exhaustive), I changed Portfolio to: Portfolix and Portfoliw which were okay but if I tried Portfoliq, Protfolie or Portfolit then it's distorted.

Any ideas as to why this happens and any ways to remedy it?

Answer 1

Chrome uses Windows GDI for text drawing on Windows. I'm guessing that to rotate, it will draw the horizontal text to a bitmap in memory and then rotate it and render it to the screen. Could be an issue with preserving the font smoothing or maybe font hinting is being done assuming the horizontal orientation then the transformation is applied; resulting in the pixel distortion. You may also be interested in subpixel rendering.

Here's a blog comparing subpixel rendering in chrome and firefox. This is an older article about Firefox's font rendering.