CSS3 rotate - rendering problems in Firefox and Safari

Question

I'm trying to rotate a simple line of text by some degrees with the CSS3 property »rotate«, precisely by 1.5 degrees.

  -webkit-transform: rotate(1.5deg);
  -moz-transform: rotate(1.5deg);
  -ms-transform: rotate(1.5deg);
  -o-transform: rotate(1.5deg);
  transform: rotate(1.5deg);

The result in Chrome (v18) is looking OK, in Firefox (v10) and Safari (5.1.5) however I am getting ugly results.

I am using a font implemented with @font-face, but with Arial i still get problems (at least in Firefox). See examples below.

What's really weird is that switching to a system font (Arial) in Safari resolves the problem, while in Firefox the problem persists.

Any help, workaround or hack would be greatly appreciated.

1) Chrome 18 / font-family: Calibri / alignment OK

2) Firefox 10 / font-family: Calibri / alignment ugly

3) Firefox 10 / font-family: Arial / alignment still ugly

4) Safari 5.1.5 / font-family: Calibri / alignment ugly

5) Safari 5.1.5 / font-family: Arial / alignment OK

So far, I have found the following threads, but none of them gives an explanation on how to solve the problem:

https://bugzilla.mozilla.org/show_bug.cgi?id=403447

CSS3 Bugs - Issues when using transform:rotate rules (Safari + Firefox)

CSS Transform Rotate letter alignment

I have also tried setting the DirectWrite variables (to change font rendering), as described in this tutorial: http://www.askvg.com/how-to-enable-direct2d-directwrite-hardware-acceleration-in-mozilla-firefox/ , but the results are the same.

Answer 1

This isn't something that you can fix, from the bug report and other bits it looks like the browser makers are aware of these problems.. but I wouldn't hold out for a permanent fix for a while.

Maybe try putting the text in its own div container and rotating that instead of the text directly?

But IMHO if you need this to work on a production site, replace the text with an image. Users are using browsers that don't support the new CSS3 stuff so if it's important either don't use it, or ensure it degrades nicely (functional on all platforms, but may loose some snazz) ie disable the text rotation on the browsers that look ugly.