How To Create Vertical Text With CSS (Simple Examples)

Welcome to a tutorial on how to create vertical text in CSS. Once upon a time in the Stone Age of the Internet, the direction of text is pretty much fixed on left-to-right. But thankfully, modern CSS has addressed the issue and supports vertical text with ease.

That covers the basics, but let us walk through some examples in this guide – Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TLDR – QUICK SLIDES

[web_stories_embed url=”https://code-boxx.com/web-stories/vertical-text-with-html-css/” title=”Create Vertical Text With HTML CSS” poster=”https://code-boxx.com/wp-content/uploads/2022/03/STORY-HTML-20230505.webp” width=”360″ height=”600″ align=”center”]

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

 

1) CSS WRITING MODE

<style>
.horiA { writing-mode: horizontal-tb; }
.vertiB { writing-mode: vertical-rl; }
.vertiC { writing-mode: vertical-lr; }
</style>
 
<h1>Horizontal Top-To-Bottom (Default)</h1>
<div class="horiA">
  <p>First Line.</p>
  <p>Second Line.</p>
  <p>Third Line.</p>
</div>
 
<h1>Vertical Right-To-Left</h1>
<div class="vertiB">
  <p>First Line.</p>
  <p>Second Line.</p>
  <p>Third Line.</p>
</div>
 
<h1>Vertical Left-To-Right</h1>
<div class="vertiC">
  <p>First Line.</p>
  <p>Second Line.</p>
  <p>Third Line.</p>
</div>

As in the introduction, writing-mode is the property that changes the direction of the text:

• horizontal-tb Horizontal, top-to-bottom. This is the default when nothing is set.
• vertical-rl Vertical, right-to-left.
• vertical-lr Vertical, left-to-right.

Yep, it’s as simple as that. But a quick note that some ancient browsers use a different property. If you want backward compatibility, also add the following:

• Horizontal top-to-bottom: writing-mode: lr
• Vertical right-to-left: writing-mode: tb-rl
• Vertical top-to-bottom: writing-mode: tb-lr

 

 

2) CSS TEXT ORIENTATION

<style>
.vertical { writing-mode: vertical-rl; }
.upright { text-orientation: upright; }
.sideways { text-orientation: sideways; }
</style>
 
<h1>Default (Mixed) Orientation</h1>
<div class="vertical">
  <p>First Line.</p>
  <p>Second 中文 Line.</p>
  <p>Third Line.</p>
</div>

<h1>Upright Orientation</h1>
<div class="vertical upright">
  <p>First Line.</p>
  <p>Second 中文 Line.</p>
  <p>Third Line.</p>
</div>

<h1>Sideways Orientation</h1>
<div class="vertical sideways">
  <p>First Line.</p>
  <p>Second 中文 Line.</p>
  <p>Third Line.</p>
</div>

Yep, CSS vertical text does work, but some characters are annoyingly rotated. To “fix” that problem, we can use the text-orientation property:

• mixed – The default setting for text orientation. Where vertical scripts such as Chinese Characters will be shown upright, but English Characters rotated 90° clockwise.
• upright – Where all the characters will be forced to show upright.
• sideways – All the characters will be forced to rotate 90° clockwise.

 

 

3) VERTICAL TEXT USING ROTATE

<style>
.vertical {
  transform: rotate(90deg);
  transform-origin: left top 0;
  margin-left: 70px;
}
</style>
 
<div class="vertical">
  Yahoo! This is vertical.
</div>

Finally, this is a funky alternative that is worth considering if the above writing mode somehow doesn’t work as intended.

• Simply use transform: rotate(90deg) to rotate a block of text 90 degrees clockwise; If you want the text to face the mirror direction, use transform: rotate(-90deg) to rotate 90 degrees counter-clockwise instead.
• But one big problem with using this rotation method is the text block ending up in a weird position. We will need to follow up with transform-origin: X-AXIS Y-AXIS Z-AXIS to define the rotation point…  Or use margin and position to help reposition properly.

While this method is a little more inconvenient, we have more controls and can literally skew and rotate the text to any angle we want.

 

 

 

COMPATIBILITY CHECKS

• Writing Mode – CanIUse
• Text Orientation – CanIUse

Most modern “A-Grade” browsers are able to render vertical text and rotate properly. But if you have to support the ancient browsers, you will have to fall back to”manually type out vertical text”.

 

LINKS & REFERENCES

• CSS Transform on MDN
• Writing Mode on MDN
• Text Orientation on MDN

 

INFOGRAPHIC CHEAT SHEET