path: root/files/pt-br/web/css/writing-mode/index.html

---
title: writing-mode
slug: Web/CSS/writing-mode
tags:
  - CSS
  - Layout
  - Propriedade CSS
  - Referencia
translation_of: Web/CSS/writing-mode
---
<div>{{CSSRef}}</div>

<p>A propriedade CSS <strong><code>writing-mode</code></strong> define se as linhas do texto são dispostas horizontalmente ou verticalmente e a direção que os blocos seguem</p>

<pre class="brush:css no-line-numbers">/* Valores das palavras-chave */
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;

/* Valores globais */
writing-mode: inherit;
writing-mode: initial;
writing-mode: unset;</pre>

<h2 id="Sintaxe">Sintaxe</h2>

<p>A propriedade especifica o <em>comportamento de fluxo do bloco, </em>que é a maneira em que os containers são empilhados ou distribuídos, e a direção em que o conteudo é alinhado ou disposto dentro dos containers. Assim a propriedade <code>writing-mode</code> também determina a distribuição do conteúdo no nível de bloco</p>

<p>{{cssinfo}}</p>

<h3 id="Values">Values</h3>

<dl>
 <dt><code>horizontal-tb</code></dt>
 <dd>Conteúdo é disposto horizontalmente da esquerda para a direita, verticalmente de cima para baixo. A proxima inha horizontal é posicionada abaixo da linha anterior.</dd>
 <dt><code>vertical-rl</code></dt>
 <dd>Conteúdo é disposto verticalmente de cima para baixo, horizontalmente da direita para a esquerda. A proxima linha vertical é posicionada à esquerda da linha anterior.</dd>
 <dt><code>vertical-lr</code></dt>
 <dd>Conteúdo é disposto verticalmente de cima para baixo, horizontalmente da esquerda para a direita. A proxima linha vertical é posicionada à direita da linha anterior.</dd>
 <dt><code>sideways-rl</code>{{experimental_inline}}</dt>
 <dd>Conteúdo é disposto verticalmente de cima para baixo e todos os glifos, até mesmo os que estão em uma escrita vertical, são colocados lado a lado para a direita.</dd>
</dl>

<dl>
 <dt><code>sideways-lr</code>{{experimental_inline}}</dt>
 <dd>Conteúdo é disposto verticalmente de cima para baixo e todos os glifos, até mesmo os que estão em uma escrita vertical, são colocados lado a lado para a esquerda.</dd>
 <dt><code>lr</code> {{deprecated_inline}}</dt>
 <dd>Descontinuado exceto para docmentos SVG1. Para CSS, use  <code>horizontal-tb</code>.</dd>
 <dt><code>lr-tb</code> {{deprecated_inline}}</dt>
 <dd>Descontinuado exceto para docmentos SVG1. Para CSS, use <code>horizontal-tb</code>.</dd>
 <dt><code>rl</code> {{deprecated_inline}}</dt>
 <dd>Descontinuado exceto para docmentos SVG1. Para CSS, use <code>horizontal-tb</code>.</dd>
 <dt><code>tb</code> {{deprecated_inline}}</dt>
 <dd>Descontinuado exceto para docmentos SVG1. Para CSS, use <code>vertical-lr</code>.</dd>
 <dt><code>tb-rl</code> {{deprecated_inline}}</dt>
 <dd>Descontinuado exceto para docmentos SVG1. Para CSS, use <code>vertical-rl</code>.</dd>
</dl>

<h3 id="Sintaxe_formal">Sintaxe formal</h3>

{{csssyntax}}

<h2 id="Exemplo">Exemplo</h2>

<p>Esse exemplo demonstra todos os modos de escrita, mostrando cada um com texto e várias línguas.</p>

<h3 id="HTML">HTML</h3>

<p>O HTML é simplesmente um {{HTMLElement("table")}} com cada modo de escrita em uma linha com uma coluna mostrando texto em diversos scripts usando esse modo de escrita.</p>

<pre class="brush: html">&lt;table&gt;
    &lt;tr&gt;
        &lt;th&gt;value&lt;/th&gt;
        &lt;th&gt;Vertical script&lt;/th&gt;
        &lt;th&gt;Horizontal script&lt;/th&gt;
        &lt;th&gt;Mixed script&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;horizontal-tb&lt;/td&gt;
        &lt;td class="example Text1"&gt;&lt;span&gt;我家没有电脑。&lt;/span&gt;&lt;/td&gt;
        &lt;td class="example Text1"&gt;&lt;span&gt;Example text&lt;/span&gt;&lt;/td&gt;
        &lt;td class="example Text1"&gt;&lt;span&gt;1994年に至っては&lt;/span&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;vertical-lr&lt;/td&gt;
        &lt;td class="example Text2"&gt;&lt;span&gt;我家没有电脑。&lt;/span&gt;&lt;/td&gt;
        &lt;td class="example Text2"&gt;&lt;span&gt;Example text&lt;/span&gt;&lt;/td&gt;
        &lt;td class="example Text2"&gt;&lt;span&gt;1994年に至っては&lt;/span&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;vertical-rl&lt;/td&gt;
        &lt;td class="example Text3"&gt;&lt;span&gt;我家没有电脑。&lt;/span&gt;&lt;/td&gt;
        &lt;td class="example Text3"&gt;&lt;span&gt;Example text&lt;/span&gt;&lt;/td&gt;
        &lt;td class="example Text3"&gt;&lt;span&gt;1994年に至っては&lt;/span&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;sideways-lr&lt;/td&gt;
        &lt;td class="example Text4"&gt;&lt;span&gt;我家没有电脑。&lt;/span&gt;&lt;/td&gt;
        &lt;td class="example Text4"&gt;&lt;span&gt;Example text&lt;/span&gt;&lt;/td&gt;
        &lt;td class="example Text4"&gt;&lt;span&gt;1994年に至っては&lt;/span&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;sideways-rl&lt;/td&gt;
        &lt;td class="example Text5"&gt;&lt;span&gt;我家没有电脑。&lt;/span&gt;&lt;/td&gt;
        &lt;td class="example Text5"&gt;&lt;span&gt;Example text&lt;/span&gt;&lt;/td&gt;
        &lt;td class="example Text5"&gt;&lt;span&gt;1994年に至っては&lt;/span&gt;&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</pre>

<h3 id="CSS">CSS</h3>

<div class="hidden">
<p>Apenas um CSS preparatório para fazer as coisas parecerem um pouco melhor:</p>

<pre class="brush: css">table {
  border-collapse:collapse;
}
td, th {
  border: 1px black solid; padding: 3px;
}
th {
  background-color: lightgray;
}
.example {
  height:75px;
  width:75px;
}</pre>
</div>

<p>O CSS que ajusta a direcionalidade do conteúdo é algo como esse:</p>

<pre class="brush:css;">.example.Text1 span, .example.Text1 {
  writing-mode: horizontal-tb;
  -webkit-writing-mode: horizontal-tb;
  -ms-writing-mode: horizontal-tb;
}

.example.Text2 span, .example.Text2 {
  writing-mode: vertical-lr;
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: vertical-lr;
}

.example.Text3 span, .example.Text3 {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;
}

.example.Text4 span, .example.Text4 {
  writing-mode: sideways-lr;
  -webkit-writing-mode: sideways-lr;
  -ms-writing-mode: sideways-lr;
}

.example.Text5 span, .example.Text5 {
  writing-mode: sideways-rl;
  -webkit-writing-mode: sideways-rl;
  -ms-writing-mode: sideways-rl;
}
</pre>

<p>{{EmbedLiveSample("Example", 400, 500)}}</p>

<h3 id="Resultado_atual">Resultado atual</h3>

<p>Essa é uma imagem mostrando o que o resultado deve parecer, no caso do suporte do seu navegador para <code>writing-mode</code> estiver incompleto.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/12201/writing-mode-actual-result.png" style="height: 430px; width: 351px;"></p>

<h2 id="Especificação">Especificação</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Status</th>
   <th scope="col">Comentário</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS3 Writing Modes", "#block-flow", "writing-mode")}}</td>
   <td>{{Spec2("CSS3 Writing Modes")}}</td>
   <td>Definição inicial</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS4 Writing Modes", "#block-flow", "writing-mode")}}</td>
   <td>{{Spec2("CSS4 Writing Modes")}}</td>
   <td>Adicionar <code>sideways-lr</code> e <code>sideways-rl</code></td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <thead>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox</th>
   <th>Internet Explorer (defunct)</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>Suporte básico</th>
   <td class="google.chrome">{{CompatChrome(8)}}{{property_prefix("-webkit")}}<br>
    {{CompatVersionUnknown}}</td>
   <td class="microsoft.edge">{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
    {{CompatVersionUnknown}}</td>
   <td class="mozilla.firefox">{{CompatGeckoDesktop(41)}}<sup>[1]</sup><sup>[3]</sup></td>
   <td class="internet.explorer">9{{property_prefix("-ms")}}<sup>[2]</sup></td>
   <td class="opera">{{CompatOpera(15)}}{{property_prefix("-webkit")}}</td>
   <td class="safari">5.1{{property_prefix("-webkit")}}</td>
  </tr>
 </tbody>
 <tbody>
  <tr>
   <th><code>lr</code></th>
   <td class="google.chrome" rowspan="6">{{CompatChrome(48)}} (uprefixed)</td>
   <td class="microsoft.edge" rowspan="6">{{CompatVersionUnknown}}</td>
   <td class="mozilla.firefox" rowspan="6">{{CompatGeckoDesktop(43)}}</td>
   <td class="internet.explorer" rowspan="6">9{{property_prefix("-ms")}}<sup>[2]</sup></td>
   <td class="opera" rowspan="6">{{CompatVersionUnknown}}</td>
   <td class="safari" rowspan="6">{{CompatUnknown}}</td>
  </tr>
  <tr>
   <th><code>lr-tb</code></th>
  </tr>
  <tr>
   <th><code>rl</code></th>
  </tr>
  <tr>
   <th><code>rl-tb</code></th>
  </tr>
  <tr>
   <th><code>tb</code></th>
  </tr>
  <tr>
   <th><code>tb-rl</code></th>
  </tr>
 </tbody>
 <tbody>
  <tr>
   <th><code>horizontal-tb</code></th>
   <td class="google.chrome" rowspan="3">{{CompatVersionUnknown}} (as of 58)</td>
   <td class="microsoft.edge" rowspan="3">{{CompatVersionUnknown}} (as of 40)</td>
   <td class="mozilla.firefox" rowspan="3">{{CompatGeckoDesktop(43)}}</td>
   <td class="internet.explorer" rowspan="3">{{CompatNo}} (as of 11)</td>
   <td class="opera" rowspan="3">{{CompatVersionUnknown}} (as of 44)</td>
   <td class="safari" rowspan="3">{{CompatUnknown}}</td>
  </tr>
  <tr>
   <th><code>vertical-lr</code></th>
  </tr>
  <tr>
   <th><code>vertical-rl</code></th>
  </tr>
 </tbody>
 <tbody>
  <tr>
   <th><code>sideways-lr</code></th>
   <td class="google.chrome" rowspan="2">{{CompatNo}} (as of 58)</td>
   <td class="microsoft.edge" rowspan="2">{{CompatNo}} (as of 40)</td>
   <td class="mozilla.firefox" rowspan="2">{{CompatGeckoDesktop(43)}}</td>
   <td class="internet.explorer" rowspan="2">{{CompatNo}} (as of 11)</td>
   <td class="opera" rowspan="2">{{CompatNo}} (as of 44)</td>
   <td class="safari" rowspan="2">{{CompatUnknown}}</td>
  </tr>
  <tr>
   <th><code>sideways-rl</code></th>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Chrome for Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>{{CompatChrome(3)}}{{property_prefix("-webkit")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>47{{property_prefix("-webkit")}}<br>
    {{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
    {{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile(41)}} <sup>[1][3]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>5.1 {{property_prefix("-webkit")}}</td>
  </tr>
  <tr>
   <td>SVG 1.1 values <code>lr</code>, <code>lr-tb</code>, <code>rl</code>, <code>tb</code>, <code>tb-rl</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatChrome(48.0)}} (uprefixed)</td>
   <td>{{CompatChrome(48.0)}} (uprefixed)</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile(43)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>sideways-rl,sideways-lr</code></td>
   <td>{{CompatNo}}<sup>[4]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>vertical-lr</code></td>
   <td><code>vertical-rl</code></td>
   <td>{{CompatNo}}<sup>[4]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] An experimental implementation was available since Gecko 36. It is governed by the preference <code>layout.css.vertical-text.enabled</code>, defaulting to <code>false</code> until Firefox 38. From Firefox 39 and Firefox 40, the preference was <code>true</code> for Nightly and DevTools editions only. Note that not all CSS widgets (e.g. tables) obey to it, yet. The preference has been removed in Gecko 51 and this property cannot be disabled since this version.</p>

<p>[2] The implementation in Internet Explorer differs from the specification. See the <a href="https://msdn.microsoft.com/en-us/library/ie/ms531187%28v=vs.85%29.aspx">related article in the Internet Explorer Dev Center</a>.</p>

<p>[3] Bidirectional and rtl scripts are supported in vertical modes only since Gecko 42.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>SVG <code><a href="/en-US/docs/Web/SVG/Attribute/writing-mode">writing-mode</a></code> attribute</li>
 <li>{{Cssxref("direction")}}</li>
 <li>{{Cssxref("unicode-bidi")}}</li>
 <li>{{Cssxref("text-orientation")}}</li>
 <li>{{Cssxref("text-combine-upright")}}</li>
</ul>