A Guide to Vertical and Horizontal Text Layouts
CSS provides powerful tools to control the direction and flow of text, and one of the most interesting yet underutilized properties is writing-mode. This property allows developers to change the way text is displayed—whether horizontally, vertically, or even in right-to-left scripts. In this guide, we’ll explore how writing-mode works and how you can use it effectively in your web projects.
What is writing-mode in CSS?
The writing-mode property in CSS determines the direction in which text and inline elements are laid out. By default, most languages, such as English, use a horizontal text flow. However, some languages like Chinese, Japanese, and Mongolian use vertical text layouts. With writing-mode, you can easily switch between different orientations.
Syntax and Values
The writing-mode property supports the following values:
writing-mode: horizontal-tb; /* Default: Text flows left to right */
writing-mode: vertical-rl; /* Text flows top to bottom, right to left */
writing-mode: vertical-lr; /* Text flows top to bottom, left to right */
writing-mode: sideways-rl; /* Rotates text 90 degrees clockwise */
writing-mode: sideways-lr; /* Rotates text 90 degrees counterclockwise */Examples of writing-mode in Action
1. Default Horizontal Text Layout
p {
writing-mode: horizontal-tb; /* This is the default behavior */
}2. Vertical Text from Right to Left
div {
writing-mode: vertical-rl;
border: 1px solid black;
width: 100px;
}Result: The text inside the div flows from top to bottom, with new lines appearing from right to left.
3. Vertical Text from Left to Right
span {
writing-mode: vertical-lr;
}Result: The text flows from top to bottom, but new lines appear from left to right.
4. Sideways Rotated Text
h1 {
writing-mode: sideways-rl;
}Result: The text is rotated 90 degrees clockwise but maintains a horizontal reading order.
When to Use writing-mode?
- Designing multilingual websites: For languages that have vertical writing systems like Japanese and Chinese.
- Creating unique UI/UX layouts: When working with creative typography.
- Rotating text for labels or sidebars: For vertical menus, labels, or artistic effects.
Browser Support
Most modern browsers, including Chrome, Firefox, Safari, and Edge, support writing-mode. However, older versions of Internet Explorer may have limited compatibility.
The writing-mode property in CSS is a powerful tool that allows developers to create flexible and diverse text layouts. Whether you’re building a multilingual website or designing unique UI elements, mastering writing-mode can help you take typography and text formatting to the next level.
