css
  1. css-writing-mode
PreviousNext

CSS Writing Mode

  • CSS Writing Mode is a CSS property that defines the direction of writing, block flow direction, and inline directionality.
  • It is used to control the layout of web content and how it flows across different devices.
  • This property can be useful when designing websites with text-heavy content in different languages and scripts.

Syntax

The syntax of the CSS Writing Mode property is as follows:

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

Here, the values for the writing-mode property are:

  • horizontal-tb: This is the default value, which sets the text to flow horizontally from left to right and top to bottom.

  • vertical-rl: This value sets the text to flow vertically from right to left.

  • vertical-lr: This value sets the text to flow vertically from left to right.

  • sideways-rl: This value sets the text to flow vertically from top to bottom and to the right.

  • sideways-lr: This value sets the text to flow vertically from top to bottom and to the left.

Example

Let's take a look at an example to understand how the CSS Writing Mode property works:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Writing Mode Example</title>
  <style>
    #text {
      writing-mode: vertical-rl;
    }
  </style>
</head>
<body>
  <div id="text">
    <p>This text will flow vertically from right to left.</p>
  </div>
</body>
</html>
Try Playground

Explanation

The CSS Writing Mode property determines how text is displayed within an element. By default, text flows horizontally from left to right and top to bottom. However, we can use this property to change the text flow direction.

Use

Use the CSS Writing Mode property when designing web content that requires the text to be displayed in a specific direction, such as with languages that are written from right to left.

Important Points

The following are some important points to keep in mind when working with the CSS Writing Mode property:

  • The Writing Mode property only affects elements that have a box layout.
  • The Writing Mode property can be inherited from parent elements to child elements.
  • If the layout of a web page is changed using the Writing Mode property, it may also be necessary to adjust the font size and line height to ensure the readability of the text.

Summary

CSS Writing Mode is a property that is used to control the layout of web content by changing the direction of writing, block flow direction, and inline directionality. It can be helpful when designing web content with text-heavy languages/scripts that require different text flow directions. Keep in mind that it only affects elements with a box layout and inherited from parent to child elements.

Vertical Align:hover
Published on: