text-rendering

  • Revision slug: CSS/text-rendering
  • Revision title: text-rendering
  • Revision id: 24987
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment new page

Revision Content

{{template.CSSRef()}}

Summary

The text-rendering property is used to provide information to the rendering engine about what sorts of tradeoffs to make when rendering text, in order to optimize speed or legibility.

  • {{template.Xref_cssinitial()}}: auto
  • Applies to: 'text' elements
  • {{template.Xref_cssinherited()}}: yes
  • Media: {{template.Xref_cssvisual()}}
  • {{template.Xref_csscomputed()}}:

Syntax

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

Values

  • auto : Gecko will make educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text
  • optimizeSpeed : Gecko will emphasize rendering speed over legibility and geometric precision while drawing text
  • optimizeLegibility : Gecko will emphasize legibility over rendering speed and geometric precision
  • geometricPrecision : Gecko will emphasize geometric precision over rendering speed and legibility

Examples

{{template.CSSRefExampleLink("text-rendering")}}

p.fast { text-rendering: optimizeSpeed }

p.pretty { text-rendering: optimizeLegibility }

Specifications

Browser compatibility

Browser Lowest Version
Internet Explorer ?
Gecko 1.9 (Firefox 3)
Opera ?

See also

{{wiki.template('CSS_Reference:Text')}}

Revision Source

<p> 
{{template.CSSRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p>The <code>text-rendering</code> property is used to provide information to the rendering engine about what sorts of tradeoffs to make when rendering text, in order to optimize speed or legibility.
</p>
<ul><li> {{template.Xref_cssinitial()}}: auto
</li><li> Applies to: 'text' elements
</li><li> {{template.Xref_cssinherited()}}: yes
</li><li> Media: {{template.Xref_cssvisual()}}
</li><li> {{template.Xref_csscomputed()}}:
</li></ul>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval"> text-rendering: auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit
</pre>
<h3 name="Values"> Values </h3>
<ul><li> <b>auto</b> : Gecko will make educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text
</li><li> <b>optimizeSpeed</b> : Gecko will emphasize rendering speed over legibility and geometric precision while drawing text
</li><li> <b>optimizeLegibility</b> : Gecko will emphasize legibility over rendering speed and geometric precision
</li><li> <b>geometricPrecision</b> : Gecko will emphasize geometric precision over rendering speed and legibility
</li></ul>
<h3 name="Examples"> Examples </h3>
<p>{{template.CSSRefExampleLink("text-rendering")}}
</p>
<pre>p.fast { text-rendering: optimizeSpeed }

p.pretty { text-rendering: optimizeLegibility }
</pre>
<h3 name="Specifications"> Specifications </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/SVG11/painting.html#TextRenderingProperty">SVG 1.1</a>
</li></ul>
<h3 name="Browser_compatibility"> Browser compatibility </h3>
<table class="standard-table">
  <tbody><tr>
    <th>Browser</th>
    <th>Lowest Version</th>
  </tr>
  <tr>
    <td>Internet Explorer</td>
    <td>?</td>
  </tr>
  <tr>
    <td>Gecko</td>
    <td>1.9 (Firefox 3)</td>
  </tr>
  <tr>
    <td>Opera</td>
    <td>?</td>
  </tr>
</tbody></table>
<h3 name="See_also"> See also </h3>
<p>{{wiki.template('CSS_Reference:Text')}}
</p>
Revert to this revision