CSS text-orientation
La proprietà CSS3 text-orientation definisce l'orientamento verticale dei glifi
text-orientation è utile nei layout verticali, per decidere se i caratteri debbano essere ruotati o mantenere la loro forma originale.
Ad esempio, nei testi giapponesi, i glifi asiatici sono solitamente verticali, mentre i caratteri latini potrebbero essere ruotati (mixed) o mantenuti in posizione verticale (upright).
Sintassi
Significato dei valori principali:
-
mixed: (default) i caratteri latini ruotano verticalmente, mentre i caratteri asiatici mantengono l’orientamento naturale.
-
upright: tutti i caratteri vengono mostrati in verticale, non ruotati.
-
sideways: tutti i glifi vengono ruotati lateralmente (90° in senso orario).
-
sideways-right: (obsoleto / non più raccomandato).
Nota: text-orientation funziona solo se writing-mode è impostato su un valore verticale (vertical-rl o vertical-lr).
Esempio proprietà: text-orientation
Codice Esempio: text-orientation
.text-block {
writing-mode: vertical-rl;
font-size: 24px;
border: 2px solid #ccc;
padding: 10px;
margin-right: 20px;
height: 200px;
display: inline-block;
}.mixed {
text-orientation: mixed;
background-color: #e5c07b;
}.upright {
text-orientation: upright;
background-color: #98c379;
}.sideways {
text-orientation: sideways;
background-color: #61afef;
}
Contenuto Esempio: text-orientation
Esempio di utilizzo di text-orientation
In questo esempio vengono mostrati tre blocchi di testo con lo stesso orientamento verticale, ma con differente valore per text-orientation.
CSS e HTML con diversi text-orientation:
<style>
.text-block {
writing-mode: vertical-rl;
font-size: 24px;
border: 2px solid #ccc;
padding: 10px;
margin-right: 20px;
height: 200px;
display: inline-block;
}
.mixed {
text-orientation: mixed;
background-color: #e5c07b;
}
.upright {
text-orientation: upright;
background-color: #98c379;
}
.sideways {
text-orientation: sideways;
background-color: #61afef;
}
</style>
<div class="text-block mixed">Vertical mixed ABC 漢字</div>
<div class="text-block upright">Vertical upright ABC 漢字</div>
<div class="text-block sideways">Vertical sideways ABC 漢字</div>
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
IP: 216.73.216.108
