Unscharfe Fonts im Browser: Die Probleme von DirectWrite

Hardwarebeschleunigung durch die Grafikkarte ist ein Feature, mit dem Google, Microsoft und Mozilla die Nutzer von ihren Browsern überzeugen wollen. Die aktuellen Betas von Chrome, Firefox und Internet Explorer nutzen die GPU der Grafikkarte, um Inhalte auf den Bildschirm zu bringen.

Wichtig ist das vor allem bei dynamischen Websites, die mit Javascript arbeiten. Wenn sich der Bildschirminhalt ständig ändert, sollte das in akzeptabler Geschwindigkeit passieren. Die Browserhersteller zeigen dazu zahlreiche Anwendungsfälle.

Microsoft hat etwa auf seiner IE9-Website Demos zusammengestellt, die demonstrieren, wie wichtig Hardwarebeschleunigung ist. Insbesondere in Verbindung mit HTML5-Elementen, etwa Canvas, lassen sich viele Dinge realisieren, die bisher nur mit Flash möglich waren. Ein schönes Beispiel dafür ist das Asteroid-Game von Kevin Roast, das es auch in einer Benchmark-Version gibt.

Es ist also keine Frage, dass Hardwarebeschleunigung im Browser neue Anwendungsfelder eröffnet, bei denen Softwarerendering einfach zu langsam ist. Allerdings gibt es Probleme, wo man eigentlich keine vermutet, nämlich beim Rendering von Fonts. Die Probleme treten derzeit nur in den Betas von IE9 und Firefox 4 unter Windows auf. Chrome ist nicht betroffen.

Der Grund liegt darin, dass IE9 und Firefox 4 bei aktivierter Hardwarebeschleunigung Direct2D und DirectWrite verwenden. Die aktuellen Chrome-Betas setzen hingegen OpenGL ein. Das für das Fontrendering verantwortliche DirectWrite-API nutzt eine neue Technik bei der Darstellung von Fonts, die zu einer anderen Metrik der fertig gerenderten Fonts führt, als dies bei den traditionellen APIs GDI und GDIplus der Fall ist. Den Unterschied zeigen die Bilder 1 und 2.

ZDNet hat über das Problem bereits berichtet. Es ist sofort offensichtlich, dass die Schrift in den drei untersten Zeilen enger wirkt. Sie sieht ziemlich „gestaucht“ aus. Aber auch der hellblaue Vorspanntext unter der Überschrift hat eine andere Metrik. In Bild 1 geht die erste Zeile bis zum Wort „IPv6“. In Bild 2 hingegen kommt noch das Wort „für“ hinzu. Das ganze pflanzt sich bis in die fünfte Zeile fort. In Bild 1 beginnt sie mit den Wörtern „um es“, während sie in Bild 2 erst bei „ohne“ beginnt.