201208Feb

Webdesign: CSS-Probleme mit GDI und DirectWrite

Die Welt des Webdesigns hat sich dank individueller Schriftarten durch "@font-face" zum Guten verändert, da Designer nicht mehr auf Systemschriftarten angewiesen sind. Inzwischen unterstützen alle modernen Browser Möglichkeiten, um Schriftarten per "@font-face" in CSS einzusetzen. Das Problem: Browserhersteller beginnen, die Methode zur Darstellung von Schriftarten zu ändern. Das betrifft alle Windows-Systeme ab Windows Vista, denn hier wurde für die ClearType-Darstellung neben der bisher verwendeten GDI-API die Direct2D-API bzw. DirectWrite-API eingeführt. Dadurch ist ein hardwarebeschleunigtes Rendering (also durch die GPU) im Browser möglich. DirectWrite wird in Firefox seit Version 4 und in Internet Explorer seit Version 9 unterstützt. Nur in Chrome kommt bis zum aktuellen Zeitpunkt (Version 16) noch das GDI-Rendering zum Einsatz. Der Safari-Browser ist von dem Dilemma nicht betroffen, da Mac OS X ein eigenes Font-Rendering (Core Text) besitzt. Dafür gibt es ein ähnliches Problem zwischen der Windows- und Mac-Version.
Das eigentliche Problem besteht nun darin, dass die Darstellung von Schriftarten abweicht. Je nachdem, ob die GDI- oder DirectWrite-API verwendet wird, können Abweichungen in Texten entstehen.

Webdesign - CSS-Probleme mit GDI und DirectWrite

In diesem Eintrag bei Stack Overflow wird der Effekt noch einmal deutlich. Wer das Ganze selbst testen möchte, kann dazu auf ein bestehendes jsFiddle-Snippet zurückgreifen. Der springende Punkt ist nun, dass das neue DirectWrite-Rendering ab Firefox 4 und Internet Explorer 9 automatisch aktiviert ist. Läuft der Text aus dem Snippet also über die graue Fläche hinaus, wird DirectWrite und damit Hardwarebeschleunigung verwendet.

In Firefox lässt sich die Verwendung von Direct2D/DirectWrite über das Menü (Extras -> Einstellungen -> Erweitert -> Allgemein -> Hardware-Beschleunigung verwenden, wenn verfügbar) deaktivieren.

Firefox - Hardware-Beschleunigung verwenden, wenn verfügbar

Alternativ kann dieser Schritt auch über "about:config" durch das Setzen von "gfx.direct2d.disabled" auf "true" bewerkstelligt werden. In Internet Explorer 9 kann DirectWrite ebenfalls in den Internetoptionen deaktiviert werden. In beiden Browsern ist ein Neustart erforderlich. Das Deaktivieren der Direct2D-API hat übrigens nichts mit WebGL zu tun, da die Hardwarebeschleunigung hier durch OpenGL gewährleistet wird.
Sichtbare Unterschiede können an beliebigen Stellen auftauchen, denn die eigentliche Ursache liegt im Subpixel-Anti-Aliasing: ClearType-Schriften erhalten mit Direct2D eine andere Kantenglättung (Anti-Aliasing) als mit der GDI-Methode. Die Direct2D-Methode ist vergleichbar mit der Darstellung in Photoshop, da auch hier Graufstufen für das Anti-Aliasing verwendet werden. Die Thematik wird sehr gut in diesem Blog-Eintrag von Mozilla-Entwickler John Daggett beschrieben. Er stellt zudem ein Tool namens "Subpixel Text Explorer" bereit, mit dem sich die Unterschiede der beiden Font-Rendering-Methoden testen lassen. Mozilla hat das Problem der Darstellungsunterschiede erkannt und seit Firefox 7 sind in den Einstellungen System-Schriftarten definiert, für die noch das GDI-Rendering verwendet werden soll.

Firefox - GDI-Rendering für System-Schriftarten

Problematisch an der Geschichte ist nun, dass die meisten Benutzer und Website-Besucher die Standardeinstellungen ihrer Browser verwenden werden. Zudem unterstützt Googles Chrome das neue Rendering noch nicht und daher müssen Anpassungen vorgenommen werden, die sowohl für die GDI- als auch für die DirectWrite-Darstellung gelten. Leider liegt hier das Problem, denn es gibt keine Browserweiche oder Fallbacks. Auch andere Webdesigner konnten das Problem schon feststellen und bei Mozilla wurden etliche Bug-Requests eingereicht. Ein Vorschlag bestand zudem darin, das CSS-Attribut "text-rendering" dazu zu verwenden, um DirectWrite gezielt ein- und auszuschalten. Von Mozillas Seite wurde das allerdings als inakzeptabel eingestuft, da das Font-Rendering bzw. die Hardwarebeschleunigung vom Benutzer selbst gewählt werden können soll.

Abschließend bleibt festzuhalten, dass bei auftretenden Problemen Kompromisse eingegangen werden müssen. Es wird noch eine Zeit dauern, bis wirklich alle Browser unter Windows die Direct2D-API verwenden. In Firefox können durch Direct2D überhaupt erst "@font-face"-Schriftarten dargestellt werden — wird die Hardwarebeschleunigung wie oben beschrieben deaktiviert, können nur noch System-Schriftarten angezeigt werden. Entsprechend müssen die Font-Stacks einer Website ausgelegt sein, damit hier einigermaßen gleiche Darstellungen erzielt werden. In Internet Explorer 8 hingegen können individuelle Schriftarten auch ohne DirectWrite dargestellt werden und hier ergeben sich etliche Szenarien, die je nach Projekt analysiert werden müssen.