Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
writing-mode Property in CSS
The CSS writing-mode property controls the direction in which text flows within an element. It's particularly useful for creating layouts that match different language writing systems or for creating unique design effects.
Syntax
selector {
writing-mode: value;
}
Possible Values
| Value | Description |
|---|---|
horizontal-tb |
Content flows horizontally from left to right and vertically from top to bottom (default) |
vertical-rl |
Content flows vertically from top to bottom and horizontally from right to left |
vertical-lr |
Content flows vertically from top to bottom and horizontally from left to right |
Example 1: Vertical Writing (Right to Left)
The following example demonstrates vertical-rl mode where text flows vertically from top to bottom and horizontally from right to left −
<!DOCTYPE html>
<html>
<head>
<style>
.vertical-text {
writing-mode: vertical-rl;
height: 200px;
width: 300px;
background-color: #f0f0f0;
padding: 20px;
border: 2px solid #333;
}
</style>
</head>
<body>
<h2>Normal Text</h2>
<p>This is normal horizontal text.</p>
<h2>Vertical Text (Right to Left)</h2>
<div class="vertical-text">
This text flows vertically from top to bottom and horizontally from right to left.
</div>
</body>
</html>
A gray box appears with text written vertically, starting from the top-right and flowing downward, with each line moving from right to left.
Example 2: Comparing Different Writing Modes
This example shows all three writing modes in comparison −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 20px;
margin: 20px 0;
}
.box {
width: 150px;
height: 200px;
padding: 15px;
border: 2px solid #007bff;
background-color: #e7f3ff;
}
.horizontal {
writing-mode: horizontal-tb;
}
.vertical-rl {
writing-mode: vertical-rl;
}
.vertical-lr {
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<div class="container">
<div class="box horizontal">
<h3>Horizontal TB</h3>
<p>Normal text flow from left to right, top to bottom.</p>
</div>
<div class="box vertical-rl">
<h3>Vertical RL</h3>
<p>Text flows vertically, columns right to left.</p>
</div>
<div class="box vertical-lr">
<h3>Vertical LR</h3>
<p>Text flows vertically, columns left to right.</p>
</div>
</div>
</body>
</html>
Three blue-bordered boxes are displayed side by side. The first shows normal horizontal text, the second shows vertical text flowing right to left, and the third shows vertical text flowing left to right.
Conclusion
The writing-mode property is essential for creating layouts that accommodate different language writing systems or unique design requirements. Use horizontal-tb for standard layouts, vertical-rl for traditional Asian text, and vertical-lr for modern vertical designs.
Updated on: 2026-03-15T13:40:54+05:30
123 Views
Advertisements