Propriedade writing-mode

A propriedade writing-mode define a direção vertical ou horizontal do texto na página. Os valores podem ser horizontal-tb (horizontal da esquerda para a direita e de cima para baixo), vertical-rl (vertical de cima para baixo e da direita para a esquerda), vertical-lr (vertical de cima para baixo e da esquerda para a direita).

Sintaxe

cssseletor {
  writing-mode: horizontal-tb ou vertical-rl ou vertical-lr;
}

Exemplo

Vamos definir a direção do nosso texto como horizontal da esquerda para a direita e de cima para baixo:

html<p>
  Texto
</p>

cssbody {
  width: 100px;
  height: 50px;
}
p {
  writing-mode: horizontal-tb;
  font-size: 2em;
  margin-top: 0;
}

Результат:

Exemplo

Agora vamos mudar a direção para vertical de cima para baixo e da direita para a esquerda:

html<p>
  Texto
</p>

cssbody {
  width: 100px;
  height: 50px;
}
p {
  writing-mode: vertical-rl;
  font-size: 2em;
  margin-top: 0;
}

Результат:

Exemplo

Vamos definir a direção do nosso texto como vertical de cima para baixo e da esquerda para a direita:

html<p>
  Texto
</p>

cssbody {
  width: 100px;
  height: 50px;
}
p {
  writing-mode: vertical-lr;
  font-size: 2em;
  margin-top: 0;
}

Результат:

Veja também