Tradução em progresso.

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

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

Sintaxe

A propriedade especifica o comportamento de fluxo do bloco, 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 writing-mode também determina a distribuição do conteúdo no nível de bloco

Initial valuehorizontal-tb
Aplica-se aall elements except table row groups, table column groups, table rows, and table columns
Inheritedyes
Midiavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Values

horizontal-tb
Conteúdo é disposto horizontalmente da esquerda para a direita, verticalmente de cima para baixo. A proxima inha horizontal é posicionada abaixo da linha anterior.
vertical-rl
Conteúdo é disposto verticalmente de cima para baixo, horizontalmente da direita para a esquerda. A proxima linha vertical é posicionada à esquerda da linha anterior.
vertical-lr
Conteúdo é disposto verticalmente de cima para baixo, horizontalmente da esquerda para a direita. A proxima linha vertical é posicionada à direita da linha anterior.
sideways-rl
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.
sideways-lr
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.
lr
Descontinuado exceto para docmentos SVG1. Para CSS, use  horizontal-tb.
lr-tb
Descontinuado exceto para docmentos SVG1. Para CSS, use horizontal-tb.
rl
Descontinuado exceto para docmentos SVG1. Para CSS, use horizontal-tb.
tb
Descontinuado exceto para docmentos SVG1. Para CSS, use vertical-lr.
tb-rl
Descontinuado exceto para docmentos SVG1. Para CSS, use vertical-rl.

Sintaxe formal

horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr

Exemplo

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

HTML

O HTML é simplesmente um <table> com cada modo de escrita em uma linha com uma coluna mostrando texto em diversos scripts usando esse modo de escrita.

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

CSS

O CSS que ajusta a direcionalidade do conteúdo é algo como esse:

.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;
}

Resultado atual

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

Especificação

Especificação Status Comentário
CSS Writing Modes Module Level 3
The definition of 'writing-mode' in that specification.
Candidata a Recomendação Definição inicial
CSS Writing Modes Level 4
The definition of 'writing-mode' in that specification.
Rascunho editorial Adicionar sideways-lr e sideways-rl

Compatibilidade do navegador

        
Característica Chrome Edge Firefox Internet Explorer (defunct) Opera Safari
Suporte básico 8-webkit
(Yes)
(Yes)-webkit
(Yes)
41 (41)[1][3] 9-ms[2] 15-webkit 5.1-webkit
lr 48 (uprefixed) (Yes) 43 (43) 9-ms[2] (Yes) ?
lr-tb
rl
rl-tb
tb
tb-rl
horizontal-tb (Yes) (as of 58) (Yes) (as of 40) 43 (43) Não suportado (as of 11) (Yes) (as of 44) ?
vertical-lr
vertical-rl
sideways-lr Não suportado (as of 58) Não suportado (as of 40) 43 (43) Não suportado (as of 11) Não suportado (as of 44) ?
sideways-rl
        
Característica Android Android Webview Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suporte básico 3-webkit (Yes) 47-webkit
(Yes)
(Yes)-webkit
(Yes)
41.0 (41) [1][3] ? ? 5.1 -webkit
SVG 1.1 values lr, lr-tb, rl, tb, tb-rl ? 48.0 (uprefixed) 48.0 (uprefixed) (Yes) 43.0 (43) ? ? ?
sideways-rl,sideways-lr Não suportado[4] Não suportado Não suportado Não suportado ? ? ? ?
vertical-lr vertical-rl Não suportado[4] Não suportado Não suportado Não suportado ? ? ? ?

[1] An experimental implementation was available since Gecko 36. It is governed by the preference layout.css.vertical-text.enabled, defaulting to false until Firefox 38. From Firefox 39 and Firefox 40, the preference was true 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.

[2] The implementation in Internet Explorer differs from the specification. See the related article in the Internet Explorer Dev Center.

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

See also

Etiquetas do documento e colaboradores

 Colaboradores desta página: jessuircleydson
 Última atualização por: jessuircleydson,