Vertical Text, with Horizontal Letters in CSS

CSS Web Development Front End Technology

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.

Live Demo

<!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

Live Demo

<!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