CSS | writing-mode Property
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:
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:
- 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:
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:
- 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:
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 supports 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
Please Login to comment...