Sintassi

Significato dei valori principali:

• horizontal-tb: testo scritto in orizzontale (da sinistra a destra), che scorre dall’alto verso il basso. È il valore predefinito in molte lingue occidentali.

• vertical-rl: testo scritto in verticale, che parte dall’alto e scorre da destra verso sinistra. Usato nel giapponese tradizionale.

• vertical-lr: testo verticale che parte dall’alto e scorre da sinistra verso destra.

• sideways-rl: testo orizzontale ruotato in verticale, con direzione da destra verso sinistra.

• sideways-lr: testo orizzontale ruotato in verticale, con direzione da sinistra verso destra.

Esempio proprietà: writing-mode

Codice Esempio: writing-mode

CODE: CSS

1. .writing-mode-example {

2.   writing-mode: vertical-rl;

3.   border: 2px solid #0066cc;

4.   font-size: 20px;

5.   padding: 20px;

6.   height: 200px;

7.   width: 100px;

8.   background-color: #e0f7fa;

9.   text-align: center;

10. }

Contenuto Esempio: writing-mode

  
  <style>
    .writing-mode-example {
      writing-mode: vertical-rl;
      border: 2px solid #0066cc;
      font-size: 20px;
      padding: 20px;
      height: 200px;
      width: 100px;
      background-color: #e0f7fa;
      text-align: center;
    }
  </style>

  <div class="writing-mode-example">
    Testo verticale
  </div>
  

💡 Curiosità:
Quando usi writing-mode, puoi abbinarla a text-orientation per controllare l’orientamento dei singoli caratteri (es. vertical upright o sideways).

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser