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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
20 Jun, 2023
Like Article
Save Article