Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

text-rendering

La propriété text-rendering donne de l'information au moteur de rendu sur ce qu'il doit optimiser lors de l'affichage du texte. Le navigateur fait des compromis entre la vitesse, la lisibilité et la précision géométrique.

Note : La propriété text-rendering est une propriété SVG qui n'est définie dans aucun standard CSS. Toutefois, les navigateurs utilisant Gecko et WebKit permettent d'appliquer cette propriété à du contenu HTML ou XML sur Windows, Mac OS X et Linux.

Un effet très visible est : text-rendering : optimizeLegibility; qui active les ligatures (ff, fi, fl etc.) dans les textes en dessous de 20px pour certains polices (par exemple, Calibri, Candara, Constantia et Corbel de Microsoft, ou la famille DejaVu).

Valeur initialeauto
Applicabilitééléments textes
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Animablenon
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* Avec un mot-clé */
text-rendering: auto;
text-rendering: optimizeSpeed;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;

/* Valeurs globales */
text-rendering: inherit;
text-rendering: initial;
text-rendering: unset;

Valeurs

auto
Le navigateur fait un choix éclairé sur la manière d'optimiser la vitesse, lisibilité et la précision géométrique lors de l'affichage du texte. Pour en savoir plus sur la manière dont est supportée cette valeur, reportez-vous au tableau de compatibilité.
optimizeSpeed
Le navigateur privilégie la vitesse de rendu par rapport à la lisibilité et la précision géométrique lors de l'affichage du texte. Cela désactive les ligatures et le crénage.
optimizeLegibility
Le navigateur privilégie la lisibilité par rapport à la vitesse de rendu ou la précision géométrique. Ceci active le crénage et les ligatures.
geometricPrecision

Le navigateur privilégie la précision géométrique par rapport à la vitesse de rendu et la lisibilité. Certains aspects d'une police — comme le crénage — ne se mettent pas à l'échelle de manière linéaire, donc geometricPrecision peut rendre agréables à l'œil les textes utilisant ces polices.

Avec SVG, lorsque le texte est agrandi ou réduit, le navigateur calcule la taille finale du texte (qui est la taille de police définie et le facteur appliqué) et demande une police de cette taille calculée au système de police de la plateforme. Mais si vous demandez une police de taille 9 avec un facteur de 140 %, la taille résultante de 12,6 n'existe pas dans la système de polices, donc le navigateur arrondi la taille de police à 12 dans ce cas. Ce qui aboutit à une mise à l'échelle en escalier du texte.

Toutefois la propriété geometricPrecision — lorsqu'elle est complètement supportée par le moteur de rendu — permet de mettre à l'échelle le texte de manière continue. Pour les facteurs de mise à l'échelle élevés, il est possible d'obtenir un rendu de texte moins-que-joli, mais de la taille que vous attendez — et pas arrondi à la taille supportée par Windows ou Linux la plus proche.

WebKit applique précisément la valeur définie, mais Gecko traite la valeur de la même manière que optimizeLegibility.

Syntaxe formelle

auto | optimizeSpeed | optimizeLegibility | geometricPrecision

Exemples

HTML

<p class="normal">LYoWAT pour le crénage et ff fi fl ffl pour les ligatures</p>
<p class="minus">LYoWAT pour le crénage et ff fi fl ffl pour les ligatures</p>
<p class="vitesse">LYoWAT pour le crénage et ff fi fl ffl pour les ligatures</p>
<p class="lisibilite">LYoWAT pour le crénage et ff fi fl ffl pour les ligatures</p>

CSS

p {
  font: 1em 'Dejavu Serif', Constantia;
}

.normal {
  font-size: 20px;
}

.minus {
  font-size: 19.9px;
}

.vitesse {
  font-size: 3em;
  text-rendering: optimizeSpeed;
}

.lisibilite {
  font-size: 3em;
  text-rendering: optimizeLegibility;
}

Résultat

Spécifications

Spécification Statut Commentaires
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de 'text-rendering' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple pour Windows et Linux 4.0[1] 3.0[2] Pas de support Pas de support 5.0 (532.5)
Support simple pour les autres systèmes d'exploitation Pas de support Pas de support Pas de support Pas de support Pas de support
auto (Oui)[3] (Oui)[4] Pas de support Pas de support (Oui)[3]
geometricPrecision 13[5] (Oui)[6] Pas de support Pas de support ?
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple 3[7] 46 Pas de support 36 4.3
auto ? ? ? ? ?
geometricPrecision ? ? ? ? ?

[1] Des bugs sont connus pour Windows et Linux, qui cassent la substitution de polices, les petites majuscules, le crénage ou qui entraînent le chevauchement de texte.

[2] L'option optimizeSpeed n'a aucun effet sur (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) car le code standard pour le rendu du texte est très rapide et qu'il n'existe pas, à date, de méthode plus rapide. Voir le bug 595688 pour plus de détails.

[3] Chrome et Safari traitent cette valeur comme optimizeSpeed. Le travail d'implémentation peut être suivi sur WebKit bug 41363.

[4] Si la taille de police mesure plus de 20 pixels, les navigateurs utilisant Gecko utiliseront optimizeLegibility, pour les textes plus petits, ce sera optimizeSpeed qui sera utilisé. Le seuil de 20 pixels pour le mot-clé auto peut être modifié grâce à la préférence browser.display.auto_quality_min_font_size.

[5] La précision géométrique est supportée sans arrondie. Fonctionnalité ajoutée avec Webkit 535.1 WebKit bug 60317.

[6] Gecko traite cette valeur de la même façon que optimizeLegibility.

[7] Pour le navigateur Android entre la version 3 et la version 4.3, un bug empêche le rendu des polices lorsque text-rendering: optimizeLegibility est utilisé. Cela a été corrigé avec la version 4.4.

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, fscholz, webdif, teoli, FredB, hsablonniere, Manu1400
 Dernière mise à jour par : SphinxKnight,