Appearance:
writing-mode: <value>
Possible Values:
lr-tb | tb-rl
Initial Value:
lr-tb
Applies to:
All elements
Inherited:
Yes
lr-tb (Character glyph flow, one after another, from the source content from left to right, starting from the top of the element's rendering box. When a new line is started, it starts below the previous line at the left-hand side of the element's rendering box)
tb-rl (Character glyph flow, one after another, from the source content from top to bottom, starting from the right side of the element's rendering box. When a new line is started, it starts to the left of the previous line at the top side of the element's rendering box. Full-width characters are rendered with their top on the same side as top of the rendering box, and half-width characters (select kana glyphs and western characters) are rendered rotated 90 degrees clockwise to the original rendering box's orientation. )
none (no display)
Example:
<style>
.vertical {writing-mode: tb-rl}
.normal {writing-mode:lr-tb}
</style>
<div class="vertical">This text is written vertically on the page</div>
<div class="normal">This text is written normally on the page</div>