CSS text-orientation

The CSS text-orientation property is used to control the orientation of characters within horizontal text. It is mainly used in East Asian typography to specify the orientation of characters, such as Chinese, Japanese, and Korean, when they are set in vertical writing mode.

The text-orientation property can take the following values:

1. mixed: This is the default value. It allows text to be laid out horizontally, but certain characters may be rotated to fit into vertical lines. It is often used for East Asian characters within horizontal text.
2. upright: It specifies that all characters should be displayed upright, even when they are part of vertical text. This is useful when you want to display East Asian characters within horizontal lines without any rotation.

Example:

p {
  text-orientation: upright;
}

In this example, the text-orientation property is applied to a paragraph element (<p>), and it is set to upright. This will ensure that all characters within the paragraph, including any East Asian characters, are displayed upright, even if they are part of vertical text.

The text-orientation property is especially relevant for situations where you have mixed text content with different writing modes (horizontal and vertical) and want to control the orientation of specific characters within that content.

It’s important to note that the text-orientation property is primarily used in East Asian typography and might not be widely supported in all browsers, especially older versions. Before using it in production, check the browser compatibility to ensure it works as expected for your target audience.