Orientação de texto - CSS-Tricks

A text-orientationpropriedade em CSS alinha o texto em uma linha ao trabalhar com uma vertical writing-mode. Basicamente, ele gira a linha 90 ° no sentido horário para ajudar a controlar como os idiomas verticais são exibidos - da mesma forma que text-combine-uprightgira grupos de caracteres em uma linha de texto em um script vertical, mas para linhas inteiras de texto.

.element ( text-orientation: mixed; writing-mode: vertical-rl; )

Para lidar com texto bidirecional - um bloco que contém texto da esquerda para a direita e da direita para a esquerda, por exemplo - verifique a unicode-bidipropriedade. Ele é combinado com a directionpropriedade para substituir a forma como o navegador decide exibir o texto.

Sintaxe

text-orientation: mixed | upright | sideways

Inicial: mixed
Aplica-se a: todos os elementos, exceto grupos de linhas da tabela, linhas, grupos de colunas e colunas
Herdado: sim
Porcentagens: n / a
Valor calculado: valor especificado
Tipo de animação: não animável

Valores

/* Keyword values */ text-orientation: mixed; /* default */ text-orientation: upright; text-orientation: sideways; text-orientation: sideways-right; /* Global values */ text-orientation: inherit; text-orientation: initial; /* mixed */ text-orientation: unset;

mixed: Valor padrão. Os caracteres em um script horizontal são girados 90 ° no sentido horário. Os caracteres em um script vertical são exibidos em sua orientação vertical natural.
upright: Os caracteres em um script horizontal são definidos em sua posição vertical vertical natural, incluindo alguns glifos. Portanto, onde um modo de escrita vertical pode girar uma linha de texto de forma que os caracteres fiquem de lado, esse valor girará os próprios caracteres 90 ° em sua posição natural. Observe que esse valor força a directionpropriedade em um valor usado de ltr, o que significa que todos os caracteres são tratados como se estivessem no modo de escrita da esquerda para a direita.
sideways: Todo o texto no modo de escrita vertical é exibido lateralmente, como se estivesse em um layout horizontal, mas a linha inteira é girada 90 ° no sentido horário.
sideways-right: Alguns navegadores respeitam este valor como um alias para o sidewaysvalor mantido para compatibilidade com versões anteriores.

use-glyph-orientationfoi removido como um valor de palavra-chave em dezembro de 2015. Era usado em elementos SVG para definir propriedades SVG glyph-orientation-verticale glyph-orientation-horizontalque agora estão obsoletas. glyph-orientation-verticalagora é um alias para text-orientation.

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
48	41	Não	79	10,1 *

Celular / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	10,0-10,2

Especificação

Modos de escrita CSS nível 3 (rascunho do editor)

Mais Informações

Por que a orientação vertical do texto é um pesadelo para a compatibilidade entre navegadores? por Nikhil - Uma explicação completa de text-orientatione writing-mode.
Crie facilmente texto lateral usando a propriedade CSS do “modo de escrita” de Adi Purdila - Explore diferentes abordagens além de usar text-orientation.
2 maneiras de criar texto vertical em CSS por WS Toh - Uma comparação mais direta entre as abordagens usando writing-modee text-orientation.
Text Rotation de Chris Coyier - Uma abordagem para texto vertical usando em transformvez de writing-modeou text-orientation.