CSS WRITING-MODE

This property controls the intrinsic writing direction rendering for a block of content. The default is left-to-right, top-to-bottom common in western languages, but the alternate rendering mode is top-to-bottom, right-to-left which is a common rendering mode used in Asian writing systems. The half-width character rotation effect is not cumulative – it is always rotated with respect to the canvas.

Example
1
2
3
div {
  writing-mode: tb-rl;
}
1
<div style="writing-mode: tb-rl">Content rendered vertically</div>

Possible Values

lr-tb: Character glyphs 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 glyphs 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.