Vertical text-orientation in Html and Css with Programming Examples

Fawad May 18, 2023

0 44 4 minutes read

Table of Contents

Description

This article delves into the concept of vertical text-orientation in HTML and CSS, providing a comprehensive guide for web developers and designers. By utilizing the CSS properties writing-mode and text-orientation, you can achieve unique and visually appealing vertical text layouts on your web pages.

The article begins by explaining the fundamentals of vertical text-orientation, highlighting its significance in creating engaging and innovative designs. It introduces the CSS writing-mode property, which controls the flow direction of text, and the text-orientation property, which ensures the upright positioning of characters within the vertical text.

Readers will discover step-by-step instructions on how to implement vertical text-orientation in their HTML and CSS code. Clear examples and code snippets illustrate the necessary CSS declarations and HTML structure needed to achieve the desired effect. The article covers essential considerations such as preventing line breaks, selecting appropriate fonts, and specifying font sizes for optimal vertical text rendering.

Additionally, the guide offers practical tips for customizing the appearance of vertical text through CSS properties like color, background, padding, and margins. It emphasizes the importance of responsiveness and cross-browser compatibility, providing recommendations for ensuring consistent vertical text layouts across various devices and browsers.

Whether you’re looking to create vertical navigation menus, artistic text designs, or unique typographic compositions, this article equips you with the knowledge and techniques to implement vertical text-orientation in your HTML and CSS projects. Embrace the creative possibilities offered by vertical text and enhance the visual appeal and user experience of your web pages.

In this article, you will learn

How to write text vertical using CSS
How to specify the Text-orientation of characters in vertical

I will explain about it.

How to write text vertical with CSS

The structure of the website is basically horizontal writing, but you can also set its text to vertical using CSS. For vertical Text writing, you mainly need to set writing-mode and text-orientation in css.

Writing-mode allows you to set horizontal and vertical directions and whether content flows from right to left or from left to right.

In text-orientation, you can set whether to rotate the text by 90 degrees. Let’s take a look at these properties.

Set Text-Orientation using Writing-mode in css

Now let’s write the settings for vertical Text writing with CSS. See the code here.

<html>
<head>
<style>
   .test1 {
writing-mode: vertical-rl; 
}
</style>
</head>

<body>
<p class = "test1" > Hello, Welcome To Programming Digest </p>
</body>
</html>

<html>

<head>

<style>

.test1 {

writing-mode: vertical-rl;

}

</style>

</head>

<body>

<p class = "test1" > Hello, Welcome To Programming Digest </p>

</body>

</html>

Vertical text-orientation in Html and Css

In this code, the writing-mode is set to vertical, and the standard layout rl (text flows from top to bottom). By the way, writing-mode mainly allows such settings.

horizontal-tb	It is written horizontally and the lines flow from top to bottom.
vertical-rl	It is written vertically and the lines flow from right to left or top to bottom.
vertical-lr	It is written vertically and the lines flow from left to right or bottom to top.

The behavior of the writing-mode used for vertical Text writing often changes depending on the browser, and the default position often changes.

Next, let’s see how to specify the position.

create a right-justified layout for easy viewing

If you leave it as it is, the layout may change depending on the browser, and it may be difficult to read. So let’s change the previous code to:

<html>
<head>
<style>
    .textbox { 
position : absolute ;
right : 0 ; 
    }
    .vertical { 
        writing-mode : vertical-rl ;
    }
</style>
</head>
<body>
<div class = "textbox" >
<p class = "vertical" >Welcome To Programming Digest</p>
</div>
</body>
</html>

<html>

<head>

<style>

.textbox {

position : absolute ;

right : 0 ;

}

.vertical {

writing-mode : vertical-rl ;

}

</style>

</head>

<body>

<p class = "vertical" >Welcome To Programming Digest</p>

</div>

</body>

</html>

Vertical text-orientation in Html and Css

In this code, div tags surround the p tag containing the previous body. If you set the position to absolute and right to 0 in this div tag, you can align it to the right.

You can specify the 0 of this right in px or %, or use margin to arrange it as you like. In this way, even if you set the writingmode to vertical-rl, you still need to set the layout yourself.

Let’s change the layout for each necessary part and create a good-looking vertical writing layout.

Set orientation of the text with “text-orientation”

I used uppercase and lowercase for the text I wrote vertically earlier. Still, not all the characters were written vertically.

Here, let’s apply text-orientation to make all letters vertical. See the code here.

<html>
<head>
<style>
    .textbox { 
position : absolute ;
right : 50 %; 
    }
    .vertical { 
        writing-mode : vertical-rl ;
text-orientation : upright ;
    }
</style>
</head>
<body>
<div class = "textbox" >
<p class = "vertical" >Programming Digest</p>
</div>
</body>
</html>

<html>

<head>

<style>

.textbox {

position : absolute ;

right : 50 %;

}

.vertical {

writing-mode : vertical-rl ;

text-orientation : upright ;

}

</style>

</head>

<body>

<p class = "vertical" >Programming Digest</p>

</div>

</body>

</html>

Vertical text-orientation in Html and Css

This is centered on clarity. If text-orientation is specified as upright, all characters can be written vertically.

The initial value is assigned a value of mixed, and other symbols are automatically set to the appropriate orientation.

If there are characters that you want to set individually, it’s a good idea to assign mixed to the whole and then enclose the characters you want to set individually with a span tag.

<html>
<head>
<style>
    .textbox { 
position : absolute ;
right : 50 %; 
    }
    .vertical { 
        writing-mode : vertical-rl ;
text-orientation : mixed ;
    }
    .vertical_part { 
text-orientation : upright ;
    }
</style>
</head>

<body>
<div class = "textbox" >
<p class = "vertical" >Programming<span class = "vertical_part" > Welcome</span>Digest</p>
</div>
</body>
</html>

<html>

<head>

<style>

.textbox {

position : absolute ;

right : 50 %;

}

.vertical {

writing-mode : vertical-rl ;

text-orientation : mixed ;

}

.vertical_part {

text-orientation : upright ;

}

</style>

</head>

<body>

<p class = "vertical" >Programming<span class = "vertical_part" > Welcome</span>Digest</p>

</div>

</body>

</html>

Vertical text-orientation in Html and Css

How to write bullet points vertically in css

Some people may be worried about whether the tags used for horizontal writing can be used instead of vertical Text writing. These tags can be used as normal. See the code here.

<html>
<head>
<style>
.textbox { 
position :absolute ;
right : 50 %;
        writing-mode : vertical-rl;
    }
.vertical { 
text-orientation : mixed;
    }
.vertical__part {
text-orientation : upright;
    }
</style>
</head>

<body>
<div class = "textbox" >
<p class = "vertical" >Hey<span class = "vertical__part" >Welcome</span>To our website</p>
<ul>
<li>Welcome</li>
<li>To </li>
</ul>
<ol>
<li>Programming</li>
<li>Digest</li>
</ol>
</div>
</body>
</html>

<html>

<head>

<style>

.textbox {

position :absolute ;

right : 50 %;

writing-mode : vertical-rl;

}

.vertical {

text-orientation : mixed;

}

.vertical__part {

text-orientation : upright;

}

</style>

</head>

<body>

<p class = "vertical" >Hey<span class = "vertical__part" >Welcome</span>To our website</p>

<ul>

<li>Welcome</li>

</ul>

<ol>

<li>Programming</li>

<li>Digest</li>

</ol>

</div>

</body>

</html>

Vertical text-orientation in Html and Css

As you can see, I was able to write bullets vertically in the same way. However, in addition to the tags introduced this time, there are still tags that do not support vertical Text writing.

Be careful because you need to check for each browser whether you can actually use it.

Summary

In this article, I have explained how to write vertically with CSS. Did you know how to write vertically?It may take some time to get used to because it is slightly different from the horizontal layout, but you can create an eye-catching layout by using it in the appropriate parts. If you want to write vertically with CSS, please refer to this article.

Fawad May 18, 2023

0 44 4 minutes read