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.

The easiest way to create a block of vertical text in CSS is to set a vertical writing mode on the element.

  • <p style="writing-mode: vertical-rl">Vertical right to left.</p>
  • <p style="writing-mode: vertical-lr">Vertical left to right.</p>

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.

 

 

REAL QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Vertical Text Useful Bits & Links
The End

 

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

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.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer 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.

 

VERTICAL TEXT WITH CSS

All right, let us now get into the various examples on setting vertical text with CSS.

 

1) CSS WRITING MODE

1-writing-mode.html
<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

2-text-orientation.html
<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

3-css-rotate.html
<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.

 

 

USEFUL BITS & LINKS

That’s all for this project, and here is a small section on some extras that may be useful to you.

 

LIMITATIONS

Take note that most modern “A-Grade” browsers should be able to render vertical text and rotate properly. But if you have to support the ancient browsers, you will have to fall back to typing “funky manual vertical text”.

 

INFOGRAPHIC CHEAT SHEET

Vertical Text With CSS (Click to enlarge)

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

3 thoughts on “How To Create Vertical Text With CSS – Simple Examples”

  1. Very nice article.
    I would like to know how to write bottom to top text in the ‘mixed’ or ‘sideways’ style. Got any tip?

Leave a Comment

Your email address will not be published. Required fields are marked *