Unscharfe Fonts im Browser: Die Probleme von DirectWrite

Bei DirectWrite hat Microsoft einen Sinneswandel vollzogen. Alle Fonts werden in der korrekten Metrik gerendert. Der Grund liegt darin, dass es mittlerweile möglich ist, Buchstaben horizontal mit einer Genauigkeit von weniger als einem Pixel auf dem Bildschirm zu positionieren, jedenfalls sieht es für den Betrachter so aus, als ob das so wäre. Als Microsoft 1992 TrueType-Fonts in Windows 3.1 einführte, war diese Technologie des Subpixel-Renderings noch nicht bekannt. Sie bringt auch auf den damals üblichen Röhrenmonitoren keine so gravierendere Verbesserung wie auf heute verwendeten LCD-Displays.

Subpixel-Rendering wird etwa beim Anti-Aliasing von Fonts mittels ClearType verwendet. Bild 7 zeigt den Unterschied zwischen Text mit und ohne Cleartype. Beide Zeilen sind mit GDI gerendert.

Bild 7: Cleartype-Rendering mit dem GDI: Das Ergebnis sind Zeichen, die fetter und klarer wirken.

Um die Cleartype-Technik zu verstehen, ruft man sich am besten ins Gedächtnis, dass ein Monitor mit einer Auflösung von 1600 mal 1200 Pixeln eigentlich eine Auflösung von 4800 mal 1200 Pixeln hat. Das liegt daran, weil jeder Pixel aus drei nebeneinander angeordneten Subpixeln in den Grundfarben Rot, Grün und Blau besteht.

Bild 8: Quelle: Wikimedia, Autor: Richard Bartz

Bild 8 zeigt die Vergrößerung eines LCD-Displays. Man sieht sechs Subpixel, die insgesamt zwei vollwertige Pixel ergeben. Es ist möglich, einen oder zwei Subpixel anzusteuern, indem man nur eine oder zwei der drei Grundfarben verwendet.

Natürlich ist es nicht möglich, schwarze oder weiße Subpixel zu erzeugen. Dazu müssten alle drei Farben leuchten (weiß) oder dunkel bleiben (schwarz). Das resultiert in „Farbsäumen“ bei jedem Zeichen, das mit ClearType gerendert ist. Dafür wird die horizontale Auflösung scheinbar um das dreifache erhöht.

Bild 9: Vergrößerung eines mit ClearType gerenderten Fonts unter Verwendung von GDI.

Dem menschlichen Auge fallen diese Farbsäume kaum auf, weil es Kontrastunterschiede besser wahrnimmt als unterschiedliche Farben. Das liegt an der größeren Lichtempfindlichkeit der Stäbchen im Gegensatz zu den Zapfen auf der Netzhaut. Wenn man genau hinsieht, kann man sie jedoch erkennen. Deutlich werden sie in der Vergrößerung in Bild 9.

Beim Fontrendering mit DirectWrite hat Microsoft nicht nur horizontales, sondern auch vertikales Subpixel-Rendering in die Cleartype-Technologie eingeführt. Das erscheint zunächst erstaunlich, weil das technisch eigentlich nicht möglich ist. LCD-Bildschirme haben nämlich die drei Grundfarben-Subpixel nur horizontal angeordnet und nicht vertikal.

Was damit gemeint ist, erfährt man in einem Blogbeitrag von Bas Schouten, der die DirectWrite Technologie in Firefox implementiert hat. Vertikales Subpixel-Rendering wird dann relevant, wenn ein Font nicht entlang einer horizontalen Linie gerendert wird. Bild 10 zeigt, wie sich das auswirkt.

Bild 10: Text, der nicht horizontal verläuft, sieht mit DirectWrite besser aus, als mit GDI (Quelle: basschouten.com, Screenshot: ZDNet).

Eine weitere „Verbesserung" von ClearType unter DirectWrite ist das scheinbare Positionieren von Zeichen zwischen ganzen Pixeln. Mit dem GDI werden Zeichen immer auf ganze Pixel gerendert. Auch das schaut man sich am besten in einem Beispiel (Bild 11) an.

Bild 11: Ein Ausschnitt von ZDNet.de: Oben mit DirectWrite und unten mit GDI gerendert.

Der obere Teil ist mit DirectWrite gerendert, der untere mit GDI. Unter DirectWrite wirken die Zeichen generell verschwommener und kontrastärmer, während sie mit GDI klar und deutlich lesbar sind. Schaut man sich die DirectWrite-Zeichen genauer an, sieht man jedoch, dass nicht jeder Buchstabe unscharf ist. Wenn man in dem Wort „Twittergewohnheiten“ das „Doppel-t“ betrachtet, erkennt man, dass nur das linke „t“ unscharf ist. Das rechte ist gestochen scharf. Dasselbe gilt für die beiden „i“ im selben Wort. Das linke „i“ ist scharf, das rechte hingegen unscharf.

Die scharfen Buchstaben liegen zufällig an einer Position eines ganzen Pixels. Die unscharfen versucht DirectWrite mittels Subpixel-Rendering so zu positionieren, dass sie scheinbar zwischen zwei Pixeln liegen. Die Unschärfe rührt also daher, weil es nicht wirklich möglich ist, einen logischen Pixel zwischen zwei physikalischen Pixel darzustellen, jedenfalls nicht fehlerfrei.

Die Technik des Subpixel-Positioning ist durchaus beeindruckend: Bereits 2007 veröffentlichte Maxim Schemanarew ein OpenSource-Programm, dass Subpixel-Positioning von Text nur mit öffentlich verfügbarer Information ohne Nutzung von Patenten ermöglicht. Anders als Microsofts DirectWrite zeigen seine Zeichen deutlich weniger Unschärfen und Kontrastschwäche.

Bild 12: Mit Subpixel-Positioning lässt sich ein Font nahezu stufenlos horizontal verschieben (Quelle: antigrain.com, Screenshot: ZDNet).

Bild 12 zeigt einen Output von Schemanarews Programm. Der Text wird scheinbar auf ein Zehntel Pixel genau positioniert. Möglich sind sogar noch kleinere Schritte. Auch die Software von Schemanarew zeigt Unschärfen, die allerdings bei weitem nicht so stark sind wie bei DirectWrite. Auch erkennt man, dass es nahezu keine Unterschiede in der Schärfe gibt. Dass ein und derselbe Buchstabe unterschiedlich scharf dargestellt wird, ist nicht zu erkennen.

Doch auch Schemanarew kann nicht zaubern, sondern nur programmieren. Sichtbarer Nachteil seiner Methode ist, dass die Farbsäume deutlich stärker sind als bei DirectWrite.