mozilla

Revision 24994 of text-rendering

  • Revision slug: CSS/text-rendering
  • Revision title: text-rendering
  • Revision id: 24994
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 7 words added, 4 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 means the ligature feature is turned off or on between optimizeSpeed vs. optimizeLegibility.

  • {{ Xref_cssinitial() }}: auto
  • Applies to: 'text' elements
  • {{ Xref_cssinherited() }}: yes
  • Media: {{ Xref_cssvisual() }}
  • {{ 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. 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, sans-serif; text-rendering: optimizeLegibility; }

Specifications

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

Browser compatibility

Browser Lowest Version
Internet Explorer n/a
Firefox 3.0
Opera n/a
 Safari  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 means the ligature feature is turned off or on between<code> optimizeSpeed </code>vs.<code> optimizeLegibility</code>.</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>
<h3 name="Syntax">Syntax</h3>
<pre class="eval">text-rendering:  auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit
</pre>
<h3 name="Values">Values</h3>
<dl> <dt>auto</dt><dd>Gecko will make educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text.</dd><dt>optimizeSpeed</dt><dd>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. </dd><dt>optimizeLegibility</dt><dd> Gecko will emphasize legibility over rendering speed and geometric precision; in Gecko 1.9, this enables kerning and optional ligatures. </dd><dt>geometricPrecision</dt><dd> Gecko will emphasize geometric precision over rendering speed and legibility. </dd></dl>
<h3 name="Examples">Examples</h3>
<p>{{ CSSRefExampleLink("text-rendering") }}</p>
<pre>p.fast { text-rendering: optimizeSpeed; }

p.pretty { font-family: Calibri, sans-serif; text-rendering: optimizeLegibility; }
</pre>
<h3 name="Specifications">Specifications</h3>
<p>This is a SVG property, it is not defined in any CSS standard. Gecko (Firefox) applies<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 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>n/a</td> </tr> <tr> <td>Firefox</td> <td>3.0</td> </tr> <tr> <td>Opera</td> <td>n/a</td> </tr> <tr> <td> Safari</td> <td> n/a</td> </tr> </tbody>
</table>
<h3 name="See_also">See also</h3>
<p>{{ CSS_Reference:Text() }}</p>
Revert to this revision