text-rendering

  • Raccourci de la révision : CSS/text-rendering
  • Titre de la révision : text-rendering
  • ID de la révision : 355251
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{CssRef()}}

Résumé

La propriété CSS 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. 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 et Linux. 

Note : cette propriété n'a aucun effet sur Mac OS X.

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 etCorbel de Microsoft, ou la famille DejaVu).

  • {{ Xref_cssinitial() }} auto
  • S'applique à tous les éléments
  • {{ Xref_cssinherited() }} oui
  • Média {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} ?

Syntaxe

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

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 aggrandi 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écisement la valeur définie, mais Gecko traite la valeure de la même manière que optimizeLegibility.

Exemples

/* s'assurer que toutes les polices dans le document HTML sont affichée sous leur plus beau jour,
   mais éviter des ligatures inadéquates dans les éléments de la classe foo */

body  { text-rendering: optimizeLegibility; }
.foo  { text-rendering: optimizeSpeed; }

Exemple en ligne

Code CSS Crénage Ligatures
font: 19.9px 'DejaVu Serif',Constantia; LYoWAT ff fi fl ffl
font: 20px 'DejaVu Serif',Constantia; LYoWAT ff fi fl ffl
font: 3em 'DejaVu Serif',Constantia;
text-rendering: optimizeSpeed;
LYoWAT ff fi fl ffl
font: 3em 'Dejavu Serif',Constantia;
text-rendering: optimizeLegibility;
LYoWAT ff fi fl ffl

Notes concernant Gecko

La valeur palier de 20px du mot-clé auto peut être changée en modifiant la préférence browser.display.auto_quality_min_font_size.

L'option optimizeSpeed n'a pas d'effet dans Gecko 2.0 {{ geckoRelease("2.0") }}, puisque le code standard pour afficher le texte est déjà très rapide et il n'existe pas de code plus rapide à l'heure actuelle. Voir {{ bug("595688") }} pour plus de détails.

Spécifications

Ceci est une propriété SVG, elle n'est définie dans aucun standard CSS. Gecko (Firefox) et WebKit appliquent aussi text-rendering au HTML et au XML.

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support de base pour Windows et Linux

4.0 

 

3.0 (1.9) {{ CompatNo() }} {{ CompatNo() }} 5.0 (532.5)
Support de base pour les autres systèmes d'exploitation {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
auto

Chrome le traite comme optimizeSpeed

Le travail continue sur {{ Webkitbug("41363") }}

Si la taille de la police est de 20px ou supérieure, Gecko utilise optimizeLegibility. Pour les valeurs inférieures, il utilise optimizeSpeed. {{ CompatNo() }} {{ CompatNo() }} Safari le traite comme optimizeSpeed.

Le travail continue sur {{ Webkitbug("41363") }}

geometricPrecision

La version 13 supporte la précision géométrique réelle, sans arrondi au supérieur ou inférieur à la taille supportée par le système la plus proche.

Introduit dans WebKit 535.1   {{ Webkitbug("60317") }}

Gecko le traite comme optimizeLegibility.  {{ CompatNo() }}  {{ CompatNo() }}  
Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Voir également

{{ CSS_Reference:Text() }}

Source de la révision

<p>{{CssRef()}}</p>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La propriété <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> <code>text-rendering</code> 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. La propriété <code>text-rendering</code> 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 et Linux.&nbsp;</p>
<div class="note">
  <strong>Note :</strong> cette propriété n'a aucun effet sur Mac OS&nbsp;X.</div>
<p>Un effet très visible est : <code>text-rendering : optimizeLegibility;</code> qui active les ligatures (ff, fi, fl etc.) dans les textes en dessous de 20px pour certains polices (par exemple, <em>Calibri, Candara, Constantia </em>et<em>Corbel</em> de Microsoft, ou la famille <em>DejaVu</em>).</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }} </dfn>auto</li>
  <li><dfn>S'applique à </dfn>tous les éléments</li>
  <li><dfn>{{ Xref_cssinherited() }} </dfn>oui</li>
  <li><dfn>Média </dfn>{{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }} </dfn>?</li>
</ul>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="eval">
text-rendering:  auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit
</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
  <dt>
    <code>auto</code></dt>
  <dd>
    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é.</dd>
  <dt>
    <code>optimizeSpeed</code></dt>
  <dd>
    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.</dd>
  <dt>
    <code>optimizeLegibility</code></dt>
  <dd>
    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.</dd>
  <dt>
    <code>geometricPrecision</code></dt>
  <dd>
    <p>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 <code>geometricPrecision</code> peut rendre agréables à l'<span class="st"><span id="cke_bm_81S" style="display: none;">&nbsp;</span>œ<span id="cke_bm_81E" style="display: none;">&nbsp;</span></span>il les textes utilisant ces polices.</p>
    <p>Avec SVG, lorsque le texte est aggrandi 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.</p>
    <p>Toutefois la propriété <code>geometricPrecision</code> — 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.</p>
    <p>WebKit applique précisement la valeur définie, mais Gecko traite la valeure de la même manière que <code>optimizeLegibility</code>.</p>
  </dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<pre>
/* s'assurer que toutes les polices dans le document HTML sont affichée sous leur plus beau jour,
&nbsp;&nbsp; mais éviter des ligatures inadéquates dans les éléments de la classe <code>foo</code> */

body  { text-rendering: optimizeLegibility; }
.foo  { text-rendering: optimizeSpeed; }
</pre>
<h3 id="Exemple_en_ligne">Exemple en ligne</h3>
<table class="standard-table">
  <tbody>
    <tr>
      <th>Code CSS</th>
      <th>Crénage</th>
      <th>Ligatures</th>
    </tr>
    <tr style="font: 19.9px 'DejaVu Serif',Constantia">
      <td style="font:medium monospace">font: 19.9px 'DejaVu Serif',Constantia;</td>
      <td>LYoWAT</td>
      <td>ff fi fl ffl</td>
    </tr>
    <tr style="font: 20px 'DejaVu Serif',Constantia">
      <td style="font:medium monospace">font: 20px 'DejaVu Serif',Constantia;</td>
      <td>LYoWAT</td>
      <td>ff fi fl ffl</td>
    </tr>
    <tr style="font: 3em 'DejaVu Serif',Constantia; text-rendering:optimizeSpeed;">
      <td style="font:medium monospace">font: 3em 'DejaVu Serif',Constantia;<br />
        text-rendering: optimizeSpeed;</td>
      <td>LYoWAT</td>
      <td>ff fi fl ffl</td>
    </tr>
    <tr style="font: 3em 'Dejavu Serif',Constantia; text-rendering:optimizeLegibility;">
      <td style="font:medium monospace">font: 3em 'Dejavu Serif',Constantia;<br />
        text-rendering: optimizeLegibility;</td>
      <td>LYoWAT</td>
      <td>ff fi fl ffl</td>
    </tr>
  </tbody>
</table>
<h2 id="Notes_concernant_Gecko">Notes concernant Gecko</h2>
<p>La valeur palier de 20px du mot-clé <code>auto</code> peut être changée en modifiant la préférence <code>browser.display.auto_quality_min_font_size</code>.</p>
<p>L'option <code>optimizeSpeed</code> n'a pas d'effet dans Gecko 2.0 {{ geckoRelease("2.0") }}, puisque le code standard pour afficher le texte est déjà très rapide et il n'existe pas de code plus rapide à l'heure actuelle. Voir {{ bug("595688") }} pour plus de détails.</p>
<h2 id="Sp.C3.A9cifications">Spécifications</h2>
<p>Ceci est une propriété SVG, elle n'est définie dans aucun standard CSS. Gecko (Firefox) et WebKit appliquent aussi <code>text-rendering</code> au HTML et au XML.</p>
<ul>
  <li><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#TextRenderingProperty" title="http://www.w3.org/TR/SVG11/painting.html#TextRenderingProperty">SVG 1.1 Painting #text-rendering</a></li>
</ul>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Support de base pour Windows et Linux</td>
        <td>
          <p>4.0&nbsp;</p>
          <p>&nbsp;</p>
        </td>
        <td><strong>3.0</strong>&nbsp;(1.9)</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>5.0 (532.5)</td>
      </tr>
      <tr>
        <td>Support de base pour les autres systèmes d'exploitation</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td><code>auto</code></td>
        <td>
          <p>Chrome le traite comme <code>optimizeSpeed</code>.&nbsp;</p>
          <p>Le travail continue sur {{ Webkitbug("41363") }}</p>
        </td>
        <td>Si la taille de la police est de 20px ou supérieure, Gecko utilise <code>optimizeLegibility</code>.&nbsp;Pour les valeurs inférieures, il utilise <code>optimizeSpeed</code>.</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>Safari le traite comme <code>optimizeSpeed</code>.
          <p>Le travail continue sur {{ Webkitbug("41363") }}</p>
        </td>
      </tr>
      <tr>
        <td><code>geometricPrecision</code></td>
        <td>
          <p>La version 13 supporte la précision géométrique réelle, sans arrondi au supérieur ou inférieur à la taille supportée par le système la plus proche.</p>
          <p>Introduit dans WebKit 535.1 &nbsp; {{ Webkitbug("60317") }}</p>
        </td>
        <td>Gecko le traite comme <code>optimizeLegibility</code>.</td>
        <td>&nbsp;{{ CompatNo() }}</td>
        <td>&nbsp;{{ CompatNo() }}</td>
        <td>&nbsp;</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
<p>{{ CSS_Reference:Text() }}</p>
Revenir à cette révision