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

La propriété text-rendering a cinq valeurs:

  • auto
  • optimizeSpeed
  • optimizeLegibility
  • geometricPrecision

Lorsque la propriété text-rendering est définie à "optimizeLegibility", les lettres majuscules successives deviennent plus espacées et les ligatures sont activées.

La propriété text-rendering n'est pas actuellement une propriété CSS et elle n'est pas définie en spécification CSS.

C'est une propriété SVG mais les navigateurs basés sur Gecko et WebKit permettent de l'appliquer au contenu HTML via CSS.

La propriété text-rendering ne fonctionne qu'en Windows et Linux.
Valeur initiale auto
Appliquée à Éléments de texte.
Héritée Oui.
Animable Oui.
Version Scalable Vector Graphics (SVG) 1.1
Syntaxe DOM object.style.textRendering = "optimizeLegibility";

Syntaxe

text-rendering: auto | optimizeSpeed | optimizeLegibility | geometricPrecision | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body {
      background-color: #eee;
      color: #000;
      font-size: 1em;
      font-family: 'Roboto', Helvetica, sans-serif;
      }
      hr {
      margin: 60px 0;
      }
      table {
      table-layout: fixed;
      padding: .3em;
      border: 1px solid #ccc;
      background-color: #f9f9f9;
      margin-bottom: 1em;
      }
      td {
      padding: 15px;
      border: 1px solid #eee;
      }
      h3 {
      font-size: 5em;
      line-height: 1;
      font-family: sans-serif;
      }
      .uppercase {
      text-transform: uppercase;
      }
      .italic {
      font-style: italic;
      font-family: 'Roboto',Helvetica, sans-serif;
      }
      .optimizeLegibility {
      text-rendering: optimizeLegibility;
      }
    </style>
  </head>
  <body>
    <h2>Text-rendering example</h2>
    <table>
      <tr>
        <td>Text-rendering: auto;</td>
        <td>
          <h3 class="uppercase">LOREM</h3>
        </td>
      </tr>
      <tr>
        <td>Text-rendering: optimizeLegibility;</td>
        <td>
          <h3 class="optimizeLegibility uppercase">LOREM</h3>
        </td>
      </tr>
    </table>
    <table>
      <tr>
        <td>Text-rendering: auto;</td>
        <td>
          <h3>Ipsum</h3>
        </td>
      </tr>
      <tr>
        <td>Text-rendering: optimizeLegibility;</td>
        <td>
          <h3 class="optimizeLegibility">Ipsum</h3>
        </td>
      </tr>
    </table>
    <table>
      <tr>
        <td>Text-rendering: auto;</td>
        <td>
          <h3 class="italic">lorem ipsum</h3>
        </td>
      </tr>
      <tr>
        <td>Text-rendering: optimizeLegibility;</td>
        <td>
          <h3 class="optimizeLegibility italic">lorem ipsum</h3>
        </td>
      </tr>
    </table>
  </body>
</html>

Valeurs

Valeur Description
auto Le navigateur essaie de deviner quand optimiser la vitesse, la lisibilité et la précision géométrique lors du traçage de texte. Cette valeur est interprétée différemment par les navigateurs.
optimizeSpeed Spécifie que le navigateur doit mettre l'accent sur la vitesse de rendu plutôt que sur la lisibilité et la précision géométrique lors de la création de texte. Le crénage et les ligatures sont désactivés.
optimizeLegibility Spécifie que le navigateur doit mettre l'accent sur la lisibilité plutôt que sur la vitesse de rendu et la précision géométrique.
geometricPrecision Spécifie que le navigateur doit mettre l'accent sur la précision plutôt que sur la vitesse et la lisibilité du rendu.
initial Fait utiliser la valeur initiale.
inherit Hérite la propriété de son élément parent.

Support de Navigateurs

4.0+ 1.0+ 5.0+ 15.0+


Trouvez-vous cela utile?

Articles Associées