Proprietà writing-mode

La proprietà writing-mode imposta la direzione verticale o orizzontale del testo sulla pagina. I valori possono essere horizontal-tb (orizzontalmente da sinistra a destra e dall'alto verso il basso), vertical-rl (verticalmente dall'alto verso il basso e da destra a sinistra), vertical-lr (verticalmente dall'alto verso il basso e da sinistra a destra).

Sintassi

cssselettore {
  writing-mode: horizontal-tb o vertical-rl o vertical-lr;
}

Esempio

Impostiamo la direzione del nostro testo orizzontalmente da sinistra a destra e dall'alto verso il basso:

html<p>
  Testo
</p>

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

Результат:

Esempio

Ora cambiamo la direzione verticalmente dall'alto verso il basso e da destra a sinistra:

html<p>
  Testo
</p>

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

Результат:

Esempio

Impostiamo la direzione del nostro testo verticalmente dall'alto verso il basso e da sinistra a destra:

html<p>
  Testo
</p>

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

Результат:

Vedi anche