The writing-mode CSS attribute determines if the text is oriented vertically or horizontally. When set to vertical, it can flow either from right to left (vertical-rl) or from left to right (vertical-lr). This attribute determines if text lines are arranged vertically or horizontally, governing the content flow direction on the webpage. It also dictates the block flow direction within containers, stacking block-level boxes and controlling their flow direction inside the container.
Syntax
writing-mode: horizontal-tb | vertical-lr | vertical-rl;
Property values
The values for this attribute are specified in the following manner.
When set to horizontal-tb, this property takes on its default value. With this setting, text flows horizontally, reading from left to right and from top to bottom.
vertical-rl: This property renders the text vertically, with the content flowing from top to bottom and right to left.
vertical-lr: This setting functions in a comparable manner to vertical-rl, with the difference being that the text is oriented to be read from left to right.
Example1
In this instance, we are employing all the primary settings of the CSS writing-mode attribute. In this scenario, there exist three paragraph components containing various text lines. The initial paragraph component is assigned the writing-mode: horizontal-tb; property, the second paragraph has the writing-mode: vertical-lr; property, and the third paragraph features the writing-mode: vertical-rl; style.
In the result, we observe that the information in the second paragraph is arranged vertically from left to right, while the content in the third paragraph is also displayed vertically but from right to left.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid black;
width: 300px;
height: 300px;
font-size: 23px;
}
#tb {
writing-mode: horizontal-tb;
}
#lr {
writing-mode: vertical-lr;
}
#rl {
writing-mode: vertical-rl;
}
</style>
</head>
<center>
<body>
<h1> Example of CSS writing-mode property </h1>
<h2> writing-mode: horizontal-tb; </h2>
<p id="tb">
Hi, Welcome to the C# Tutorial. This site is developed so that students may learn computer science related technologies easily. The C# Tutorial is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
<h2> writing-mode: vertical-lr; </h2>
<p id="lr">
Hi, Welcome to the C# Tutorial. This site is developed so that students may learn computer science related technologies easily. The C# Tutorial is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
<h2> writing-mode: vertical-rl; </h2>
<p id="rl">
Hi, Welcome to the C# Tutorial. This site is developed so that students may learn computer science related technologies easily. The C# Tutorial is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
</center>
</body>
</html>
Example2
In this instance, we are employing the letter-spacing attribute in conjunction with the writing-mode property.
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border: 2px solid black;
width: 300px;
height: 150px;
letter-spacing: 15px;
}
#tb {
writing-mode: horizontal-tb;
}
#lr {
writing-mode: vertical-lr;
}
#rl {
writing-mode: vertical-rl;
}
</style>
</head>
<center>
<body>
<h1> Example of CSS writing-mode property </h1>
<h2 id="tb"> writing-mode: horizontal-tb; </h2>
<h2 id="lr" style= "height: 300px;"> writing-mode: vertical-lr; </h2><br>
<h2 id="rl" style= "height: 300px;"> writing-mode: vertical-rl; </h2>
</center>
</body>
</html>