CSS | writing-mode Property - GeeksforGeeks

09 Nov, 2021
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, vertically from top to bottom. The next horizontal line is positioned below the previous line.Syntax:writing-mode: horizontal-tb;
Example:<!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:
Syntax:
writing-mode: horizontal-tb;

Example:
<!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:
vertical-rl:This mode lets the content flow vertically from top to bottom, horizontally from right to left. The next vertical line is positioned to the left of the previous line.Syntax:writing-mode: vertical-rl;
Example:<!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:
Syntax:
writing-mode: vertical-rl;

Example:
<!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:
vertical-lr:This mode lets the content flow vertically from top to bottom, horizontally from left to right. The next vertical line is positioned to the right of the previous line.Syntax:writing-mode: vertical-lr;
Example:<!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:
Syntax:
writing-mode: vertical-lr;

Example:
<!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 supports the writing-mode property are listed below:
Google Chrome 48.0
Internet Explorer 12.0
Firefox 41.0
Opera 35.0
Apple Safari 11.0
shubham_singh
ManasChhabra2
CSS-Properties
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?