How to Create Vertical Text with CSS

Introduction

Creating vertical text in CSS can be useful for specific design elements like sidebars, headers, or decorative text. CSS provides a way to display text vertically using the writing-mode property, which changes the text flow from horizontal to vertical.

In this tutorial, you'll learn how to create vertical text using the writing-mode property in CSS. This technique is helpful for creating unique layouts and designs.

Problem Statement

Create a CSS code that:

Displays text vertically using the writing-mode property.
Demonstrates how to control the flow of vertical text.

Example:

Input: A div element with the text "Vertical Text Example".
Output: The text is displayed vertically within its container.

Solution Steps

Use writing-mode Property: Apply the writing-mode property to change the text orientation from horizontal to vertical.
Control Text Flow: Use values like vertical-rl or vertical-lr to control the direction of the vertical text.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Text Example</title>
    <style>
        /* Step 1: Set text to flow vertically from right to left */
        .vertical-text {
            writing-mode: vertical-rl;
            text-orientation: upright;
            border: 1px solid #ccc;
            padding: 10px;
            width: 50px;
        }

        /* Step 2: Vertical text flowing from left to right */
        .vertical-text-lr {
            writing-mode: vertical-lr;
            text-orientation: upright;
            border: 1px solid #ccc;
            padding: 10px;
            width: 50px;
        }
    </style>
</head>
<body>

    <div class="vertical-text">This text flows vertically (right to left).</div>
    <br>
    <div class="vertical-text-lr">This text flows vertically (left to right).</div>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Explanation

Step 1: Use `writing-mode: vertical-rl`

To display text vertically from right to left, use the following CSS:

.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: upright;
    border: 1px solid #ccc;
    padding: 10px;
    width: 50px;
}

Step 2: Use `writing-mode: vertical-lr`

To display text vertically from left to right, use this CSS:

.vertical-text-lr {
    writing-mode: vertical-lr;
    text-orientation: upright;
    border: 1px solid #ccc;
    padding: 10px;
    width: 50px;
}

Conclusion

Creating vertical text in CSS is simple using the writing-mode property. You can control the flow of the text using vertical-rl or vertical-lr to suit your design needs. This technique helps create visually appealing and unique layouts for web content.

Java Guides

Search This Blog