Cette page a été traduite par l'API Cloud Translation.

Anticrénelage 101

Paul Lewis

Introduction

L'anticrénelage est un héros méconnu des graphiques Web ; c'est pourquoi nous avons du texte clair et des formes vectorielles lisses sur nos écrans. Il existe actuellement quelques approches de l'anticrénelage utilisées dans les navigateurs, qui sont les plus évidentes pour le rendu de texte. L'algorithme utilisé pour antialiser les contacteurs peut produire des résultats visuels inattendus. Dans cet article, nous allons examiner les approches de l'anticrénelage et voir comment les pixels sont dessinés.

Comme nous le savons tous, tous nos écrans sont composés de pixels. Il s'agit d'une grille de blocs géante, chacun contenant des composants rouges, verts et bleus (RVB). De loin, nous voyons des images, du texte et des icônes, mais de près, nous pouvons voir la grille de composants RVB et la composition de tout.

Gros plan sur les pixels d'un écran. Chaque pixel est associé à des composants rouges, verts et bleus. — Figure 1 : Gros plan sur les pixels d'un écran Chaque pixel est associé à des composants rouges, verts et bleus.

Anticrénelage

Que se passe-t-il lorsque nous dessinons une forme vectorielle et qu'elle traverse une "partie" d'un pixel ? Supposons que la forme que nous dessinons soit noire et que l'arrière-plan soit blanc. Devons-nous attribuer une couleur à ce pixel ? Si nous le colorions, de quelle couleur devrait-il s'agir ? Noir, gris, autre chose ?

Le processus d'anticrénelage détermine la couleur à utiliser pour le remplissage des pixels. La version la plus simple est appelée anticrénelage en nuances de gris et traite les trois composants des pixels de manière égale. Par exemple, si le pixel est à moitié couvert, et prenons du texte noir sur blanc pour faire simple, vous penseriez que chaque composant sera réglé sur la moitié de la luminosité (je sais bien que c'est le cas), mais en fait, c'est plus complexe que cela: vous devez tenir compte du gamma, qui signifie que vous ne le définirez probablement jamais sur cette valeur exacte. Bien sûr, cela rend les choses un peu plus délicates, mais comme il s’agit d’une introduction au sujet, je n’y reviendrai pas ici. Ce qu'il est important de savoir, c'est que l'anticrénelage en nuances de gris est traité au niveau du pixel et que nous pouvons, au final, faire beaucoup mieux.

Figure 2 : Anticrénelage et arêtes dures — Figure 2 : Anticrénelages et arêtes dures

Dans la figure 2, le même triangle est dessiné. L'anticrénelage est activé à gauche et désactivé à droite. Comme vous pouvez le voir, lorsque l'anticrénelage est activé, les pixels prennent la forme de nuances de gris lorsque le triangle ne traverse qu'une partie du pixel. Toutefois, lorsque cette option est désactivée, le pixel apparaît soit en noir uni, soit en blanc uni, et la forme semble irrégulière.

Rendu du texte

Chaque fois qu'un navigateur affiche du texte, qui est essentiellement une forme vectorielle, nous sommes confrontés au même problème: les caractères du texte ne remplissent que partiellement certains pixels. Nous devons donc avoir une stratégie pour le remplissage de ces pixels. Dans l'idéal, le texte doit être anticrénel pour qu'il soit plus facile et plus agréable à lire.

Il s'avère toutefois que l'approche de l'anticrénelage en nuances de gris n'est que l'une des façons de le gérer. Souvent, nous adoptons une approche un peu plus sélective dans la façon d'activer les composants RVB des pixels. Ce processus s'appelle l'anticrénelage de sous-pixels. Au fil des années, l'équipe ClearType de Microsoft a notamment investi beaucoup de temps et d'efforts pour l'améliorer. Il est aujourd'hui beaucoup plus utilisé, à tel point que les principaux navigateurs l'utilisent plus ou moins.

Tout d'abord, comme nous savons que chaque pixel est en fait constitué de composants rouge, vert et bleu distincts, nous détectons la proportion de chacun de ces composants qui doit être "allumée" pour le pixel en question. Ainsi, si un pixel est "à moitié couvert" à partir du côté gauche, nous pouvons activer complètement le composant rouge, le composant vert à mi-chemin, et laisser le bleu désactivé. Ce processus est souvent décrit comme "tripler la résolution horizontale de l'écran" et repose sur le fait que chaque pixel est en fait les trois composants distincts plutôt qu'une unité.

Figure 3 : Anticrénelage à l'aide des niveaux de gris et des sous-pixels — Figure 3 : Anticrénelage à l'aide des nuances de gris et des sous-pixels

Dans la figure 3 ci-dessus, vous pouvez voir que sur la gauche, nous traitons chaque composant de manière égale, et qu'ils sont activés ou désactivés de manière égale (niveaux de gris). À droite, nous utilisons l'approche basée sur les sous-pixels, ce qui permet d'activer chaque composant (rouge, vert et bleu) différemment selon le niveau qu'il chevauche avec la forme dessinée.

Ceci étant dit, la vision humaine ne pèse pas la lumière rouge, verte et bleue de la même manière. Nous sommes beaucoup plus sensibles au vert que le rouge ou le bleu, ce qui signifie que même si l'anticrénelage en nuances de gris présente des avantages indéniables, comme l'a dit Darel Rex Finley, le fait d'activer chaque composant séparément ne permet pas réellement d'améliorer la clarté par trois. L'anticrénelage des sous-pixels est totalement utile. Cela signifie que nous voyons le texte plus clairement qu'en utilisant l'anticrénelage en nuances de gris.

Figure 4 : Texte anticrénelage sous-pixel. Chaque composant des pixels est activé pour créer l'effet global. — Figure 4 – Texte anticrénelage sous-pixel. Chaque composant des pixels est activé pour créer l'effet global.

Avancer dans le vif du sujet

Qu'est-ce que cela signifie pour nous, en tant que développeurs ? Du point de vue de Chrome, il existe au moins une combinaison d'anticrénelage en nuances de gris et en sous-pixels pour afficher le texte. L'anticrénelage que vous obtenez dépend de plusieurs critères. Toutefois, pour commencer, nous devons nous pencher sur les couches, car il s'agit du critère principal en jeu. Si vous n'avez pas vu les couches et la façon dont elles sont utilisées en interne par Chrome, Tom Wiltzius a écrit une excellente introduction à ce sujet, que nous vous recommandons de lire en premier.

En supposant que vous les connaissiez déjà, ou que vous soyez déjà au courant de leur fonctionnement, poursuivons. Si la composition matérielle est activée pour la page et que vous avez du contenu textuel sur un calque qui n'est pas le calque racine, il sera affiché par défaut avec l'anticrénelage en nuances de gris. Les développeurs remarquent souvent que s'ils appliquent des techniques de piratage à des éléments afin de les placer dans leurs propres calques (autres que racine), comme traduireZ, ils constatent que le texte s'affiche différemment. Souvent, les développeurs appliquent des déclencheurs de "nouvelle couche" à la volée via JavaScript ou CSS, entraînant le passage du rendu du texte des sous-pixels aux nuances de gris. Cela peut prêter à confusion si vous ne savez pas ce qui a déclenché le changement de rendu. Toutefois, si votre texte se trouve dans la couche racine, il doit être affiché avec un anticrénelage des sous-pixels, et sa lecture sera donc beaucoup plus claire.

Mais le Web est en train d'évoluer. L'anticrénelage de sous-pixels est activé dans Chrome pour le texte des couches non racines, à condition que la couche réponde aux trois critères. Ces critères s'appliquent dès aujourd'hui, mais il est probable qu'ils changent. Attendez-vous à ce que le nombre de cas traités soit davantage au fil du temps. Aujourd'hui, ces critères sont les suivants:

La couleur d'arrière-plan du calque est totalement opaque. L'utilisation de border-radius ou d'une valeur background-clip autre que celle par défaut entraîne le traitement du calque comme non opaque, et le rendu du texte revient à l'anticrénelage en niveaux de gris.
La couche ne peut être appliquée qu'à une transformation d'identité ou à une traduction intégrale. Par intégrale, nous entendons des valeurs arrondies. Par exemple, translate(20.2px, 30px) génère un anticrénelage en nuances de gris, car le composant x, 20.2px, n'est pas intégrant. La transformation d'identité signifie simplement qu'aucune rotation, translation ou mise à l'échelle supplémentaire n'est appliquée au-delà de la valeur par défaut.
L'opacité du calque est de 1.0. Toute modification de l'opacité fait passer l'anticrénelage du sous-pixel au niveau de gris.

Figure 5 – Avant et après: niveaux de gris et sous-pixel Notez le contour de couleur sur le texte à droite — Figure 5 – Avant et après: niveaux de gris et sous-pixel Notez le contour de couleur sur le texte situé à droite.

Dernière chose : l'application d'une animation CSS peut entraîner la création d'un calque, contrairement à requestAnimationFrame. Pour certains développeurs, les différences de rendu du texte qui l'impliquent empêchent l'utilisation d'animations CSS. Par conséquent, si vous utilisez JavaScript pour animer des éléments en raison de différences d'affichage du texte, vérifiez si cette mise à jour résout vos problèmes.

Voilà pour Chrome. En ce qui concerne les autres navigateurs, Opera, lorsqu'il sera transféré vers Chromium, devrait s'adapter aux comportements de Chrome. Internet Explorer semble utiliser l'anticrénelage de sous-pixels pour pratiquement tout le texte (si vous avez activé ClearType, bien sûr !), bien qu'il ne semble pas être en mode Metro de Windows 8. Compte tenu de la proximité de WebKit avec Blink, Safari se comporte de manière très semblable à Chrome, mais sans ces nouvelles améliorations qui permettent un anticrénelage de sous-pixels plus important. Firefox se comporte en grande partie de la même manière qu'Internet Explorer, dans la mesure où il utilise l'anticrénelage des sous-pixels pour pratiquement tout le texte. Cette liste n'est évidemment pas exhaustive. Il est possible que, dans tous les navigateurs, l'anticrénelage en nuances de gris soit utilisé à la place du sous-pixel. Toutefois, il est bon de savoir que l'anticrénelage des sous-pixels est largement utilisé dans la plupart des navigateurs.

Conclusion

Vous en savez maintenant un peu plus sur le fonctionnement de l'anticrénelage et sur les raisons pour lesquelles vous pourriez constater des différences de rendu du texte sur vos sites et applications aujourd'hui, en particulier sur les appareils à PPP faible. Si vous souhaitez suivre l'implémentation de Chrome concernant le rendu du texte, vous devez ajouter les bugs suivants à vos favoris: