Diese Seite wurde von der Cloud Translation API übersetzt.

Kantenglättung 101

Paul Lewis

Einleitung

Die Kantenglättung ist so etwas wie ein stiller Held in Webgrafiken. Aus diesem Grund haben wir auf unseren Bildschirmen klaren Text und glatte Vektorformen. Heutzutage gibt es in Browsern tatsächlich eine Reihe von Ansätzen zum Kantenglätten, die bei der Textdarstellung am offensichtlichsten sind. Der Algorithmus für die Antialisierung von Schaltern kann zu unerwarteten visuellen Ergebnissen führen. In diesem Artikel werfen wir einen Blick auf die Ansätze zum Kantenglättung und sehen uns an, wie die Pixel gezeichnet werden.

Alle unsere Bildschirme bestehen, wie wir alle wissen, aus Pixeln. Es besteht aus einem riesigen Raster von Blöcken, von denen jeder rote, grüne und blaue (RGB) Komponenten enthält. Aus der Ferne sehen wir Bilder, Text und Symbole, aber aus der Nähe sehen wir das Raster der RGB-Komponenten und ihre Zusammensetzung.

Nahaufnahme der Pixel eines Bildschirms. Jedes Pixel hat rote, grüne und blaue Komponenten. — Abbildung 1 – Nahaufnahmen der Pixel eines Bildschirms. Jedes Pixel besteht aus roten, grünen und blauen Komponenten.

Kantenglättung

Was passiert, wenn wir eine Vektorform zeichnen, die durch einen „Teil“ eines Pixels verläuft? Nehmen wir an, dass die von uns gezeichnete Form schwarz und der Hintergrund weiß ist. Sollten wir dieses Pixel überhaupt färben? Wenn wir es einfärben, welche Farbe soll es haben? Schwarz, Grau oder etwas anderes?

Durch die Kantenglättung wird bestimmt, welche Farbe beim Füllen von Pixeln verwendet werden soll. Die einfachste Variante davon heißt Graustufen-Antialiasing. Sie behandelt die drei Komponenten der Pixel gleich. Wenn also das Pixel halb verdeckt ist – und für eine Sekunde schwarzer Text auf Weiß gehen – sollte man annehmen, dass jede Komponente auf halbe Helligkeit eingestellt ist (ich weiß, das habe ich ja), aber tatsächlich ist es komplexer: Sie müssen den Gammawert berücksichtigen, was bedeutet, dass Sie ihn wahrscheinlich nie auf diesen genauen Wert festlegen. Das macht die Dinge natürlich ein wenig komplizierter, aber da es sich um eine Einführung in das Thema handelt, werde ich hier nicht darauf eingehen. Wichtig zu wissen ist, dass das Graustufen-Antialiasing auf Pixelebene behandelt wird, was in Wirklichkeit viel besser ist.

Abbildung 2 - Kantenglättung und harte Kanten — Abbildung 2 – Kantenglättung im Vergleich zu harten Kanten

In Abbildung 2 sehen Sie, wie dasselbe Dreieck gezeichnet wird. Auf der linken Seite ist jedoch die Kantenglättung aktiviert und auf der rechten Seite deaktiviert. Wenn das Antialiasing aktiviert ist, werden die Pixel in Grautönen dargestellt, wenn das Dreieck nur durch einen Teil des Pixels verläuft. Wenn diese Option deaktiviert ist, wird das Pixel entweder durchgehend schwarz oder durchgehend weiß ausgefüllt und die Form sieht gezackt aus.

Textrendering

Immer wenn ein Browser Text rendert, bei dem es sich im Wesentlichen um eine Vektorform handelt, stoßen wir auf dasselbe Problem: Die Textzeichen füllen nur einen Teil der Pixel aus. Daher benötigen wir eine Strategie, um diese Pixel zu füllen. Idealerweise sollte der Text mit Kantenglättung versehen werden, da er so leichter und angenehmer zu lesen ist.

Allerdings stellt sich heraus, dass der Graustufenansatz beim Antialiasing nur eine Möglichkeit ist, diesem Problem zu begegnen. Ein häufig gewählter Ansatz besteht darin, bei der Aktivierung der RGB-Komponenten der Pixel etwas selektiver vorzugehen. Dieses Verfahren wird als Subpixel-Antialiasing bezeichnet und im Laufe der Jahre hat insbesondere das ClearType-Team bei Microsoft viel Zeit und Mühe investiert, um Fortschritte zu erzielen. Mittlerweile ist sie viel weiter verbreitet und wird von allen gängigen Browsern mehr oder weniger genutzt.

Erstens: Da wir wissen, dass jedes Pixel aus separaten roten, grünen und blauen Komponenten besteht, ermitteln wir, welcher Anteil dieser Komponenten für das betreffende Pixel "eingeschaltet" sein sollte. Wenn also ein Pixel auf der linken Seite zur Hälfte verdeckt ist, schalten wir die rote Komponente vollständig ein, die grüne Komponente auf die Hälfte und lassen das Blau deaktiviert. Dieser Vorgang wird oft als „Verdreifachung der horizontalen Auflösung des Bildschirms“ beschrieben und beruht auf der Tatsache, dass jedes Pixel wirklich die drei separaten Komponenten nebeneinander und nicht eine einzelne Einheit darstellt.

Abbildung 3 - Kantenglättung mit Graustufen und Subpixeln — Abbildung 3 – Kantenglättung mit Graustufen oder Subpixeln

In Abbildung 3 oben sehen Sie, dass auf der linken Seite jede Komponente gleich behandelt und jede gleich ein- oder ausgeschaltet ist (Graustufe). Auf der rechten Seite verwenden wir jedoch den Subpixel-Ansatz, bei dem jede Komponente (rot, grün und blau) unterschiedlich aktiviert wird, je nachdem, wie sehr sie sich mit der zu zeichnenden Form überschneidet.

Trotz allem wiegt das menschliche Sehen rotes, grünes und blaues Licht jedoch nicht in gleichem Maße. Wir reagieren viel empfindlicher auf Grün als auf Rot oder Blau. Das bedeutet, dass das Graustufen-Antialiasing zwar definitiv vorteilhaft ist, wie Darel Rex Finley anmerkt, aber die Klarheit der einzelnen Komponenten nicht tatsächlich verdreifacht. Das Subpixel-Antialiasing ist jedoch auf jeden Fall hilfreich und bedeutet, dass wir Text deutlicher sehen können als mit Graustufen-Antialiasing.

Abbildung 4: Antialiased-Text für Subpixel Einzelne Komponenten der Pixel können aktiviert werden, um den Gesamteffekt zu erzeugen — Abbildung 4 – Antialiased-Text für Subpixel. Es werden einzelne Komponenten der Pixel aktiviert, um den Gesamteffekt zu erzeugen.

Ganz am Anfang

Was bedeutet das alles für uns als Entwickler? Aus Chrome-Perspektive wird für das Rendern von Text zumindest eine Mischung aus Graustufen und Subpixel-Antialiasing verwendet. Welche Sie erhalten, hängt von einigen Kriterien ab. Zunächst müssen wir jedoch ein wenig über die Ebenen erfahren, da dies das Hauptkriterium ist. Falls Sie noch nicht auf Ebenen stoßen, die Sie nicht kennen und wie sie in Chrome intern verwendet werden, hat Tom Wiltzius eine fantastische Einführung zu diesem Thema verfasst, die Sie zuerst lesen sollten.

Wenn Sie sich mit Ebenen auskennen oder die Sie gerade erst gelesen haben, machen wir mit dem nächsten Schritt weiter. Wenn die Hardware-Compositing-Funktion für die Seite aktiviert ist und sich Textinhalte auf einer Ebene befinden, die nicht die Stammebene ist, wird sie standardmäßig mit Antialiasing in Graustufen gerendert. Entwickler stellen häufig fest, dass sie feststellen, dass der Text anders gerendert wird, wenn sie Elemente hacken, um sie in ihre eigenen (nicht Stamm-)Ebenen zu verschieben (wie beispielsweise bei der Verwendung von „translateZ“). Oftmals wenden Entwickler über JavaScript oder CSS Trigger für neue Ebenen an, wodurch das Text-Rendering vom Subpixel zu Graustufen wechselt. Wenn Sie nicht wissen, was die Rendering-Änderung ausgelöst hat, kann es verwirrend sein. Wenn sich der Text in der Stammebene befindet, sollte er jedoch mit Subpixel-Antialiasing gerendert werden, wodurch er viel klarer zu lesen ist.

Aber wie alles im Web verändert sich auch das Web. Das Subpixel-Antialiasing wird in Chrome für Text in Nicht-Stammebenen aktiviert, sofern die Ebene drei Kriterien erfüllt. Diese Kriterien gelten zwar heute, sie werden sich aber wahrscheinlich ändern und im Laufe der Zeit werden weitere Fälle abgedeckt. Diese Kriterien lauten heute:

Die Ebene hat eine vollständig deckende Hintergrundfarbe. Wenn border-radius oder ein nicht standardmäßiger background-clip-Wert verwendet wird, wird die Ebene als nicht deckend behandelt und das Textrendering wird auf das Graustufen-Antialiasing zurückgesetzt.
Auf die Ebene kann nur entweder eine Identitätstransformation oder eine integrale Übersetzung angewendet werden. Mit Integral meinen wir gerundete Werte. Beispielsweise würde translate(20.2px, 30px) zu einem Graustufen-Antialiasing führen, da die x-Komponente, 20.2px, nicht ganzzahlig ist. Die Identitätstransformation bedeutet einfach, dass neben der Standardeinstellung keine weitere Rotation, Übersetzung oder Skalierung angewendet wird.
Die Ebene hat eine Deckkraft von 1,0. Bei jeder Änderung der Deckkraft ändert sich die Kantenglättung vom Subpixel zu Graustufen.

Abbildung 5 – Vorher und nachher: Graustufen im Vergleich zu Subpixel. Achten Sie auf die farbige Umrandung des Textes auf der rechten Seite.

Eine letzte Sache ist, dass das Anwenden einer CSS-Animation dazu führen kann, dass eine neue Ebene erstellt wird, was bei der Verwendung von requestAnimationFrame nicht der Fall ist. Bei einigen Entwicklern schließen die Unterschiede beim Textrendering, die implizieren, CSS-Animationen aus. Wenn Sie also aufgrund von Unterschieden beim Textrendering Elemente mit JavaScript animieren, prüfen Sie, ob dieses Update das Problem für Sie löst.

Und das ist Chrome. Was andere Browser angeht, sollte Opera bei der Umstellung auf Chromium dem Verhalten von Chrome sehr ähnlich sein. Internet Explorer verwendet Subpixel-Antialiasing für praktisch den gesamten Text (wenn Sie ClearType aktiviert haben), auch wenn der Metro-Modus von Windows 8 anscheinend nicht funktioniert. Aufgrund der Nähe von WebKit zu Blink verhält sich Safari sehr ähnlich wie Chrome, allerdings ohne diese neueren Verbesserungen, die mehr Subpixel-Antialiasing ermöglichen. Firefox verhält sich weitgehend gleich wie Internet Explorer, da es Subpixel-Antialiasing für nahezu den gesamten Text verwendet. Natürlich ist dies keine vollständige Liste und es gibt wahrscheinlich Fälle, in denen alle Browser das Antialiasing in Graustufen anstelle von Subpixeln verwenden. Es ist jedoch gut zu wissen, dass das Antialiasing für Subpixel in den wichtigsten Browsern weit verbreitet ist.

Fazit

Jetzt wissen Sie ein wenig darüber, wie das Kantenglättung funktioniert und warum Sie aktuell möglicherweise Unterschiede beim Textrendering auf Ihren Websites und in Ihren Anwendungen feststellen, insbesondere auf Geräten mit niedrigerem DPI-Wert. Wenn Sie mehr über die Implementierung von Chrome im Hinblick auf das Textrendering erfahren möchten, sollten Sie die folgenden Fehler markieren: