- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
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
By specifying 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*/
}Example
The following examples illustrate CSS outline-offset property.
<!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>Sed nec tortor</h4>
</body>
</html>This gives the following output
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>This gives the following output
Published on 10-Feb-2021 13:09:18
- Related Questions & Answers
- CSS Central, Horizontal and Vertical Alignment
- Horizontal and Vertical Center Alignment with Flexbox in CSS3
- Distribute extra horizontal and vertical space in a GridBagLayout with Java
- Styling First-Letters with CSS ::first-letter
- Vertical and Horizontal Scrollbars on Tkinter Widget
- Difference between vertical integration and horizontal integration
- Create a Horizontal Navigation Bar with CSS
- Underline text with CSS
- Strikethrough text with CSS
- Capitalize text with CSS
- Vertical align text in a block element with HTML
- Build a Vertical Navigation Bar with CSS
- Create a Vertical Button Group with CSS
- Animate vertical-align property with CSS Animation
- Indent Text with CSS text-indent Property
Advertisements