Setting Block Flow Direction with the writing-mode property
Writing mode sets the block flow direction or the direction in which block-level boxes and table rows are ordered on the screen or page. It also determines whether lines of text within those boxes are arranged horizontally or vertically. Its initial value is horizontal-tb, which is a shorthand for horizontal, top to bottom.
Non-English text below was translated from English using Google Translate. Related specification: CSS Writing Modes Level 4.
When the value of writing-mode is horizontal-tb
Blocks are stacked top-to-bottom. This is the initial value, and the writing mode of most text on the web.
Lines of text may flow left-to-right as with Latin, Devanagari, or Sinhala scripts. Or lines may flow right-to-left, as with Hebrew and Arabic script.
هذا مثال للنص العربي ، مع قيمة writing-mode: horizontal-tb واتجاه النص من اليمين إلى اليسار.
When the value of writing-mode is vertical-lr
Block ordering begins at the left of the container, and blocks stack rightward. Lines of text are vertically-oriented. Characters from scripts that have a native horizontal orientation (e.g. Latin script) are rotated by 90°. That can be changed with the text-orientation property.
Mongolian, when written using Mongolian script, is an example of a language that may use a vertical, left-to-right writing mode. Mongolian may also be written using Cyrillic script. When written using Cyrillic, Mongolian is read and written horizontally, but also from left-to-right.
When the value of writing-mode is vertical-rl
Block ordering begins at the right of the container, and blocks stack leftward. Lines of text are vertically-oriented. Chinese, Japanese, and Korean may be written horizontally or vertically. When written vertically, these languages are usually written and read from right-to-left. Here too, characters from scripts that have a native horizontal orientation (e.g. Latin script) are rotated by 90°.
Korean is a language that may be read and written vertically, from right-to-left.
한국어는 수직, 왼쪽에서 오른쪽 쓰기 모드를 사용하는 언어의 한 예입니다.
When the value of writing-mode is sideways-lr
Block ordering begins at the left of the container, and blocks stack rightward. Lines of text are vertically-oriented.
This differs from writing-mode: vertical-lr because all characters, are rotated 90°. Characters are displayed sideways regardless of their native orientation.
When the value of writing-mode is sideways-rl
Block ordering begins at the right of the container, and blocks stack rightward. Lines of text are vertically-oriented.
This differs from writing-mode: vertical-rl because all characters, are rotated 90°. Characters are displayed sideways regardless of their native orientation.