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
writing-mode Property in CSS
The writing-mode property is used to set whether lines of text are laid out horizontally or vertically. Let us understand the property with examples. We will begin with the syntax.
Syntax
The following is the syntax of the writing-mode property −
writing-mode: value;
The values are −
horizontal-tb − Content flows horizontally from left to right and vertically from top to bottom
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 vertically from left to right
Flow content vertically from top to bottom and horizontally from right to left
Let us see an example to use the vertical-rl value of the writing-mode property. This will flow the content vertically from top to bottom and horizontally from right to left −
p {
writing-mode: vertical-rl;
}
Example
Here is the example −
<!DOCTYPE html>
<html>
<head>
<style>
p {
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<p>This is demo text.</p>
</body>
</html>
Flow content horizontally from left to right and vertically from top to bottom
Let us see an example to use the horizontal-tb value of the writing-mode property. This will flow the content horizontally from left to right and vertically from top to bottom −
p {
writing-mode: horizontal-tb;
}
Example
Here is the example −
<!DOCTYPE html>
<html>
<head>
<style>
p.demo1 {
word-spacing: 1cm;
color: blue;
writing-mode: vertical-rl;
}
p.demo2 {
word-spacing: 40px;
writing-mode: horizontal-tb;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<h2>Heading2</h2>
<p class="demo1">This is demo text.</p>
<h2>Heading2</h2>
<p class="demo2">This is demo text.</p>
</body>
</html>
101 Views
