CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



writing-mode

CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML (Hypertext Markup Language). CSS provides a wide range of properties to style the content of a web page. One such property is the writing-mode property, which is used to define the direction of the text flow in a block-level element.

What is Writing-Mode?

Writing-mode is a CSS property that defines the direction of the text flow in a block-level element. It specifies whether the text should be displayed horizontally or vertically, and the direction in which it should flow. The writing-mode property is used to control the layout of text in a web page, and it is particularly useful for languages that are written vertically, such as Chinese, Japanese, and Korean.

The writing-mode property can take one of four values:

  • horizontal-tb: This is the default value, and it specifies that the text should be displayed horizontally from left to right.
  • vertical-rl: This value specifies that the text should be displayed vertically from top to bottom, with the text flowing from right to left.
  • vertical-lr: This value specifies that the text should be displayed vertically from top to bottom, with the text flowing from left to right.
  • sideways-rl: This value specifies that the text should be displayed horizontally, but rotated 90 degrees clockwise, with the text flowing from top to bottom and from right to left.

Code Examples

Let's take a look at some code examples to see how the writing-mode property works:

Example 1: Horizontal Text

In this example, we have a paragraph of text that is displayed horizontally from left to right:

  <p style="writing-mode: horizontal-tb;">
    This is a paragraph of text that is displayed horizontally.
  </p>
  

The output of this code will be:

This is a paragraph of text that is displayed horizontally.

Example 2: Vertical Text (Right to Left)

In this example, we have a paragraph of text that is displayed vertically from top to bottom, with the text flowing from right to left:

  <p style="writing-mode: vertical-rl;">
    This is a paragraph of text that is displayed vertically from top to bottom, with the text flowing from right to left.
  </p>
  

The output of this code will be:

This is a paragraph of text that is displayed vertically from top to bottom, with the text flowing from right to left.

Example 3: Vertical Text (Left to Right)

In this example, we have a paragraph of text that is displayed vertically from top to bottom, with the text flowing from left to right:

  <p style="writing-mode: vertical-lr;">
    This is a paragraph of text that is displayed vertically from top to bottom, with the text flowing from left to right.
  </p>
  

The output of this code will be:

This is a paragraph of text that is displayed vertically from top to bottom, with the text flowing from left to right.

Example 4: Sideways Text

In this example, we have a paragraph of text that is displayed horizontally, but rotated 90 degrees clockwise, with the text flowing from top to bottom and from right to left:

  <p style="writing-mode: sideways-rl;">
    This is a paragraph of text that is displayed sideways, with the text flowing from top to bottom and from right to left.
  </p>
  

The output of this code will be:

This is a paragraph of text that is displayed sideways, with the text flowing from top to bottom and from right to left.

Conclusion

The writing-mode property is a useful CSS property that allows you to control the direction of the text flow in a block-level element. It is particularly useful for languages that are written vertically, such as Chinese, Japanese, and Korean. By using the writing-mode property, you can ensure that your web page is displayed correctly for users who speak these languages.

References

Activity