writing-mode
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 value | horizontal-tb |
---|---|
Aplica-se a | all elements except table row groups, table column groups, table rows, and table columns |
Inherited | yes |
Computed value | as specified |
Animation type | discrete |
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
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. |
Recomendação proposta | Definição inicial |
CSS Writing Modes Level 4 The definition of 'writing-mode' in that specification. |
Candidata a Recomendação | 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
- SVG
writing-mode
attribute direction
unicode-bidi
text-orientation
text-combine-upright