CSS - Modo de escrita
Tipos de Modos de Escrita
Horizontal-tb (Padrão)
O modo de escrita horizontal-tb é o padrão no CSS. Nesse modo, o texto flui horizontalmente da esquerda para a direita, e a próxima linha aparece abaixo da anterior. Isso é comum para idiomas escritos horizontalmente, como o português.
Exemplo de trecho de código
.horizontal-tb {
writing-mode: horizontal-tb;
}Vertical-rl
O modo de escrita vertical-rl exibe o texto verticalmente, com as linhas fluindo da direita para a esquerda. O texto é girado 90 graus no sentido horário, e a próxima linha aparece à esquerda da anterior. Esse modo é útil para menus de navegação verticais ou para exibir texto em idiomas tradicionalmente escritos verticalmente, como japonês ou chinês.
Exemplo de trecho de código
.vertical-rl {
writing-mode: vertical-rl;
}Vertical-lr
O modo de escrita vertical-lr é semelhante ao vertical-rl, mas as linhas fluem da esquerda para a direita. O texto é girado 90 graus no sentido anti-horário, e a próxima linha aparece à direita da anterior. Esse modo pode ser usado para layouts de texto vertical.
Exemplo de trecho de código
.vertical-lr {
writing-mode: vertical-lr;
}Sideways-rl
O modo de escrita sideways-rl exibe o texto verticalmente com as linhas fluindo da direita para a esquerda. Diferentemente do vertical-rl, os caracteres não são girados e permanecem na posição vertical. Esse modo é útil para layouts verticais compactos ou rótulos verticais curtos.
Exemplo de trecho de código
.sideways-rl {
writing-mode: sideways-rl;
}Sideways-lr
O modo de escrita sideways-lr é semelhante ao sideways-rl, mas as linhas fluem da esquerda para a direita. Os caracteres permanecem na posição vertical, e a próxima linha aparece à direita da anterior. Esse modo pode ser aplicado em cenários de design específicos que precisam de um layout vertical compacto.
Exemplo de trecho de código
.sideways-lr {
writing-mode: sideways-lr;
}