Unschöner Text bei CSS3-Transformationen

Textdarstellung bei Transformationen - oben unschön, unten verbessert

Wenn man Textinhalte mit transform dreht, führt das in manchen Browsern wie dem Firefox zu einer unschönen Textdarstellung. Zoltan Dulac, bekannt etwa von seinem Transform Translator, der CSS3-Transformationen in Filterangaben für Uralt-IEs umrechnet, hat eine schöne und – das ist besonders schön – sehr einfache Lösung für das Problem der unschönen Schrift (http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/). Es genügt, dem Element zusätzlich einen Tick Perspektive zu geben.

Ursprünglich:

-webkit-transform: rotate(20deg);
-ms-transform:  rotate(20deg);
transform:  rotate(20deg);

Jetzt mit Anwendung des Tricks:

-webkit-transform: perspective(1px) rotate(20deg) ;
-ms-transform: rotate(20deg);
transform: perspective(1px) rotate(20deg);

Die perspective-Angabe fehlt bewusst bei -ms-, weil der IE9 zwar CSS3-2D-Transformationen unterstützt, aber nicht die 3D-Transformationen – und mit perspective haben wir technisch gesehen eine 3D-Transformation. Damit der IE9 die Drehung interpretiert, muss man deswegen auf die perspective verzichten. Genauso müsste man auch für den Opera vor 12.1 die 2D-Transforms-Angabe -o-transform: rotate(20deg) schreiben, worauf ich verzichtet habe, weil das für den Opera ab 12.1 nicht mehr notwendig ist.

Hier gibt es das Beispiel auch zum Ausprobieren bei jsfiddle.

Das ist übrigens nicht die einzige Lösung für das Problem. Eine weitere Möglichkeit besteht in der Verwendung von SVG-Filtern.

Kommentare sind geschlossen.