Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS3 rotate - rendering problems in Firefox and Safari

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.

like image 922
Marcel Kalveram Avatar asked May 04 '12 22:05

Marcel Kalveram


People also ask

How do I rotate a Div 90 degrees?

An element can be rotated 90 degrees by using the transform property. This property is used to move, rotate, scale and others to perform various kinds of transformation to elements. The rotate() transformation function can be used as the value to rotate the element.


1 Answers

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.

like image 115
wjdp Avatar answered Sep 20 '22 07:09

wjdp