- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- 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
- Related Articles
- CSS Central, Horizontal and Vertical Alignment
- Horizontal and Vertical Center Alignment with Flexbox in CSS3
- What letters of the English alphabet have reflectional symmetry $(i.e., symmetry related to mirror reflection)$ about.$(a)$. a vertical mirror$(b)$. a horizontal mirror$(c)$. both horizontal and vertical mirrors
- How to scale a Text object equally to horizontal and vertical direction using FabricJS?
- Distribute extra horizontal and vertical space in a GridBagLayout with Java
- Styling First-Letters with CSS ::first-letter
- Animate vertical-align property with CSS Animation
- Build a Vertical Navigation Bar with CSS
- Create a Vertical Button Group with CSS
- Create a Horizontal Navigation Bar with CSS
- Underline text with CSS
- Strikethrough text with CSS
- Capitalize text with CSS
- Indent Text with CSS text-indent Property
- Difference between vertical integration and horizontal integration

Advertisements