The writing-mode Property in CSS

The writing-mode property in CSS is used to define the direction in which text is laid out and how lines of text are stacked. This property is particularly useful for handling different text orientations and layouts, especially in languages that use vertical or right-to-left text directions. It affects the block and inline flow of text and can be used to create various text layouts.

Values of writing-mode

1. horizontal-tb

   • Description: The default value. Text is displayed horizontally from left to right, with lines stacked from top to bottom. This is used for most languages including English, Spanish, and French.
   • Example:

     .horizontal-tb {
       writing-mode: horizontal-tb; /* Text flows horizontally, lines stack vertically */
     }
     

2. vertical-rl

   • Description: Text is displayed vertically from top to bottom, with lines flowing from right to left. This mode is used for some East Asian languages like Chinese, Japanese, and Korean in vertical text formats.
   • Example:

     .vertical-rl {
       writing-mode: vertical-rl; /* Text flows vertically, lines stack horizontally from right to left */
     }
     

3. vertical-lr

   • Description: Text is displayed vertically from top to bottom, with lines flowing from left to right. This mode is used in some vertical text scenarios in East Asian languages.
   • Example:

     .vertical-lr {
       writing-mode: vertical-lr; /* Text flows vertically, lines stack horizontally from left to right */
     }
     

4. sideways-rl

   • Description: Text is displayed horizontally but rotated 90 degrees to the left, with lines flowing from right to left. This mode is useful for creating sideways text layouts.
   • Example:

     .sideways-rl {
       writing-mode: sideways-rl; /* Horizontal text rotated 90 degrees, lines flow right to left */
     }
     

5. sideways-lr

   • Description: Text is displayed horizontally but rotated 90 degrees to the right, with lines flowing from left to right. This mode is used for sideways text layouts in some designs.
   • Example:

     .sideways-lr {
       writing-mode: sideways-lr; /* Horizontal text rotated 90 degrees, lines flow left to right */
     }
     

Examples

1. Horizontal Text Layout

   .horizontal {
     writing-mode: horizontal-tb; /* Default horizontal text flow */
   }
   

2. Vertical Text Layout

   .vertical {
     writing-mode: vertical-rl; /* Vertical text flow from top to bottom, lines stack horizontally from right to left */
   }
   

3. Sideways Text Layout

   .sideways {
     writing-mode: sideways-rl; /* Sideways horizontal text rotated 90 degrees, lines flow from right to left */
   }
   

Explanation

• horizontal-tb: This is the standard mode for most Western languages, where text flows from left to right and lines are stacked from top to bottom.
• vertical-rl: Commonly used in traditional East Asian typography, where text flows vertically from top to bottom and lines are read from right to left.
• vertical-lr: Similar to vertical-rl, but with lines flowing from left to right in vertical text.
• sideways-rl: Provides a 90-degree rotated horizontal text layout, useful for special design effects or sidebars.
• sideways-lr: Similar to sideways-rl, but rotated in the opposite direction.

Use Cases

• Multilingual Websites: Use writing-mode to handle different text orientations and layouts for various languages and scripts.
• Design and Layout: Create unique text orientations and effects for design purposes, such as vertical text in banners or sideways text for sidebars.
• Accessibility: Ensure that text is displayed correctly and legibly in different writing modes to improve readability for diverse audiences.