Propriedade CSS text-orientation
Use a propriedade CSS text-orientation para definir a orientação dos caracteres numa linha de conteúdo. Veja os valores e experimente exemplos.
A propriedade CSS text-orientation controla como cada caractere é orientado dentro de uma linha quando o texto flui verticalmente. É a ferramenta que se usa ao compor scripts do Leste Asiático (chinês, japonês, coreano) no seu fluxo vertical tradicional, ou quando se pretende um rótulo ou título vertical num design com escrita latina.
Por si só, text-orientation não faz nada — só tem efeito quando a direção da linha é vertical. Essa direção é definida com a propriedade writing-mode (por exemplo, vertical-rl ou vertical-lr). Pense nos dois como uma divisão de tarefas: writing-mode decide em que sentido a linha flui, e text-orientation decide como cada glifo é girado ao longo dessa linha.
Este capítulo aborda o que cada valor faz, quando escolher um em detrimento de outro, os detalhes sobre suporte de navegadores e exemplos executáveis que pode editar.
Por que usá-la
- Tipografia CJK vertical. Por padrão (
mixed), caracteres latinos misturados em texto chinês ou japonês vertical são rotacionados 90°, o que resulta numa leitura estranha.uprightmantém-nos na posição correta. - Títulos verticais decorativos e etiquetas laterais. Títulos no estilo de lombada, etiquetas de barra lateral e rótulos de eixos de gráficos em scripts latinos geralmente ficam melhor na posição vertical ou deitados de lado.
- Renderização fiel de conteúdo com scripts mistos, onde números, acrónimos ou estrangeirismos aparecem dentro de texto vertical.
Visão geral dos valores
text-orientation aceita cinco valores relacionados com scripts — mixed, upright, sideways, sideways-right e use-glyph-orientation — além das palavras-chave globais initial e inherit. Todos os valores relacionados com scripts só se aplicam em modos tipográficos verticais.
Algumas notas históricas relevantes: o antigo valor sideways-left foi removido da especificação, sideways-right é mantido apenas como um alias de sideways, e os casos de uso não verticais foram transferidos para os valores sideways-lr / sideways-rl da propriedade writing-mode.
A propriedade text-orientation só tem efeito quando writing-mode é vertical (vertical-rl ou vertical-lr). Num layout horizontal normal, é ignorada.
| Valor Inicial | mixed |
|---|---|
| Aplica-se a | Todos os elementos, exceto grupos de linhas de tabela, linhas, grupos de colunas e colunas. |
| Herdada | Sim. |
| Animável | Não. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.textOrientation = "upright"; |
Sintaxe
Valores de CSS text-orientation
text-orientation: mixed | upright | sideways | sideways-right | use-glyph-orientation | initial | inherit;Exemplo da propriedade text-orientation com o valor "mixed":
Exemplo de código CSS text-orientation
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
writing-mode: vertical-rl;
text-orientation: mixed;
}
</style>
</head>
<body>
<h2>Text-orientation property example</h2>
<p>Lorem ipsum is simply dummy text.</p>
</body>
</html>Com mixed, as letras latinas permanecem na posição vertical enquanto a linha flui de cima para baixo e da direita para a esquerda. Este é o padrão do navegador para modos de escrita vertical e o que se deve usar para texto CJK genuíno.
Resultado
Exemplo da propriedade text-orientation com o valor "upright":
CSS text-orientation com o valor upright, exemplo
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
writing-mode: vertical-lr;
text-orientation: upright;
}
</style>
</head>
<body>
<h2>Text-orientation property example</h2>
<p>Lorem ipsum is simply dummy text.</p>
</body>
</html>O valor upright força todos os glifos a ficarem na posição vertical, independentemente do script. É a escolha habitual para um título vertical decorativo num design com escrita latina, e para manter palavras latinas incorporadas legíveis dentro de texto CJK vertical. Note que upright também força a direção bidirecional direction do texto para ltr.
Exemplo: título vertical ao lado do corpo do texto
Outro exemplo de código CSS text-orientation
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #ffffff;
color: #000000;
font-size: 1.1em;
}
.example {
background: #cccccc;
color: #fff;
padding: 3em;
margin: 40px auto 0;
width: 400px;
max-width: 400px;
display: flex;
}
h1 {
color: #8ebf42;
margin: 0.15em 0.75em 0 0;
font-family: 'Bungee Shade', cursive;
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
text-orientation: upright;
-webkit-font-feature-settings: "vkrn", "vpal";
font-feature-settings: "vkrn", "vpal";
}
p {
margin: 0;
line-height: 1.5;
font-size: 1.15em;
}
</style>
</head>
<body>
<h2>Text-orientation property example</h2>
<div class="example">
<h1>Lorem Ipsum</h1>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
</body>
</html>Suporte de navegadores e alternativas
text-orientation é suportada em todos os navegadores modernos (Chrome, Edge, Firefox, Safari). Duas notas práticas:
- Só é significativa em conjunto com um
writing-modevertical, por isso defina sempre os dois em conjunto. - Versões mais antigas do WebKit precisam do prefixo
-webkit-emwriting-mode(pode ver isso no exemplo acima). A propriedadetext-orientationem si não precisa de prefixo nos navegadores atuais. - Evite
use-glyph-orientation: está depreciada e já não é suportada nos navegadores modernos.
Valores
| Valor | Descrição |
|---|---|
| mixed | Scripts horizontais são dispostos na posição vertical, enquanto scripts verticais são rotacionados 90° no sentido dos ponteiros do relógio. Este é o valor padrão da propriedade. |
| upright | Todos os caracteres são dispostos na posição vertical, independentemente do script. Não afeta a propriedade direction. |
| sideways | Os caracteres são dispostos como seriam horizontalmente, mas com toda a linha rotacionada 90° no sentido dos ponteiros do relógio. |
| sideways-right | Um alias de sideways mantido por razões de compatibilidade. |
| use-glyph-orientation | Depreciado. Anteriormente mapeava para as propriedades SVG obsoletas glyph-orientation-vertical e glyph-orientation-horizontal. Já não é suportado nos navegadores modernos. |
| initial | Faz a propriedade usar o seu valor padrão. |
| inherit | Herda a propriedade do seu elemento pai. |
Propriedades relacionadas
writing-mode— define a direção da linha (horizontal ou vertical) e é obrigatória para quetext-orientationtenha efeito.text-combine-upright— compacta uma sequência curta de caracteres (como um ano de dois dígitos) no espaço de um único caractere vertical em texto vertical.direction— controla a direção base bidirecional do texto.text-align— alinha o conteúdo inline ao longo da linha, o que em modos verticais se torna alinhamento superior/inferior.