Uniformiser l’anti-aliasing avec Type Rendering Mix

type-rendering-mix

Lors d’un projet récent de vitrine mettant en scène des objets de luxe, nous avons été confrontés à une problématique de rendu au niveau des textes, où il fallait offrir au travers d’un univers graphique raffiné une expérience utilisateur optimale.

La question était donc la suivante : “Comment forcer l’anti-aliasing sur les textes lorsque ceux-ci sont désactivés sur les OS”. Après quelques recherches, nous avons trouvé une librairie très intéressante qui fait l’objet de cet article : Type Rendering Mix.

L’anti-aliasing sur le web

Le problème

Les deux principaux facteurs qui définissent la façon dont les polices s’affichent sur les écrans sont :

  • Les informations incorporées dans les données de police (Hiting).
  • L’algorithme de rendu du système d’exploitation sur lesquelles elles sont installées. Il vous suffit d’ailleurs de faire l’expérience par vous-même avec des polices différentes, sur des OS différents et sur plusieurs navigateurs web. Vous verrez que l’aspect varie plus ou moins, que ce soit au niveau de la taille, du lissage, du graissage, …

En effet, lorsqu’un webdesigner souhaite jouer avec le contraste de l’écran, (ex: texte blanc sur fond noir) l’algorithme de rendu des OS, aussi appelé Sub-Pixel (sous-pixel), a tendance à graisser plus ou moins le texte. Cela engendre un aspect plus flou, qui peut être dans certains vraiment disgracieux.

aliasing-subpixel

Anti-aliasing méthode : Sub-Pixel

 

Par soucis de performance machine ou autre, certains utilisateurs désactivent même l’anti-aliasing. Je ne vous conseille pas de le faire car cela altère le confort de lecture, mais certains le font. Le problème est que la différence entre votre maquette PhotoShop et le rendu navigateur peut parfois être énorme dans ces conditions de navigation.

aliasing-no

Sans anti-aliasing

 

webkit-font-smoothing et moz-osx-font-smoothing

Fort heureusement, un développeur Front End de la communauté Open Source a mis en place des hacks CSS influençant directement le rendu textuel des navigateurs web. Cela concerne le moteur de rendu Webkit avec la propriété  -webkit-font-smoothing et plus récemment le moteur de rendu de Mozilla FireFox (à partir de la version 25) avec la propriété -moz-osx-font-smoothing.

L’aspect du texte plus léger, avec un niveau de gris plus atténué permet d’avoir un rendu plus net.

aliasing-grayscal

Anti-aliasing méthode : Grayscale

Cependant, comme dit précédemment, le rendu dépend directement de l’algorithme utilisé et est loin d’être homogène d’un OS à l’autre (valable également pour les versions), il faut alors intervenir au cas par cas. C’est là que la librairie Type Rendering Mix entre en jeu. 

Type Rendering Mix

Derrière ce nom peu évocateur et encore mal connu, se cache une vraie pépite dont les agences web ne tarderont pas à faire l’éloge.

Comment ça fonctionne

Ce petit bout de script fonctionne de façon totalement autonome. Il détecte et récupère la méthode d’anti-aliasing utilisée par votre User-Agent et va en conséquence générer deux classes dans votre balise <html>. Ces classes seront utilisées par le webdesigner pour effectuer les réglages qu’il souhaite appliquer, afin de mieux homogénéiser l’aspect du texte des pages quelque soit le navigateur utilisé.

La première classe générée représente la font rasterization (conversion du texte vectoriel en trame ou Hiting) :

  • tr-coretext pour OS X et iOS;
  • tr-gdi pour Windows XP et Windows Vista SP1;
  • tr-directwrite pour Windows Vista SP2 et versions suivantes;
  • tr-freetype pour Android et Linux.

La seconde classe concerne l’anti-aliasing:

  • tr-aa-none quand il n’y a pas d’anti-aliasing;
  • tr-aa-grayscale quand l’anti-aliasing utilisé est Grayscale;
  • tr-aa-subpixel quand l’anti-aliasing utilisé est Sub-Pixel.

Lorsque l’anti-aliasing ne peut pas être détecté avec certitude, d’autres classes sont créées :

  • tr-aa-unknown-none quand le script pense qu’il n’y a pas d’anti-aliasing;
  • tr-aa-unknown-grayscale quand le script pense qu’il y a un anti-aliasing de type Grayscale;
  • tr-aa-unknown-subpixel quand le script pense qu’il y a un anti-aliasing de type Sub-Pixel.

Exemple d’utilisation

Rappelez-vous de notre exemple sur l’algorithme Sub-Pixel qui a tendance à graisser la police lorsque le contraste entre le fond et le texte est trop important. Grâce à Type Rendering Mix, il est dorénavant facile de le cibler et d’intervenir pour empêcher cela :

tr-coretext correspond  a OS X et iOS ce correctif sera donc appliqué sur ces deux systèmes d’exploitation.

 

Lorsque vous utilisez des WebFonts (Hors OS) et dans le cas d’un anti-aliasing absent, il se peut fortement que vous ayez un rendu disgracieux avec des contours pixelisés. De fait, vous pouvez encore une fois cibler efficacement ce cas de figure et intervenir par exemple en remplaçant cette WebFont en une font système :

Il ne nous manque plus qu’un “modèle de feuille de styles CSS” tout comme le célèbre Normalize.css qui puisse isoler tous les cas de figures (ou presque).

Téléchargement

Téléchargement direct Téléchargement GitHub
Téléchargement Téléchargement

Conclusion

Type Rendering Mix offre une alternative intéressante aux rendus disparates des fonts non lissées et devrait faire le plus grand bonheur des webdesigners, qui n’auront plus à se soucier des défauts d’affichage des textes, en comparaison des maquettes originales.

Uniformiser l'anti-aliasing avec Type Rendering Mix, 4.0 out of 5 based on 1 rating

Commentaires

#1
DogVacances

Ces alternatives que tu proposes sont très intéressantes, même si c’est très technique pour moi, je pense que cela pourrait intéresser mon webdesigner! Merci beaucoup pour ces conseils & explications. A bientôt ;)

#2
Christine

c’est un peu compliqué tout ça mais bon ça donne des pistes de recherche pour mieux comprendre l’anti-aliasing .Merci pour le partage

Réagissez à cet article

Données obligatoires