CSS Rotation

[brad_152]

Hi,

I'm wondering if you could help me, I have come across CSS rotation problem in google chrome and firefox. Whenever I rotate a piece of text it looks un-rendered/jagged.

But on IE the text looks smooth and normal, wondering if this is a bug in the rotation code?

---Code I've used---
transform:rotate(4deg);
-webkit-transform:rotate(4deg);
-moz-transform:rotate(4deg);
-ms-transform:rotate(4deg);
-o-transform:rotate(4deg);

____________________________

Attached the image for you to look at.

Rotation-Image.jpg

Thanks.

[weegillis]

Not a bug in the rotation code, a difference in the rendering engines. The get around this the OP will have to use trial and error on choosing a font that renders well during transformation. The real truth is that this is still the web, and these are still web browsers, and we are still delivering content to all manner of displays. To expect picture perfection is hoping for the impossible.

What 'may' help to achieve a 'finer' result in this case could be SVG, rather than CSS transform. It scales nicely and may be better able to disguise the pitch difference between width and height on pixels.

[Talks_44]

weegillis is correct. Even though IE seems to have the most difficult problems understanding standardized CSS, it also seems to render text rather well (which isn't worth how much IE sucks)

Aside from his solution, the only other way would be using an image (which could cause a slowing of site speed if you're using this feature a lot)