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