0

When I want to rotate a div I want to rotate the text as well, but I have still issues with anti-aliasing. The text is blurry and I cant fix it. The effect occurs in Firefox and Chrome.

I found this solution, but it didn't work for me.

-webkit-backface-visibility: hidden;

html

<div id="rotate">
    <span>Hi, iam rotated blurry text </span> 

</div>

css 

#rotate{
margin-top:30px;
    -moz-transform: rotate(-9deg);
    -ms-transform: rotate(-9deg);
    -o-transform: rotate(-9deg);
    -webkit-transform: rotate(-9deg);
    transform: rotate(-9deg);
background:#292929;
font-size:30px;
color:green;
display:inline-block;
}

link: http://jsfiddle.net/P52Yu/6/

plz help :)

maname
  • 110
  • 11
  • possible duplicate of [Wonky text anti-aliasing when rotating with webkit-transform in Chrome](http://stackoverflow.com/questions/6846953/wonky-text-anti-aliasing-when-rotating-with-webkit-transform-in-chrome) – Pat Dobson Nov 01 '13 at 11:14
  • Maybe there's already a question about this, check out here [css transform, jagged edges in chrome] http://stackoverflow.com/questions/6492027/css-transform-jagged-edges-in-chrome – sissy Nov 01 '13 at 11:14
  • Also, this : http://stackoverflow.com/questions/8605194/improve-css3-text-rotation-quality – Pat Dobson Nov 01 '13 at 11:14
  • thx, the first solution worked for me but Firefox has still edges – maname Nov 01 '13 at 11:29

1 Answers1

0

Chrome has difficult with numbers with a lot of decimal places at times when there is a transform involved. Try doing a parseInt on those numbers to bring the decimal places down. You'll find the blurryness often goes away with this simple fix.

jbramble76
  • 101
  • 1
  • 3
  • Check this anwer, but basically you could round the float pixel values as needed : http://stackoverflow.com/a/42256897/1834212 – Miguel Apr 19 '17 at 16:55