A propriedade text-orientation

A propriedade text-orientation define a orientação dos caracteres em texto vertical, ou seja, ao qual foi definida a propriedade writing-mode com os valores vertical-lr ou vertical-rl. A propriedade aceita dois valores: mixed (os caracteres são girados em 90° no sentido horário) ou upright (os caracteres são dispostos um abaixo do outro).

Sintaxe

cssseletor {
  text-orientation: mixed ou upright;
}

Exemplo

Vamos girar todos os caracteres do texto vertical em 90°:

html<p>
  Texto
</p>

cssbody {
  width: 200px;
  height: 100px;
}
p {
  text-orientation: mixed;
  background: #467CBC;
  color: white;
  padding: 10px;
  font-size: 2rem;
  writing-mode: vertical-lr;
}

Результат:

Exemplo

Vamos dispor todos os caracteres do texto vertical um abaixo do outro:

html<p>
  Texto
</p>

cssbody {
  width: 200px;
  height: 100px;
}
p {
  text-orientation: upright;
  background: #467CBC;
  color: white;
  padding: 10px;
  font-size: 2rem;
  writing-mode: vertical-lr;
}

Результат:

Veja também