text-rendering

  • Revision slug: CSS/text-rendering
  • Revision title: text-rendering
  • Revision id: 24992
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 12 words added, 1 words removed

Revision Content

{{ CSSRef() }} {{ gecko_minversion_header("1.9") }}

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.

In the case of Simple Scripts, i.e., Latin fonts, it simply means the Ligature feature is turned off or on between optimizeSpeed v. optimizeLegibility. It is not clear what other enhancements would be facilitated beyond this.

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

This is an SVG property that is also applicable to HTML and XML content.

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. The simple example is, say, if you use a font like Calibri that ships with MS Office 2007, the ligatures fi, fl, ffi, ffl etc, will not form.
  • optimizeLegibility : Gecko will emphasize legibility over rendering speed and geometric precision; in Gecko 1.9, this enables kerning and optional ligatures
  • geometricPrecision : Gecko will emphasize geometric precision over rendering speed and legibility

Examples

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

p.fast { text-rendering: optimizeSpeed; }

p.pretty { font-family: Calibri, text-rendering: optimizeLegibility; }

Specifications

Browser compatibility

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

See also

{{ CSS_Reference:Text() }}

Revision Source

<p>{{ CSSRef() }} {{ gecko_minversion_header("1.9") }}</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>
<p>In the case of Simple Scripts, i.e., Latin fonts, it simply means the Ligature feature is turned off or on between<code> optimizeSpeed </code>v.<code> optimizeLegibility</code>. It is not clear what other enhancements would be facilitated beyond this.</p>
<ul> <li>{{ Xref_cssinitial() }}: auto</li> <li>Applies to: 'text' elements</li> <li>{{ Xref_cssinherited() }}: yes</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: ?</li>
</ul>
<p>This is an SVG property that is also applicable to HTML and XML content.</p>
<h3 name="Syntax">Syntax</h3>
<pre class="eval"> text-rendering: auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit
</pre>
<h3 name="Values">Values</h3>
<ul> <li><strong>auto</strong> : Gecko will make educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text</li> <li><strong>optimizeSpeed</strong> : Gecko will emphasize rendering speed over legibility and geometric precision while drawing text. The simple example is, say, if you use a font like Calibri that ships with MS Office 2007, the ligatures fi, fl, ffi, ffl etc, will not form.</li> <li><strong>optimizeLegibility</strong> : Gecko will emphasize legibility over rendering speed and geometric precision; in Gecko 1.9, this enables kerning and optional ligatures</li> <li><strong>geometricPrecision</strong> : Gecko will emphasize geometric precision over rendering speed and legibility</li>
</ul>
<h3 name="Examples">Examples</h3>
<p>{{ CSSRefExampleLink("text-rendering") }}</p>
<pre>p.fast { text-rendering: optimizeSpeed; }

p.pretty { font-family: Calibri, 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>n/a</td> </tr> </tbody>
</table>
<h3 name="See_also">See also</h3>
<p>{{ CSS_Reference:Text() }}</p>
Revert to this revision