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>

Updated on: 14-Dec-2023

891 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements