The writing-mode CSS property is used to signify whether the lines of text are laid out horizontally or vertically and also the direction in which the block progress.
Syntax:
writing-mode: horizontal-tb|vertical-rl|vertical-lr;
Default Value: Its default value is horizontal-tb.
Property values:
- horizontal-tb: This mode lets the content flow horizontally from left to right, and vertically from top to bottom. The next horizontal line is positioned below the previous line.
- vertical-rl: This mode lets the content flow vertically from top to bottom, and horizontally from right to left. The next vertical line is positioned to the left of the previous line.
- vertical-lr: This mode lets the content flow vertically from top to bottom, and horizontally from left to right. The next vertical line is positioned to the right of the previous line.
Example: In this example, we are using writing-mode: horizontal-tb; property.
html
<!DOCTYPE html><html>
<head>
<title>writing-mode Property</title>
<style>
p.geek {
width: 300px;
height: 100px;
border: 1px solid black;
writing-mode: horizontal-tb;
color: white;
background: green;
}
</style>
</head>
<body style="text-align: center;">
<h1 style="color:green;">GeeksforGeeks</h1>
<p class="geek">
Geeks Classes is a classroom program in Noida.
This is a quick course to cover algorithms
questions.
</p>
</body>
</html>
|
Output:
Example: In this example, we are using writing-mode: vertical-rl; property.
html
<!DOCTYPE html><html>
<head>
<title>writing-mode Property</title>
<style>
p.geek {
width: 200px;
height: 200px;
border: 1px solid black;
writing-mode: vertical-rl;
color: white;
background: green;
}
</style>
</head>
<body style="text-align: center;">
<h1 style="color:green;">GeeksforGeeks</h1>
<p class="geek">
Geeks Classes is a classroom program in Noida.
This is a quick course to cover algorithms
questions.
</p>
</body>
</html>
|
Output:
Example: In this example, we are using writing-mode: vertical-lr property.
html
<!DOCTYPE html><html>
<head>
<title>writing-mode Property</title>
<style>
p.geek {
width: 200px;
height: 200px;
border: 1px solid black;
writing-mode: vertical-lr;
color: white;
background: green;
}
</style>
</head>
<body style="text-align: center;">
<h1 style="color:green;">GeeksforGeeks</h1>
<p class="geek">
Geeks Classes is a classroom program in Noida.
This is a quick course to cover algorithms
questions.
</p>
</body>
</html>
|
Output:
Supported Browsers: The browsers that support the writing-mode property are listed below:
- Google Chrome 48.0
- Edge 12.0
- Internet Explorer 9.0
- Firefox 41.0
- Opera 35.0
- Apple Safari 10.1