CSS LAYOUT-FLOW

This property controls the direction and flow of the content in an element. Its use is deprecated in favor of the ‘writing-mode’ property which accomplishes the same purpose.

Example
1
2
3
div {
  layout-flow: vertical-ideographic;
}
1
<div style="layout-flow: vertical-ideographic">Vertical Text</div>

Possible Values

horizontal: 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. This is the layout mode used in most Roman-based documents.

vertical-ideographic: 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 the 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. This layout mode is used in East Asian typography.