Edit Question - KnowledgeHub

Title Body

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) <a href="https://stackoverflow.com/questions/34984

Tags (comma-separated) Cancel