CSS writing-mode

The CSS writing-mode property allows you to control the direction in which text is laid out within an element. It defines whether the text flows horizontally from left to right (horizontal writing mode) or vertically from top to bottom (vertical writing mode). Additionally, it can also specify if the text is written horizontally, but the line progression is from right to left, as in some languages like Arabic or Hebrew.

The writing-mode property can take the following values:

1. horizontal-tb: This is the default value, and it specifies horizontal writing mode with a top-to-bottom line progression.
2. vertical-rl: The text is laid out vertically, and the line progression is from right to left.
3. vertical-lr: The text is laid out vertically, and the line progression is from left to right.
4. sideways-rl: The text is laid out horizontally, but each glyph (character) is rotated 90 degrees to the right. The line progression is from top to bottom.
5. sideways-lr: The text is laid out horizontally, but each glyph is rotated 90 degrees to the left. The line progression is from top to bottom.

Example:

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

In this example, the text inside an element with the class .container will be laid out vertically, and the line progression will be from right to left.

The writing-mode property is particularly useful for designing layouts for languages that are written vertically, like Japanese, Chinese, or Mongolian. It can also be used to create unique and interesting visual effects in web design.

It’s important to keep in mind that not all browsers support the writing-mode property, especially in older versions. Be sure to check the browser compatibility before using it in production. Additionally, when using vertical writing modes, consider the impact on the overall layout and alignment of other elements on the page.