From the old internet, the direction of text is pretty much fixed on left-to-right. In modern CSS has addressed the issue and supports vertical text with ease.
Right to Left Vertical Text
Right to Left
Vertical Text
HTML
<div class="v-rl"> <p>Right to Left</p> <p>Vertical Text</p> </div>
CSS
.v-rl { writing-mode: vertical-rl; }
Left to Right Vertical Text
Left to Right
Vertical Text
HTML
<div class="v-lr"> <p>Left to Right</p> <p>Vertical Text</p> </div>
CSS
.v-lr { writing-mode: vertical-lr; }
All Characters Upright
All Characters
Upright
Ultraman ウルトラマン
HTML
<div class="t-upright"> <p>All Characters</p> <p>Upright</p> <p>Ultraman ウルトラマン</p> </div>
CSS
.t-upright { writing-mode: vertical-rl; text-orientation: upright; }
All Characters Sideways
All Characters
Sideways
Ultraman ウルトラマン
HTML
<div class="t-sideways"> <p>All Characters</p> <p>Sideways</p> <p>Ultraman ウルトラマン</p> </div>
CSS
.t-sideways { writing-mode: vertical-rl; text-orientation: sideways; }
All Characters Mixed
All Characters
Mixed
Ultraman ウルトラマン
HTML
<div class="t-mixed"> <p>All Characters</p> <p>Mixed</p> <p>Ultraman ウルトラマン</p> </div>
CSS
.t-mixed { writing-mode: vertical-rl; text-orientation: mixed; }
Comments
Post a Comment