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:

Such­ser­ver für TYPO3 im Ver­gleich

Folgendes Problem: Der Kunde möchte eine Suche auf der Firmenwebseite haben und als TYPO3-Entwickler steht man vor der Frage, welche Suche man dem Kunden empfiehlt. Für alle,...