Search code examples
windowsgoogle-chrometransformblurry

How can I force rotated text to anti-alias correctly in Chrome on Windows?

When I attempt to rotate text for a label, I can either get non-anti-aliased text or blurry text, but not nicely anti-aliased text.

This text looks bad on a "standard" 1920*1080 monitor, you might not notice the pixelation on a higher resolution screen.

https://jsfiddle.net/ft2s0d71/

<head>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet">
</head>
<div>
<p id="a">
a. (Some Text Label - not pixelated)
</p>
</div>
<div>
<p id="b">
b. (Some Text Label - blurry)
</p>
</div>
<div>
<p id="c">
c. (Some Text Label - pixelated)
</p>
</div>
<div>
<p id="c2">
c2. (Some Text Label - pixelated)
</p>
</div>
<div>
<p id="d">
d. (Some Text Label - pixelated)
</p>
</div>

* {
  font-family:"Source Sans Pro", sans-serif;
  font-size:11pt;
  font-weight:400;

}
#a {
  position:absolute;
  top:0;
  left:10px;
}
#b {
  position:absolute;
  top:130px;
  left:-70px;
  transform: rotate(270deg) translate3d(0,0,0);
}
#c {
  position:absolute;
  top:140px;
  left:-50px;
  transform: rotate(270deg)
}
#c2 {
  position:absolute;
  -moz-osx-font-smoothing: grayscale; /* Firefox */
  -webkit-font-smoothing: antialiased; /* WebKit */
  top:142px;
  left:-30px;
  transform: rotate(270deg)
}
#d {
  position:absolute;
  top:70px;
  left:70px;
  transform: rotate(180deg);
  writing-mode: tb-rl;
}

Image showing the problem

The above image demonstrates my attempts. Does anyone know how to force this render correctly?

Solution

  • After further investigation it appears that the font rendering looks ok on all angles of rotation except for 90 and 270 degrees. Altering this by .1 degree seems to be sufficient to fix the rendering of the text.

    ie.

    transform: rotate(270.1deg)