A writing-modepropriedade altera o alinhamento do texto para que possa ser lido de cima para baixo ou da esquerda para a direita, dependendo do idioma. Por exemplo, digamos que queremos adicionar algum texto que seja lido de cima para baixo e da direita para a esquerda, como este:
.vertical-rl ( writing-mode: vertical-rl; )Veja o modo de escrita da caneta: vertical-rl por CSS-Tricks (@ css-tricks) em CodePen.
Isso é mais útil em idiomas como chinês, japonês ou coreano, onde o texto costuma ser definido verticalmente. No idioma inglês, é mais provável que você queira usar essa propriedade por motivos estéticos, como alinhar um título em um bloco de texto como este:
Veja a Caneta YWBWGA por CSS-Tricks (@ css-tricks) em CodePen.
Valores
Nos exemplos abaixo, deixei a primeira letra do texto vermelha, para que seja mais fácil ver em que direção você precisa começar a ler.
horizontal-tb
Este é o valor padrão da propriedade: o texto é lido da esquerda para a direita e de cima para baixo.
Veja o modo de escrita da caneta: horizontal-tb por CSS-Tricks (@ css-tricks) em CodePen.
vertical-rl
O texto é lido da direita para a esquerda e de cima para baixo:
Veja o modo de escrita da caneta: vertical-rl por CSS-Tricks (@ css-tricks) em CodePen.
vertical-lr
O texto é lido da esquerda para a direita e de cima para baixo:
Veja o modo de escrita da caneta: vertical-rl por CSS-Tricks (@ css-tricks) em CodePen.
Links Relacionados
- Texto vertical com modos de escrita CSS3
- Ahmad Shadeed no modo de escrita
Suporte de navegador
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 8 * | 41 | 11 | 12 | 5,1 * |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 * | 5,0-5,1 * |