CSS text-orientation Property

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 23 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The text-orientation property in CSS is used to define the orientation of text within a line when dealing with vertical writing modes.

This property is particularly useful for languages like Chinese, Japanese, and Korean, which are often written vertically. It allows for finer control over the display of characters in a vertical context, ensuring they are presented in the most readable and aesthetically pleasing manner.

💡 Syntax

The syntax for the text-orientation property is straightforward. It can be applied to any element that supports vertical writing modes.

Syntax

Copied

element {
  text-orientation: value;
}

🎛️ Default Value

The default value of the text-orientation property is mixed, which means the text will use an upright orientation for characters that are typically written upright and a sideways orientation for characters that are typically written sideways.

🏠 Property Values

Value	Description
mixed	This is the default value. Text is displayed upright for characters that have an upright version and sideways for characters that do not.
upright	All characters are displayed upright.
sideways	All characters are displayed sideways, rotated 90 degrees.
sideways-right	All characters are displayed sideways, rotated 90 degrees to the right.
use-glyph-orientation	Uses the glyph's orientation defined by the font.

📄 Example

In this example, we'll apply the text-orientation property to a vertical text container.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS text-orientation Example</title>
  <style>
    .vertical-text {
      writing-mode: vertical-rl;
      text-orientation: upright;
      border: 1px solid #000;
      padding: 10px;
      width: 100px;
      height: 200px;
    }
  </style>
</head>
<body>
  <h1>Text Orientation Example</h1>
  <div class="vertical-text">
    これは縦書きのテキストです。
  </div>
</body>
</html>

🖥️ Browser Compatibility

The text-orientation property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The text-orientation property is a valuable tool for web developers working with vertical text layouts.

By customizing the orientation of text within a line, you can create more readable and visually appealing content, particularly for languages that use vertical writing. Experiment with different values to see how this property can enhance the presentation of your vertical text.