HTML&CSS · December 20, 2023

Css Basic: writing-mode

CSS Basics: writing-mode

CSS (Cascading Style Sheets) is a fundamental technology used for styling web pages. It allows developers to control the layout, appearance, and behavior of HTML elements. One important aspect of CSS is the ability to control the writing mode of text, which determines the direction in which text flows on a page. In this article, we will explore the "writing-mode" property and its various values.

Understanding the writing-mode Property

The "writing-mode" property in CSS specifies whether text is laid out horizontally or vertically, as well as the direction in which lines of text are stacked. It is particularly useful when designing multilingual websites or creating unique layouts.

The "writing-mode" property accepts several values:

  • horizontal-tb: This is the default value and represents the horizontal writing mode, where text flows from left to right and top to bottom.
  • vertical-rl: This value sets the writing mode to vertical, with text flowing from right to left and top to bottom.
  • vertical-lr: Similar to "vertical-rl," this value sets the writing mode to vertical, but with text flowing from left to right and top to bottom.
  • sideways-rl: This value rotates the text 90 degrees clockwise, resulting in a vertical layout with text flowing from top to bottom and right to left.
  • sideways-lr: This value rotates the text 90 degrees counterclockwise, resulting in a vertical layout with text flowing from top to bottom and left to right.

Examples of writing-mode Usage

Let's take a look at some examples to better understand how the "writing-mode" property works:

/* Horizontal Writing Mode */
p {
  writing-mode: horizontal-tb;
}

/* Vertical Writing Mode (Right to Left) */
p {
  writing-mode: vertical-rl;
}

/* Vertical Writing Mode (Left to Right) */
p {
  writing-mode: vertical-lr;
}

/* Sideways Writing Mode (Right to Left) */
p {
  writing-mode: sideways-rl;
}

/* Sideways Writing Mode (Left to Right) */
p {
  writing-mode: sideways-lr;
}

Conclusion

The "writing-mode" property in CSS is a powerful tool for controlling the direction and layout of text on a web page. By understanding and utilizing the different values of this property, developers can create visually appealing and multilingual websites. Experiment with the "writing-mode" property to enhance your web design skills and create unique layouts.

For more information on VPS hosting and how it can benefit your website, visit Server.HK.

You may also like...