CSS Writing Mode Property

• Purpose:

  • To change the direction of text and block flow.
  • To create vertical text layouts.
  • To manage how content is laid out in different writing systems.

• Example:

writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr;

• Values:

  • horizontal-tb: (Default) Text flows horizontally from left to right, and blocks flow from top to bottom. This is the standard horizontal layout.
  • vertical-rl: Text flows vertically from top to bottom, and blocks flow from right to left. Common in East Asian writing systems.
  • vertical-lr: Text flows vertically from top to bottom, and blocks flow from left to right.
  • sideways-rl: Content flows horizontally, but the entire block is rotated 90 degrees clockwise.
  • sideways-lr: Content flows horizontally, but the entire block is rotated 90 degrees counter-clockwise.

• Example:

  • Vertical Text (Right-to-Left):

.container {
   writing-mode: vertical-rl;
}

• • Vertical Text (Left-to-Right):

.container {
  writing-mode: vertical-lr;
}

• • Sideways Text (Right-to-Left):

.container {
  writing-mode: sideways-rl;
}

• • Sideways Text (Left-to-Right):

.container {
  writing-mode: sideways-lr;
}

• Practical Applications:

  • East Asian Typography: Used to create layouts for languages like Japanese, Chinese, and Korean, which can be written vertically.
  • Creative Text Effects: Allows for unique and visually appealing text layouts.
  • Table Headers: Can be used to create vertical headers in tables.
  • Navigation Menus: Can create vertical navigation menus.