Diese Seite wurde von der Cloud Translation API übersetzt.

Kantenglättung 101

Paul Lewis

Einleitung

Kantenglättung ist bei Webgrafiken so etwas wie ein stilles Hero-Image. Dies ist der Grund, weshalb wir auf unseren Bildschirmen klaren Text und weiche Vektorformen haben. Es gibt tatsächlich einige Ansätze zum Antialiasing in Browsern, die beim Text-Rendering am offensichtlichsten sind. Wenn der Algorithmus für die Antialisierung von Schaltern zu unerwarteten visuellen Ergebnissen führen kann. In diesem Artikel werfen wir einen Blick auf die Ansätze zum Antialiasing und wie die Pixel gezeichnet werden.

Alle unsere Bildschirme bestehen, wie wir alle wissen, aus Pixeln. Es besteht aus einem riesigen Raster von Blöcken, die jeweils rote, grüne und blaue (RGB)-Komponenten enthalten. Aus der Ferne sehen wir Bilder, Text und Symbole, aber aus nächster Nähe sehen wir das Raster der RGB-Komponenten und wie die einzelnen Elemente zusammengefügt sind.

Pixel eines Bildschirms in Nahaufnahme. Jedes Pixel hat rote, grüne und blaue Komponenten. — Abbildung 1: Pixel eines Bildschirms aus der Nähe. Jedes Pixel hat rote, grüne und blaue Komponenten.

Kantenglättung

Was passiert also, wenn wir eine Vektorform zeichnen und durch einen Teil eines Pixels durchlaufen? Nehmen wir an, dass die gezeichnete Form schwarz und der Hintergrund weiß ist. Sollten wir dieses Pixel überhaupt färben? Wenn wir es färben, welche Farbe soll es dann haben? Schwarz, grau, etwas anderes?

Der Prozess des Kantenglättens bestimmt, welche Farbe beim Ausfüllen der Pixel verwendet werden soll. Die einfachste Version davon wird als Graustufen-Antialiasing bezeichnet. Dabei werden die drei Komponenten der Pixel gleich behandelt. Wenn das Pixel also zur Hälfte verdeckt ist – nehmen wir für eine Sekunde einfach schwarzer Text auf weiß auf –, würde man denken, dass jede Komponente auf die halbe Helligkeit gesetzt wird (ich weiß, natürlich), aber in Wirklichkeit ist es komplexer: Sie müssen Gamma berücksichtigen, was bedeutet, dass Sie es wahrscheinlich nie auf diesen genauen Wert einstellen werden. Das macht die Sache natürlich etwas schwieriger, aber da es sich um eine Einführung in das Thema handelt, gehe ich hier nicht darauf ein. Wichtig zu wissen ist, dass das Antialiasing in Graustufen auf Pixelebene behandelt wird, sodass wir das sogar viel besser machen können.

Abbildung 2 – Kantenglättung und harte Kanten

In Abbildung 2 sehen Sie, wie dasselbe Dreieck gezeichnet wird, aber auf der linken Seite ist Kantenglättung aktiviert und auf der rechten Seite deaktiviert. Wie Sie sehen, sind die Pixel bei aktiviertem Antialiasing Grauschattierungen, wenn das Dreieck nur durch einen Teil des Pixels verläuft. Wenn diese Option deaktiviert ist, wird das Pixel entweder schwarz oder weiß ausgefüllt und die Form sieht gezackt aus.

Text-Rendering

Immer wenn ein Browser Text rendert, bei dem es sich im Wesentlichen um eine Vektorform handelt, werden wir auf das gleiche Problem stoßen: Die Zeichen des Textes füllen nur einen Teil der Pixel aus. Daher brauchen wir eine Strategie, wie diese Pixel gefüllt werden. Idealerweise sollte der Text einen Alias haben, da er leichter und angenehmer zu lesen ist.

Es stellt sich jedoch heraus, dass der Graustufen-Ansatz beim Antialiasing nur eine Möglichkeit ist, dies zu handhaben. Ein häufig verwendeter Ansatz besteht darin, bei der Aktivierung der RGB-Komponenten der Pixel etwas selektiver zu sein. Dieser Prozess wird als Subpixel-Antialiasing bezeichnet und im Laufe der Jahre hat insbesondere das ClearType-Team bei Microsoft viel Zeit und Mühe investiert. Es ist mittlerweile weitaus verbreiteter und von allen gängigen Browsern mehr oder weniger verwendet.

Erstens: Da wir wissen, dass jedes Pixel tatsächlich aus separaten roten, grünen und blauen Komponenten besteht, ermitteln wir, wie viel von jeder dieser Komponenten für das betreffende Pixel „eingeschaltet“ werden sollte. Wenn also ein Pixel von der linken Seite "halb bedeckt" ist, können wir die rote Komponente vollständig und die grüne Komponente zur Hälfte einschalten und das Blau deaktiviert lassen. Dieser Vorgang wird oft als "Verdreifachung der horizontalen Auflösung des Bildschirms" beschrieben und beruht auf der Tatsache, dass jedes Pixel tatsächlich die drei einzelnen Komponenten nebeneinander und nicht als eine Einheit darstellt.

Abbildung 3 ‒ Kantenglättung mit Graustufen und Subpixeln — Abbildung 3 – Kantenglättung mit Graustufen vs. Subpixeln

In Abbildung 3 oben sehen Sie, dass wir links jede Komponente gleich behandeln und jede Komponente gleich ein- oder ausschalten (Graustufen). Auf der rechten Seite verwenden wir jedoch den Subpixel-Ansatz. Dabei werden die einzelnen Komponenten (Rot, Grün und Blau) unterschiedlich aktiviert, je nachdem, wie stark sie sich mit der gezeichneten Form überschneidet.

Aber das menschliche Sehvermögen wiegt rotes, grünes und blaues Licht nicht im gleichen Maß. Wir reagieren viel empfindlicher auf Grün als entweder Rot oder Blau. Das bedeutet, dass das Graustufen-Antialiasing einen definitiven Vorteil bietet, wie Darel Rex Finley anmerkt, dass die Aktivierung jeder einzelnen Komponente nicht tatsächlich zu einer dreifachen Verbesserung der Klarheit führt. Subpixel-Antialiasing ist jedoch definitiv hilfreich und bedeutet, dass wir Text besser sehen können als mit Graustufen-Antialiasing.

Abbildung 4: Kantenglatter Text für Subpixel. Einzelne Komponenten der Pixel werden aktiviert, um den Gesamteffekt zu erzeugen. — Abbildung 4 – Kantenglatter Text für Subpixel. Einzelne Komponenten der Pixel sind aktiviert, um den Gesamteffekt zu erzeugen

Auf die Verfolgung setzen

Was bedeutet das alles für uns als Entwickler? Aus Sicht von Chrome wird zum Rendern von Text zumindest eine Mischung aus Graustufen und Subpixel-Antialiasing verwendet, und welches davon hängt von einigen Kriterien ab. Zunächst müssen wir jedoch ein wenig über Layers wissen, da dies das Hauptkriterium für das Spiel ist. Wenn Sie noch nicht auf Ebenen gestoßen sind und wie sie intern von Chrome verwendet werden, hat Tom Wiltzius eine fantastische Einführung in das Thema verfasst, die Sie als Erstes lesen sollten.

Wenn Sie bereits mit Ebenen vertraut sind oder bereits etwas darüber gelesen haben, machen wir weiter. Wenn Hardware-Zusammenstellung für die Seite aktiviert ist und sich Textinhalte auf einer Ebene befinden, die nicht die Stammebene ist, wird diese standardmäßig mit Graustufen-Antialiasing gerendert. Entwickler stellen häufig fest, dass der Text anders gerendert wird, wenn sie Elemente durch Hacks in eigene Ebenen (nicht im Stammverzeichnis) verschieben (wie bei der Verwendung von TranslateZ). Oft wenden Entwickler „neue Ebenen“-Trigger direkt über JavaScript oder CSS an, wodurch das Text-Rendering von Subpixel zu Graustufen wechselt. Es kann verwirrend sein, wenn Sie nicht wissen, was die Rendering-Änderung ausgelöst hat. Wenn sich Ihr Text jedoch auf der Stammebene befindet, sollte er mit Subpixel-Antialiasing gerendert werden, sodass er viel verständlicher ist.

Aber wie alles im Web befindet sich auch hier ein Wandel. Subpixel-Antialiasing wird in Chrome für Text auf Nicht-Root-Ebenen aktiviert, sofern die Ebene drei Kriterien erfüllt. Es sollte erwähnt werden, dass diese Kriterien heute gelten, aber wahrscheinlich ändern sich sie und es werden im Laufe der Zeit mehr Fälle abgedeckt. Heute lauten diese Kriterien:

Die Hintergrundfarbe der Ebene ist vollständig deckend. Bei Verwendung von border-radius oder eines nicht standardmäßigen background-clip-Werts wird die Ebene als nicht deckend behandelt und das Textrendering wird auf Graustufen-Antialiasing zurückgesetzt.
Auf die Ebene kann nur entweder eine Identitätstransformation oder eine ganzheitliche Übersetzung angewendet werden. Unter Integral verstehen wir gerundete Werte. translate(20.2px, 30px) führt also beispielsweise zu einem Antialiasing in Graustufen, da die x-Komponente, 20.2px, nicht ganzheitlich ist. Die Identitätstransformation bedeutet einfach, dass über die Standardeinstellung hinaus keine zusätzliche Rotation, Übersetzung oder Skalierung angewendet wird.
Die Ebene hat eine Deckkraft von 1,0. Jede Änderung der Deckkraft ändert das Antialiasing von Subpixel in Graustufen.

Abbildung 5 – Vorher und nachher: Graustufen vs. Subpixel Der farbige Rand des Textes rechts weist — Abbildung 5 – Vorher und nachher: Graustufen vs. Subpixel. Achten Sie auf die farbige Begrenzung des Textes rechts.

Zu beachten ist, dass durch die Anwendung einer CSS-Animation möglicherweise eine neue Ebene erstellt wird, was bei Verwendung von requestAnimationFrame nicht der Fall ist. Bei einigen Entwicklern ist aufgrund der Unterschiede beim Textrendering, die eine Verwendung von CSS-Animationen implizieren, ausgeschlossen worden. Wenn Sie also Elemente zum Animieren von Elementen mithilfe von JavaScript verwendet haben, weil es Unterschiede bei der Textdarstellung gibt, prüfen Sie, ob dieses Update Probleme für Sie löst.

Das war also Chrome. Bei anderen Browsern sollte Opera ebenso wie die Übertragung auf Chromium dem Verhalten von Chrome entsprechen. Internet Explorer scheint Subpixel-Antialiasing für praktisch den gesamten Text zu verwenden (wenn Sie natürlich ClearType aktiviert haben!), auch wenn es im Metro-Modus von Windows 8 anscheinend nicht der Fall ist. 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 Subpixel-Antialiasing für praktisch den gesamten Text verwendet wird. Diese Liste ist nicht vollständig und es kann in allen Browsern vorkommen, dass anstelle von Subpixeln Graustufen-Antialiasing verwendet wird. Es ist jedoch gut zu wissen, dass Subpixel-Antialiasing in den wichtigsten Browsern weit verbreitet ist.

Fazit

Jetzt wissen Sie ein wenig darüber, wie Antialiasing funktioniert und warum Sie aktuell möglicherweise Unterschiede beim Text-Rendering auf Ihren Websites und Anwendungen feststellen, insbesondere auf Geräten mit niedrigeren DPI-Werten. Wenn Sie die Implementierung von Chrome in Bezug auf das Text-Rendering verfolgen möchten, markieren Sie die folgenden Fehler: