HTML CSS

CREATE VERTICAL TEXT WITH HTML CSS

(quick & simple examples)

.vertiA{ writing-mode: vertical-rl; } .vertiB{ writing-mode: vertical-lr; }

Vertical Right-To-Left <div class="vertiA">   <p>First Line.</p>   <p>Second Line.</p> </div>

Vertical Left-To-Right <div class="vertiB">   <p>First Line.</p>   <p>Second Line.</p> </div>

WRITING MODE

01

.vertical { writing-mode: vertical-rl; } .upright { text-orientation: upright; } .sideways { text-orientation: sideways; }

Force upright characters <div class="vertical upright">  <p>First Line.</p>  <p>Second 中文 Line.</p> </div>

Force sideways characters <div class="vertical sideways">   <p>First Line.</p>   <p>Second 中文 Line.</p> </div>

TEXT ORIENTATION

02