Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Vertical Text with Horizontal Letters in CSS
On a web page, you may need to set a vertical text and that too with horizontal letters. By specifying the text-orientation: upright and writing-mode: vertical-rl, we can display vertical text with horizontal CSS.
Syntax
The syntax of CSS writing-mode and text-orientation property is as follows −
Selector {
writing-mode: /*value*/
text-orientation: /*value*/
}
Create a Vertical Text with Horizontal Letters
The following example illustrate how to create a vertical text with horizontal letters −
Text Orientation
To create a vertical text, set the text-orientation to upright −
text-orientation: upright;
Writing Mode
The writing mode is set vertical-rl. Through this, the lines of text are laid vertical i.e. flow vertically from top to bottom, horizontally from right to left. Since the text orientation is upright, the characters are not rotated and are visible standing upright −
writing-mode: vertical-rl;
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
h4 {
text-orientation: upright;
writing-mode: vertical-rl;
line-height: 3;
box-shadow: inset 0 0 3px khaki;
}
</style>
</head>
<body>
<h4>Cricket is love</h4>
</body>
</html>
Create similar size Vertical Text with flex
Let us see another example in which the flex is set using the display property with the value flex. The flex 1 is set to allow all the flexible items be the same length −
body {
display: flex;
flex: 1;
}
The <p> element is set with the text-orientation and writing-mode properties to create a vertical text with horizontal letters −
p {
text-orientation: upright;
writing-mode: vertical-rl;
}
Example
Here is the example −
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
flex: 1;
}
p {
text-orientation: upright;
writing-mode: vertical-rl;
line-height: 3;
box-shadow: inset 0 0 13px orange;
}
</style>
</head>
<body>
<p>One</p>
<p>Two</p>
<p>Three</p>
<p>Four</p>
</body>
</html>
1K+ Views
