• Post category:HTML

How to Create HTML Vertical Texts | Step by Step Guide

HTML Vertical Texts

In this article, we will see how to create HTML vertical texts.

A step-by-step guide to creating vertical texts

Code:

<html>
<head>
</head>
<style type="text/css">
h2{
writing-mode: vertical-rl;
text-orientation: upright;
background: #0e2f56;
color: whitesmoke;
}
</style>
<body>
<h2>CSS TRICKS</h2>
</body>
</html>

Output:

html vertical texts

Steps:

  1. In the above code, we have written the HTML basic structure.
  2. Then we created <h2> tag with some text, inside the <body>.
  3. To create vertical texts, we should use two properties, one “writing mode” and another one “text orientation”.
  4. We should set the “writing-mode” property to “vertical-rl” and the “text-orientation” property to “upright”.
  5. After setting these two properties. Your output will be like the above image.

Leave a Reply