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
| div { layout-flow: vertical-ideographic; }
<div style=”layout-flow: vertical-ideographic”>Content rendered vertically</div> |
Possible Values
| Value | Description |
|---|---|
| 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. |
it functions the same as writing-mode