Textqualität bei "-webkit-transform: rotate" verbessern


Unterer Bereich: Antialiasing mittels "translate3d(0,0,0)" in der Eigenschaft "-webkit-transform: rotate"

Das Problem?

Das Problem bei der ganzen Sache ist, dass standardmäßig kein Antialiasing für mittels rotate() gedrehte Texte aktiviert ist. Das hat zur Folge, dass der Text pixelig und uneben wirkt. Kein Zustand, den man auf einer Website präsentieren kann.

Die Lösung!

Die Lösung ist im Prinzip ganz einfach: dem Wert für "-webkit-transform" muss noch ein weiterer Wert zugewiesen werden, damit das Antialiasing für gedrehte/geneigte Textelemente aktiviert wird. Der Unterschied ist beachtlich!

Der Code zum Kopieren:

/* löst das Problem in aktuellen (Webkit-) Browsern */
.my-rotary-font-container {
  -webkit-transform: rotate(-10deg) translate3d(0,0,0);
}
/* falls das allein nicht reicht, hilft zusätzlich oder alternativ "-webkit-backface-visibility: hidden;" */
.my-rotary-font-container {
  -webkit-backface-visibility: hidden;
}

Hat dir der Artikel gefallen?

Werkraum News:

Titelbild zur Teamevent-News: Im Hintergrund sieht man Entwickler am Notebook, darüber ist ein Code multipliziert und das Bild ist orange eingefärbt.

Neues Jahr, neuer Code

Mit Spaß an der Arbeit und Geselligkeit, so funktionierte das Teamevent #27 bei werkraum