Vertical Text In HTML CSS (Simple Examples)

Once upon a time, a student is tasked to create a site with vertical text. She smiled and said “just set it in CSS and it’s done”. Yep, there are only 2 CSS properties you need to mess with to create vertical text – writing-mode and text-orientation. Let Master Coffee walk you through a few simple examples, let’s go.

 

CODE DOWNLOAD

I have released this under the MIT license, feel free to use it in your own project – Personal or commercial. Some form of credits will be nice though. 🙂

 

 

VIDEO TUTORIAL

 

1) CSS WRITING MODE

<style>
#demoA {
  writing-mode: vertical-lr;
  background: #f1caca;
}
#demoB {
  writing-mode: vertical-rl;
  background: #d5e0fc;
}
</style>

<div id="demoA">
  <p>Line One</p>
  <p>Line Two</p>
</div>
<div id="demoB">
  <p>Line One</p>
  <p>Line Two</p>
</div>

Just set the writing-mode to vertical, and that’s pretty much all you have to do. But extra take note of the orientation of the lines.

• vertical-lr The first line starts on the left, and the last line is on the right.
• vertical-rl The first line starts on the right, and the last line is on the left.

 

 

2) CSS TEXT ORIENTATION

<style>
#demoC {
  writing-mode: vertical-lr;
  text-orientation: upright;
  background: #f1caca;
}
#demoD {
  writing-mode: vertical-lr;
  text-orientation: sideways;
  background: #d5e0fc;
}
</style>

<div id="demoC">
  <p>Line One</p>
  <p>Line Two</p>
</div>
<div id="demoD">
  <p>Line One</p>
  <p>Line Two</p>
</div>

But Master Coffee, people are breaking their necks to read the rotated text! Fear not, just set another text-orientation to “fix it”.

• upright Text on runs top to bottom.
• sideways This is the default, text is rotated 90 degrees.

 

 

3) CSS ROTATE & FLIP

<style>
#demoE {
  writing-mode: vertical-lr;
  text-orientation: upright;
  background: #f1caca;
  transform: rotate(30deg);
  position: relative; top: 10px; left: 30px;
}
#demoF {
  writing-mode: vertical-lr;
  text-orientation: sideways;
  transform: scale(-1, -1);
  background: #d5e0fc;
}
</style>

<div id="demoE">
  <p>Line One</p>
  <p>Line Two</p>
</div>
<div id="demoF">
  <p>Line One</p>
  <p>Line Two</p>
</div>

If you need more funky vertical text:

• transform: rotate(N deg) If you need the text to be at a very specific N degrees, this will help you rotate the entire container.
• position: relative; top: N px; left: Npx; Optional. Rotating the container may cut off some of the text and block some other elements. Use position padding margin to help you deal with the offset.
• transform: scale(-1, -1) As above, sideways orientation will rotate the text 90 degrees. If you need it in the “opposite direction”, just flip it.

 

 

THE END – OTHER LANGUAGES

That’s all for this short tutorial and sharing. Captain Obvious, the above examples are in English. There are right-to-left languages such as Arabic, which Master Coffee don’t understand and have not tried… But technically, it’s the same. Just work with writing-mode and text-orientation, everything should be fine.

 

CHEAT SHEET