Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété 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 un fonction 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.

Syntaxes pour text-rendering.

  • text-rendering: auto;

    Valeur par défaut. Le navigateur décide de donner la préférence à la rapidité, à la lisibilité ou à la précision géométrique.

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

  • 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;

    La valeur initiale est auto.

  • text-rendering: unset; text-rendering: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

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 :
L'affichage du texte est plus ou moins orné