CSS Text Direction

In CSS, you can format text from left to right, right to left, top to bottom, etc.

writing-mode CSS property can be used to define the verticle or horizontal direction of the text.

/* Keyword values */
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;

Content flow horizontally from left to right, block flows from top to bottom

<div style="writing-mode:horizontal-tb">
 <div> Block </div>
 <div> Flows </div>
 <div> Top to Bottom</div>
</div>

Content flow vertically from top to bottom, block flows from left to right

<div style="writing-mode:verticle-lr">
 <div> Block </div>
 <div> Flows </div>
 <div> Top to Bottom</div>
</div>

Content flow vertically from top to bottom, block flows from left to right

<div style="writing-mode:verticle-rl">
 <div> Block </div>
 <div> Flows </div>
 <div> Top to Bottom</div>
</div>

Browser Compatibility