The text-orientation CSS property is used to specify the orientation of characters within a line of text. It controls the rotation or direction of text characters, allowing you to display text vertically or at a specific angle.
The text-orientation property accepts various values:
-
mixed: This is the default value. It allows the browser to determine the orientation based on the text and the writing mode. -
upright: Displays the text characters in their normal vertical orientation, parallel to the writing mode. -
sideways: Rotates the text characters 90 degrees counterclockwise from their normal orientation, perpendicular to the writing mode. -
sideways-right: Similar tosideways, but rotates the text characters 90 degrees clockwise instead.
Here’s an example:
.vertical-text {
text-orientation: sideways;
}
In this example, the .vertical-text class sets the text-orientation property to sideways, which rotates the text characters 90 degrees counterclockwise, making the text display vertically.
It’s important to note that the text-orientation property works in conjunction with the writing mode specified for the text. For example, in a horizontal writing mode, the sideways value will display the text vertically, while in a vertical writing mode, it will display the text horizontally.
The text-orientation property is commonly used in typography for specific situations where vertical or rotated text is required, such as in certain scripts, headings, or decorative text elements. It provides flexibility in text layout and presentation, allowing for unique and visually appealing designs.