Text-rendering - Propriété CSS

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

Schéma de la syntaxe de text-rendering.

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.).

Valeurs 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.

• 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.
Cela ne marche pas avec tous les navigateurs.

Compatibilité des navigateurs avec text-rendering.

1

Propriété
text-rendering

Estimation de la prise en charge globale.

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

Histoire de la propriété text-rendering.

• SVG (Scalable Vector Graphics)

  Concernant text-rendering. Première présentation de la propriété text-rendering.
  

  28 Août 2012

  Document de travail.

  

  15 Septembre 2016

  Candidat à la recommandation.

  

  

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 SVG (Scalable Vector Graphics). Les définitions suivantes sont également décrites dans ce même module.

Propriétés :