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)