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:

Zusammenarbeit an einem Projekt in Figma mit Multiplayer

Re­mote De­sign mit Figma

Figma ist ein All-In-One Tool für den gesamten UX/UI Design Workflow mit Features, die eine enge Zusammenarbeit ermöglichen – trotz räumlicher Trennung.