CSS writing-mode property is used to specify the direction of text content flows within an element. It specifies whether text should be displayed horizontally or vertically.
It is particularly useful for handling text orientation in non-Latin scripts, such as Chinese, Japanese, and Arabic, as well as for creating creative and visually interesting layouts.
Possible Values
- horizontal-tb − Default value. It sets the text to be laid out in horizontal writing mode, where text flows from left to right and top to bottom, as in most Western languages.
- vertical-rl − This value specifies a vertical writing mode from right to left, commonly used for scripts like Chinese, Japanese, or Korean. Text flows vertically, starting from the right and proceeding to the left.
- vertical-lr − Similar to vertical-rl, this value also represents a vertical writing mode, but the text flows from left to right, which is used in scripts like Mongolian.
- sideways-rl − This value specifies vertical text flow from top to bottom, but positions the text from right to left. This value is used for vertical scripts like Mongolian or some forms of vertical Japanese text, where the characters are rotated 90 degrees clockwise and read from right to left.
- sideways-lr − This value specifies vertical text flow from bottom to top, but positions the text from left to right.
The lr, lr-tb, rl, tb, tb-lr, and tb-rl writing modes in CSS are deprecated, and should no longer be used. Instead, you should use the horizontal-tb or vertical-lr writing modes.
The following table shows the deprecated writing modes and their equivalents:
| Deprecated Value | Equivalent Value |
|---|---|
| lr | horizontal-tb |
| rl | horizontal-tb |
| lr-tb | horizontal-tb |
| tb | vertical-lr |
| tb-lr | vertical-lr |
| tb-rl | vertical-rl |
Applies to
All the HTML elements except table row groups, table column groups, table rows, and table columns.
DOM Syntax
object.style.writingMode = "horizontal-tb|vertical-rl|vertical-lr|sideways-rl|sideways-lr";
CSS writing-mode – horizontal-tb Value
The following example demonstartes writing-mode property set to value horizontal-tb, where text is read from left to right and top to bottom −
<html><head><style>
.box {
width: 250px;
background-color: pink;
writing-mode: horizontal-tb;
}
</style></head><body><h2>CSS writing-mode: horizontal-tb</h2><div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div></body></html>CSS writing-mode – vertical-rl Value
The following example demonstartes writing-mode property set to value vertical-rl, where text is read from right to left and top to bottom −
<html><head><style>
.box {
height: 250px;
background-color: pink;
writing-mode: vertical-rl;
}
</style></head><body><h2>CSS writing-mode: vertical-rl</h2><div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div></body></html>CSS writing-mode – vertical-lr Value
The following example demonstartes that the writing-mode property set to value vertical-rl value, where text is read from left to right and top to bottom: −
<html><head><style>
.box {
height: 250px;
background-color: pink;
writing-mode: vertical-lr;
}
</style></head><body><h2>CSS writing-mode: vertical-lr</h2><div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div></body></html>CSS writing-mode – sideways-rl Value
The sideways-rl value is only supported by Firefox Browser.
The following example demonstrates that writing-mode property set to value sideways-rl, where text read vertically from top to bottom, with characters arranged from right to left −
<html><head><style>
.box {
height: 300px;
background-color: pink;
writing-mode: sideways-rl;
}
</style></head><body><h2>CSS writing-mode: sideways-rl - This example is only supported by Firefox Browser.</h2><div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div></body></html>CSS writing-mode – sideways-lr Value
The sideways-lr value is only supported by Firefox Browser.
The following example demonstrates that writing-mode property set to value sideways-lr, where text is read vertically from top to bottom, with characters arranged from left to right −
<html><head><style>
.box {
height: 300px;
background-color: pink;
writing-mode: sideways-lr;
}
</style></head><body><h2>CSS writing-mode: sideways-lr - This example is only supported by Firefox Browser.</h2><div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div></body></html>CSS writing-mode – Asthetic Use (english Language)
The values vertical-lr and vertical-rl can be used in English language for asthetics as demonstrated in the following example:
<html><head><style>
.mainbox{
max-width: 750px;
position: relative;
padding-left: 80px;
padding-top: 50px;
}
.box {
height: 250px;
background-color: pink;
}
h2 {
padding-top: 70px;
writing-mode: vertical-rl;
position: absolute;
left: 0;
top: 0;
line-height: 1;
color: lightgreen;
font-size: 40px;
font-weight: 800;
}
</style></head><body><div class="mainbox"><h2>TutorialsPoint</h2><div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div></div></body></html>CSS writing-mode – Related Properties
Following is the list of CSS properties related to writing-mode:
| property | value |
|---|---|
| display | Sets the direction of text. |
| unicode-bidi | Determine the behavior of bi-directional text in a document. |
| text-orientation | Sets the orientation of the characters in a line. |
| text-combine-upright | Combines multiple typographic character units into the space of a single typographic character unit. |
Leave a Reply