text-rendering

  • Revision slug: CSS/text-rendering
  • Revision title: text-rendering
  • Revision id: 328507
  • Criado:
  • Criador: lmiranda
  • É a revisão atual? Não
  • Comentar

Conteúdo da revisão

{{ CSSRef() }}

Summary

A propriedade CSS text-rendering prove informações para o mecanismo de rederização sobre o que otimizar no momento da rederização. The browser makes trade-offs among speed, legibility, and geometric precision. A propriedade text-rendering é uma propriedade SVG que não é definida como um padrão CSS. Porém, Gecko e WebKit browsers deixa você aplicar essa propriedade em conteúdo HTML e XML nas plataformas Windows, Mac OS X e Linux. 

One very visible effect is: optimizeLegibility enables ligatures (ff, fi, fl etc.) em textos com o tamanho menor que 20px para algumas fontes (por exemplo, Microsoft's Calibri, Candara, Constantia and Corbel ou a família de fontes DejaVu).

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

Syntax

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

Valores

auto
The browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text. For differences in how this value is interpreted by the browser, see the compatibility table.
optimizeSpeed
The browser emphasizes rendering speed over legibility and geometric precision when drawing text. It disables kerning and ligatures.
optimizeLegibility
The browser emphasizes legibility over rendering speed and geometric precision. This enables kerning and optional ligatures.
geometricPrecision

The browser emphasizes geometric precision over rendering speed and legibility. Certain aspects of fonts—such as kerning—don't scale linearly, so geometricPrecision can make text using those fonts look good.

In SVG, when text is scaled up or down, browsers calculate the final size of the text (which is the specified font size and the applied scale) and request a font of that computed size from the platform's font system. But if you request a font size of, say, 9 with a scale of 140%, the resulting font size of 12.6 doesn't explicitly exist in the font system, so the browser rounds the font size to 12 instead. This results in stair-step scaling of text.

But the geometricPrecision property—when fully supported by the rendering engine—lets you scale your text fluidly. For large scale factors, you might see less-than-beautiful text rendering, but the size is what you would expect—neither rounded up nor down to the nearest font size supported by Windows or Linux.

WebKit precisely applies the specified value, but Gecko treats the value the same as optimizeLegibility.

Exemplos

/* 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

Gecko Notes

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

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.

Specifications

Specification Status Comment
{{ SpecName('SVG1.1', 'painting.html#TextRenderingProperty', 'text-rendering') }} {{ Spec2('SVG1.1') }}  

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.

Browser compatibility

{{ CompatibilityTable() }}

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

4.0 but the implementation known bugs on Windows and Linux which can break font substitition, small-caps, letter-spacing or cause text to overlap

3.0 (1.9) {{ CompatNo() }} {{ CompatNo() }} 5.0 (532.5)
Basic support for other operating systems {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
auto Chrome treats this as optimizeSpeed.
Work is continuing on{{ Webkitbug("41363") }}
If the font size is 20 px or higher, Gecko browsers use optimizeLegibility; for smaller text, they use optimizeSpeed. {{ CompatNo() }} {{ CompatNo() }} Safari treats this as optimizeSpeed.
Work is continuing on{{ Webkitbug("41363") }}
geometricPrecision 13 supports true geometric precision, without rounding up or down to the nearest supported font size in the operating system.
Introduced in WebKit 535.1   {{ Webkitbug("60317") }}
Gecko treats the value the same as optimizeLegibility.  {{ CompatNo() }}  {{ CompatNo() }}  
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

  • {{ CSS_Reference:Text() }}

Fonte da revisão

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<p>A propriedade CSS <code>text-rendering</code> prove informações para o mecanismo de rederização sobre o que otimizar no momento da rederização. The browser makes trade-offs among speed, legibility, and geometric precision. A propriedade text-rendering é uma propriedade SVG que não é definida como um padrão CSS. Porém, Gecko e WebKit browsers deixa você aplicar essa propriedade em conteúdo HTML e XML nas plataformas Windows, Mac OS X e Linux.&nbsp;</p>
<p>One very visible effect is:<code> optimizeLegibility </code>enables ligatures (ff, fi, fl etc.) em textos com o tamanho menor que 20px para algumas fontes (por exemplo, Microsoft's<em> Calibri, Candara, Constantia and Corbel</em> ou a família de fontes <em>DejaVu</em>).</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn> auto</li>
  <li><dfn>Applies to</dfn> all elements</li>
  <li><dfn>{{ Xref_cssinherited() }}</dfn> yes</li>
  <li><dfn>Media</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn> ?</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre class="eval">
text-rendering:  auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit</pre>
<h3 id="Values">Valores</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. For differences in how this value is interpreted by the browser, see the compatibility table.</dd>
  <dt>
    <code>optimizeSpeed</code></dt>
  <dd>
    The browser emphasizes rendering speed over legibility and geometric precision when drawing text. It disables kerning and ligatures.</dd>
  <dt>
    <code>optimizeLegibility</code></dt>
  <dd>
    The browser emphasizes legibility over rendering speed and geometric precision. This enables kerning and optional ligatures.</dd>
  <dt>
    <code>geometricPrecision</code></dt>
  <dd>
    <p>The browser emphasizes geometric precision over rendering speed and legibility. Certain aspects of fonts—such as kerning—don't scale linearly, so geometricPrecision can make text using those fonts look good.</p>
    <p>In SVG, when text is scaled up or down, browsers calculate the final size of the text (which is the specified font size and the applied scale) and request a font of that computed size from the platform's font system. But if you request a font size of, say, 9 with a scale of 140%, the resulting font size of 12.6 doesn't explicitly exist in the font system, so the browser rounds the font size to 12 instead. This results in stair-step scaling of text.</p>
    <p>But the <code>geometricPrecision</code> property—when fully supported by the rendering engine—lets you scale your text fluidly. For large scale factors, you might see less-than-beautiful text rendering, but the size is what you would expect—neither rounded up nor down to the nearest font size supported by Windows or Linux.</p>
    <p>WebKit precisely applies the specified value, but Gecko treats the value the same as <code>optimizeLegibility</code>.</p>
  </dd>
</dl>
<h2 id="Examples">Exemplos</h2>
<pre class="brush:css">
/* 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 id="Live_Example">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 id="Gecko_Notes">Gecko 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>
<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>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('SVG1.1', 'painting.html#TextRenderingProperty', 'text-rendering') }}</td>
      <td>{{ Spec2('SVG1.1') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<p name="Browser_Compatibility">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>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
<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 but the&nbsp;implementation known bugs on Windows and Linux which can break&nbsp;<a href="http://crbug.com/114719" title="http://crbug.com/114719">font substitition</a>, <a href="http://crbug.com/51973" title="http://crbug.com/51973">small-caps</a>, <a href="http://crbug.com/55458" title="http://crbug.com/55458">letter-spacing</a>&nbsp;or cause <a href="http://crbug.com/149548" title="http://crbug.com/149548">text to overlap</a></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>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><code>auto</code></td>
        <td>Chrome treats this as&nbsp;<code>optimizeSpeed</code>.<br />
          Work is continuing on{{ Webkitbug("41363") }}</td>
        <td>If the font size is 20 px or higher, Gecko browsers use <code>optimizeLegibility</code>; for smaller text, they use <code>optimizeSpeed</code>.</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>Safari treats this as&nbsp;<code>optimizeSpeed</code>.<br />
          Work is continuing on{{ Webkitbug("41363") }}</td>
      </tr>
      <tr>
        <td><code>geometricPrecision</code></td>
        <td>13 supports true geometric precision, without rounding up or down to the nearest supported font size in the operating system.<br />
          Introduced in WebKit 535.1 &nbsp; {{ Webkitbug("60317") }}</td>
        <td>Gecko treats the value the same as&nbsp;<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>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE&nbsp;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>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{ CSS_Reference:Text() }}</li>
</ul>
Reverter para esta revisão