text-rendering

  • Revision slug: CSS/text-rendering
  • Revision title: text-rendering
  • Revision id: 25015
  • Created:
  • Creator: grendel
  • Is current revision? No
  • Comment Changed introduction to point out this is an SVG, non-standard property.; 62 words added, 30 words removed

Revision Content

Summary

Provides information to the rendering engine about what to optimize for when rendering text. The browser makes trade-offs among speed, legibility, and geometric precision. The text-rendering property is an SVG property that is not defined in any CSS standard. However, Gecko and WebKit browsers let you apply this property to HTML and XML content on Windows and Linux. 

 

Note: This property has no effect on Mac OS X.

One very visible effect is: optimizeLegibility enables ligatures (ff, fi, fl etc.) in text smaller than 20px for some fonts (for example, Microsoft's Calibri, Candara, Constantia and Corbel or the DejaVu font family).

  • {{ Xref_cssinitial() }}: auto
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: yes
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: ?

Syntax

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

Values

auto
The browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text.
In practice, Gecko desktop browsers like Firefox use optimizeLegibility if font size is 20px or larger. Otherwise optimizeSpeed for smaller text.
optimizeSpeed
Gecko emphasizes rendering speed over legibility and geometric precision while drawing text. Disables kerning and ligatures.
optimizeLegibility
Gecko emphasizes legibility over rendering speed and geometric precision. This enables kerning and optional ligatures.
geometricPrecision
Gecko emphasizes geometric precision over rendering speed and legibility; this is currently the same as optimizeLegibility.

Examples

/* make sure all fonts in the HTML document display in all its glory,
   but avoid inadequate ligatures in class foo elements */

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

Live Example

CSS code Kerning 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

The 20px threshold value of the auto keyword can be changed by changing the browser.display.auto_quality_min_font_size preference.

{{ gecko_callout_heading("2.0") }}

The optimizeSpeed option has no effect on Gecko 2.0 {{ geckoRelease("2.0") }}, because the standard code for text rendering is already very fast and there is not a faster code path at this time. See {{ bug("595688") }} for details.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support for Windows and Linux

4.0 

 

3.0 (1.9) {{ CompatNo() }} {{ CompatNo() }} 5.0 (532.5)
Basic support for other operating systems {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Notes

Chrome 13 supports true geometric precision, without rounding up or down to the nearest supported font size in the operating system.

webk.it/41363: optimizeLegibility for >20px 

Defaults to optimizeLegibility for text > 20px     webk.it/41363: optimizeLegibility for >20px
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Specifications

This is an SVG property, it is not defined in any CSS standard. Gecko (Firefox) and WebKit apply text-rendering also to HTML and XML content.

See also

{{ CSS_Reference:Text() }}

Revision Source

<h3>Summary</h3>
<p>Provides information to the rendering engine about what to optimize for when rendering text. The browser makes trade-offs among speed, legibility, and geometric precision. The text-rendering property is an SVG property that is not defined in any CSS standard. However, Gecko and WebKit browsers let you apply this property to HTML and XML content on Windows and Linux. </p>
<p> </p>
<div class="note"><strong>Note:</strong> This property has no effect on Mac OS X.</div>
<p>One very visible effect is:<code> optimizeLegibility </code>enables ligatures (ff, fi, fl etc.) in text smaller than 20px for some fonts (for example, Microsoft's<em> Calibri, Candara, Constantia and Corbel</em> or the <em>DejaVu</em> font family).</p>
<ul> <li>{{ Xref_cssinitial() }}: auto</li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: yes</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: ?</li>
</ul>
<h3>Syntax</h3>
<pre class="eval">text-rendering:  auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit</pre>
<h3>Values</h3>
<dl> <dt><code>auto</code></dt> <dd>The browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text.</dd> <dd>In practice, Gecko desktop browsers like Firefox use<code> optimizeLegibility </code>if font size is <strong>20px </strong>or larger. Otherwise<code> optimizeSpeed </code>for smaller text.</dd> <dt><code>optimizeSpeed</code></dt> <dd>Gecko emphasizes rendering speed over legibility and geometric precision while drawing text. Disables kerning and ligatures.</dd> <dt><code>optimizeLegibility</code></dt> <dd>Gecko emphasizes legibility over rendering speed and geometric precision. This enables <strong>kerning</strong> and optional <strong>ligatures</strong>.</dd> <dt><code>geometricPrecision</code></dt> <dd>Gecko emphasizes geometric precision over rendering speed and legibility; this is currently the same as<code> optimizeLegibility</code>.</dd>
</dl>
<h3>Examples</h3>
<pre>/* make sure all fonts in the HTML document display in all its glory,
   but avoid inadequate ligatures in class foo elements */

body  { text-rendering: optimizeLegibility; }
.foo  { text-rendering: optimizeSpeed; }</pre>
<h4>Live Example</h4>
<table class="standard-table"> <tbody> <tr> <th>CSS code</th> <th>Kerning</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>
<h3>Notes</h3>
<p>The 20px threshold value of the<code> auto </code>keyword can be changed by changing the <code>browser.display.auto_quality_min_font_size</code> preference.</p>
<div class="geckoVersionNote">
<p>{{ gecko_callout_heading("2.0") }}</p>
<p>The <code>optimizeSpeed</code> option has no effect on Gecko 2.0 {{ geckoRelease("2.0") }}, because the standard code for text rendering is already very fast and there is not a faster code path at this time. See {{ bug("595688") }} for details.</p>
</div>
<h3 name="Browser_Compatibility">Browser compatibility</h3>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Basic support for Windows and Linux</td> <td> <p>4.0 </p> <p> </p> </td> <td><strong>3.0</strong> (1.9)</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>5.0 (532.5)</td> </tr> <tr> <td>Basic support for other operating systems</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> </tr> <tr> <td>Notes</td> <td> <p>Chrome 13 supports true geometric precision, without rounding up or down to the nearest supported font size in the operating system.</p> <p><a class=" link-https" href="https://bugs.webkit.org/show_bug.cgi?id=41363">webk.it/41363: optimizeLegibility for &gt;20px</a> </p> </td> <td>Defaults to <code>optimizeLegibility</code> for text &gt; 20px</td> <td> </td> <td> </td> <td><a class=" link-https" href="https://bugs.webkit.org/show_bug.cgi?id=41363">webk.it/41363: optimizeLegibility for &gt;20px</a></td> </tr> </tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody>
</table>
</div>
<h3>Specifications</h3>
<p>This is an SVG property, it is not defined in any CSS standard. Gecko (Firefox) and WebKit apply<code> text-rendering </code>also to HTML and XML content.</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>
<h3>See also</h3>
<p>{{ CSS_Reference:Text() }}</p>
Revert to this revision