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.
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: 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.
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).
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.
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: 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.

Themenseiten: Betriebssystem, Browser, Business-Software, Chrome, Firefox, Internet Explorer, Microsoft, Software, Windows

Fanden Sie diesen Artikel nützlich?
Content Loading ...
Whitepaper

Artikel empfehlen:

Neueste Kommentare 

6 Kommentare zu Unscharfe Fonts im Browser: Die Probleme von DirectWrite

Kommentar hinzufügen
  • Am 27. November 2016 um 20:32 von locop chun

    diese schrift im kommentarfeld
    “ Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *
    Kommentar “
    ist kaum noch zu lesen !

  • Am 29. Juni 2011 um 7:29 von Daniel Melanchthon [MSFT]

    Fix für unscharfe Schriftdarstellung in Internet Explorer 9 jetzt verfügbar
    Viele Anwender haben in der Vergangenheit die Darstellung kleiner Schriftgrößen im Internet Explorer 9 besonders bei niedrigen Bildschirmauflösungen kritisiert: Subpixel-Positionierung mit DirectWrite (IE9, Firefox) vs. pixelgenaue Positionierung über GDI (IE8, Chrome)

    Während die einen Cleartype und Subpixel-Positionierung besser lesbar finden, präferieren andere die eckige Darstellung ohne Cleartype & Co und kritisieren “blurry fonts”.

    Am 27.06.2011 haben wir nun eine Aktualisierung der Schriftarten Arial, Verdana und Tahoma für Windows Vista, Windows Server 2008, Windows 7 und Windows Server 2008 R2 an, um diesen Konflikt zu entschärfen: http://bit.ly/jll76a

    Viele Grüße,
    Daniel Melanchthon
    Microsoft Deutschland GmbH

  • Am 16. März 2011 um 17:15 von JP

    In einigen Fällen hat es aber auch Vorteile
    Ich habe das ganze noch nie als unscharf empfunden. Vielleicht bin ich auch nur die Darstellung von OS X gewohnt. Dort war das schon immer so. GDI-Glättung sieht von den Standardschriften abgesehen oft sehr grausam aus. IE9 – eigentlich bereits IE4 (das Format war aber sehr exotisch) – beherrscht Webfonts, die nachgeladen werden. Ohne vernünftige Glättung sind viele Seiten bei denen der Gestalter mal etwas Abwechslung zu Arial, Times New Roman, Verdana, Tahoma und Konsorten liefern recht schlecht lesbar. Das alte ClearType (ohne Direct2D/Write) wurde für Screenreader unter WindowsCE entwickelt und setzt auf Hinting welches speziell vorbereitete Fonts so manipuliert, dass der Eindruck entsteht sie wären schärfer. Ohne Hints wird die Glättung gegenüber GDI verbessert aber der volle Effekt ist nicht da. Außer bei einer Hand voll Windows-Bildschirmschriftarten kommt dieser Vorteil nicht zu tragen. Die Veränderung hilft natürlich in anderen Anwendungen (z. B. DTP) bei der Vorabbeurteilung eines Layout (es sei denn es ist ein E-Book) nicht wirklich weiter. In meinen Augen ist das Ganze Geschmackssache. Ich persönlich fand die GDI-Schriftglättung (war nie für LCDs gedacht) in Windows XP furchtbar pixelig (ClearType (klassische Version) musste erst aktiviert werden, danach ging es besser).

  • Am 7. Februar 2011 um 17:57 von Miko

    Update
    Microsoft hat mittlerweile ein Update herausgebracht (welches AFAIK Bestandteil von Windows 7 SP1 ist), welches die Schärfe von hellem Text auf dunklen Grund verbessert, das sieht dann also nicht mehr so aus wie auf dem Screenshot im Teil 1.

    Die Nutzer mit 19-Zoll-Bildschirmen mit 1280×1024-Auflösung tun mir Leid, da lob ich mir meine 137 PPI.

    • Am 15. März 2011 um 18:14 von Roger

      AW: Update
      Ich habe das Problem auch bei Chrome. Jetzt hab ich das Service Pack 1 installiert und es hat kaum etwas geholfen. Solange die Schriftdarstellung nicht wie gewohnt ist, werde ich die Hardwarebeschleunigung (leider) deaktivieren müssen, die Darstellung ist schlicht inakzeptabel, hoffentlich wird dieses Problem bald gelöst, es sind ja sehr viele Nutzer davon betroffen.

      • Am 16. März 2011 um 18:34 von Miko

        AW: AW: Update
        Chrome verwendet GDI, also das was IE8 und davor verwendete. Der einzige andere Browser der auch DirectWrite unterstützt ist Firefox 4 mit aktivierter Hardwarebeschleunigung oder gesetztem gfx.font_rendering.directwrite.enabled Flag.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *