Text-rendering - Propriété CSS

text-rendering

Résumé des caractéristiques de la propriété text-rendering

Description rapide
Active ou désactive le traitement de la typographie évoluée (ligatures, crénage...)
Statut
Standard
Utilisable sur
HTML (1), SVG
Valeurs prédéfinies
auto | geometricPrecision | optimizeLegibility | optimizeSpeed
Pourcentages
Ne s'appliquent pas.
Valeur initiale
auto
Héritée par défaut
Oui.
Type d'animation
Discrète : lors d'une animation, la propriété text-rendering passe d'une valeur à l'autre sans transition.
Module W3C
SVG (Scalable Vector Graphics)
Références (W3C)
Statut du document: CR (document candidat à la recommandation)

(1) La propriété text-rendering est nativement prévue pour SVG, mais agit également en HTML.

Schéma syntaxique de text-rendering.

Text-rendering property - Syntax diagramSyntax diagram of the text-rendering CSS property. See stylescss.free.fr for details. auto auto optimizeSpeed optimizeSpeed optimizeLegibility optimizeLegibility geometricPrecision geometricPrecisiontext-rendering:;text-rendering:;
Schéma syntaxique de la propriété text-rendering
Les liens sur le schéma donnent accès à plus de détails

Description de la propriété text-rendering.

La propriété text-rendering définit comment le navigateur doit rendre les attributs typographiques évolués comme les ligatures, le crénage, etc. Ceci se fait bien sûr au détriment de la vitesse de traitement. Avec cette propriété le développeur peut choisir de donner la préférence à un temps de traitement plus court ou à une meilleure lisibilité.

La propriété text-rendering n'est pas à proprement parlé une propriété du langage CSS, mais plutôt de SVG. Elle est cependant reconnue et traitée dans les feuilles de styles CSS. Notez que les mots-clé ne sont pas orthographiés comme c'est l'habitude en CSS, avec un tiret pour séparer les mots. En effet, une syntaxe de type "camelCase" a été employée : optimizeSpeed au lieu de optimize-speed.

La propriété shape-rendering est équivalente pour le tracé des formes en SVG (cercle, lignes, etc.).

Syntaxes pour text-rendering.

  • text-rendering: auto;

    Le navigateur décide de donner la préférence à la rapidité, à la lisibilité ou à la précision géométrique. Mais tous les navigateurs ne font pas le même choix. La plupart cependant traitent auto comme optimizeSpeed.

  • text-rendering: optimizeSpeed;

    Le navigateur doit donner la priorité à la vitesse de traitement, au détriment de la lisibilité et de la précision géométrique. Dans cette optique, le crénage, le traitement des ligatures, etc. peuvent être désactivés.

  • text-rendering: optimizeLegibility;

    Le navigateur favorise la lisibilité et l'esthétique du texte, au détriment de la vitesse d'exécution. La restitution des caractères exploite toutes les subtilités typographiques demandées : ligatures, crénage, etc.

  • text-rendering: geometricPrecision;

    Le navigateur affiche les caractères exactement dans la taille demandée, sans substituer par la taille de police la plus proche.

Valeurs communes à toutes les propriétés :

text-rendering: initial (auto) text-rendering: inherit text-rendering: revert text-rendering: revertLayer text-rendering: unset

Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple interactif avec la propriété text-rendering.

La police Kleymissky (copyright Gluck) propose de nombreuses variantes pour chaque caractère, et de nombreuses ligatures (remplacement de suites de lettres par un caractère unique plus adapté). Observez comment la propriété text-rendering influence la restitution de ces subtilités typographiques.

text-rendering :
fi
fi

Prise en charge par les navigateurs (compatibilité).

1
Propriété
text-rendering
Estimation de la prise en charge globale.
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse

Historique de la propriété text-rendering.

  • SVG (Scalable Vector Graphics)

    Première présentation de la propriété text-rendering.
    WD
    28 Août 2012
    Document de travail.
    CR
    15 Septembre 2016
    Candidat à la recommandation.
    PR
    REC

Voir aussi, au sujet du SVG.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété text-rendering fait partie du module Scalable Vector Graphics (SVG) . Les définitions suivantes sont également décrites dans ce même module.

Propriétés :

r
Définit le rayon d'un cercle en SVG.
rx
Définit le rayon horizontal d'une ellipse, en SVG.
ry
Définit le rayon vertical d'une elliipse, en SVG.
shape-rendering
Définit si la priorité doit être donnée à la précision ou bien au temps de calcul, lors du tracé d'une forme en SVG.
text-anchor
Définit si un texte en SVG s'ancre par le milieu, le départ ou la fin.
⚠
vector-effect
Définit comment les transformations (rotations, changements d'échelle, etc.) agissent.