initial commit

1 files changed, 189 insertions, 0 deletions

diff --git a/files/pt-br/web/css/text-rendering/index.html b/files/pt-br/web/css/text-rendering/index.html
new file mode 100644
index 0000000000..8bb1230959
--- /dev/null
+++ b/files/pt-br/web/css/text-rendering/index.html
@@ -0,0 +1,189 @@
+---
+title: text-rendering
+slug: Web/CSS/text-rendering
+translation_of: Web/CSS/text-rendering
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Sumário">Sumário</h2>
+
+<p>A propriedade CSS <code>text-rendering</code> provê informações para o mecanismo de renderização sobre o que otimizar no momento em que ele renderiza texto. O navegador faz escolhas entre velocidade, legibilidade e precisão geométrica. A propriedade <code>text-rendering</code> é uma propriedade SVG que não é definida em nenhum padrão CSS. Porém, navegadores Gecko e WebKit permitem o uso da propriedade em conteúdos HTML e XML nas plataformas Windows, Mac OS X e Linux. </p>
+
+<p>Um efeito bastante visível é o <code>optimizeLegibility</code>, que habilita ligaduras (ff, fi, fl etc.) para algumas fontes com o texto menores que 20px como, por exemplo, fontes da Microsoft (<em>Calibri, Candara, Constantia </em>e<em> Corbel</em> ou a família de fontes <em>DejaVu</em>).</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="eval">text-rendering:  auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>O navegador faz sugestões de quando otimizar velocidade, legibilidade e precisão geométrica enquando formata o texto. Para diferenças em como esse valor é interpretado pelo navegador, veja a tabela de compatibilidades.</dd>
+ <dt><code>optimizeSpeed</code></dt>
+ <dd>O navegador prioriza a velocidade de renderização sobre a legibilidade e precisão geométrica no momento de rederização do texto. Essa opção desabilita o kerning<sup>1</sup> e ligatures<sup>2</sup>.</dd>
+ <dt><code>optimizeLegibility</code></dt>
+ <dd>O navegador prioriza legibilidade sobre a velocidade de renderização e precisão geométrica. Essa propriedade habilita o kerning e ligatures opcionais.</dd>
+ <dt><code>geometricPrecision</code></dt>
+ <dd>
+ <p>O browser prioriza a precisão geométrica sobre a velocidade de renderização e legibilidade. Alguns aspectos de fontes - tais como kerning - não se escala linearmente e, dessa forma, <code>geometricPrecision</code> pode tornar essas fontes visualmente boas.</p>
+
+ <p>Em SVG, quando o texto é escalado para cima ou para baixo, os navegadores calculam o tamanho final do texto (que é o tamanho de fonte específicado e a escala aplicada) e requer uma fonte de tamanho computado à partir das fontes do sistema. Mas se você requer um tamanho de fonte de, digamos, 9 com a escala de 140%, o resultado do tamanho da fonte de 12.6 não explicitamente existe no sistema, então o browser ira arredondar o tamanho da fonte para 12.</p>
+
+ <p>Mas a propriedade <code>geometricPrecision</code> - quando totalmente surpotada pelo mecanismo de renderização - deixa você escalar seu texto fluidamente. Para fatores de larga escala, você pode ver uma renderização de texto não tão bonita, mas com o tamanho esperado - nem arredondado para cima ou para baixo para o mais próximo tamanho suportado pelo sistema Windows ou Linux.</p>
+
+ <p>Navegadores WebKit precisamente aplicam o valor específico, mas os navegadores Gecko tratam o esse valor como <code>optimizeLegibility</code>.</p>
+ </dd>
+</dl>
+
+<h2 id="Exemplos">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>O valor padrão de 20px para <code>auto</code> pode ser alterado na propriedade <code>browser.display.auto_quality_min_font_size </code>do navegador.</p>
+
+<p>A opção optimizeSpeed não tem efeito na versão 2.0 do Gecko {{ geckoRelease("2.0") }}, devido ao código padrão de renderização de texto que já é muito rápido e não existe até o momento um código mais rápido para esse trabalho. Veja detalhes em {{ bug(595688) }}.</p>
+
+<h2 id="Especificações">Especificações</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> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Essa é uma especificação SVG, e não é definida em nenhum padrão CSS. Gecko (Firefox) e WebKit aplicam a propriedade <code>text-rendering</code> para códigos HTML e XML.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade entre Navegadores</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>Suporte basico para plataformas Windows e Linux</td>
+   <td>
+    <p>4.0 but the implementation known bugs on Windows and Linux which can break <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> or cause <a href="http://crbug.com/149548" title="http://crbug.com/149548">text to overlap</a></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>Surpote basico para outros sistemas operacionais</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 <code>optimizeSpeed</code>.<br>
+    Work is continuing on{{ Webkitbug("41363") }}</td>
+   <td>
+    <p>Se o tamanho da fonte for maior ou igual a 20px, navegadores Gecko usam o valor <code>optimizeLegibility</code>. Para fontes de tamanho menores que 20px, Gecko usa <code>optimizeSpeed</code>.</p>
+   </td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>Safari treats this as <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   {{ Webkitbug("60317") }}</td>
+   <td>Gecko trata esse valor da mesma forma que trata o valor <code>optimizeLegibility</code>.</td>
+   <td> {{ CompatNo() }}</td>
+   <td> {{ CompatNo() }}</td>
+   <td> </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>