πŸ’‘ This page contain affiliate links. By making a purchase through them, we may earn a commission at no extra cost to you.
How to Vertically Write Text With CSS

How to Vertically Write Text With CSS

Ferenc Almasi β€’ 2020 November 19 β€’ Read time 1 min read
  • twitter
  • facebook
CSS

Little known is that you can create vertical texts in CSS by using the writing-mode and text-orientation properties:

Copied to clipboard! Playground
/* Use writing-mode with text-orientation to create vertical texts */
span {
    writing-mode: vertical-rl;
    text-orientation: upright;
}
vertical.css

You can also change the horizontal writing direction from right-to-left and left-to-right with vertical-lr and vertical-rl respectively.

Copied to clipboard!
span {
    writing-mode: vertical-lr; /* left to right */
    writing-mode: vertical-rl; /* right to left */
}
vertical.css

While writing-mode sets whether the lines are following each other horizontally or vertically, text-orientation sets the orientation of each letter. By default, this property is set to mixed.

Example of difference between mixed and upright orientation
Interactive example from MDN's documentation
How to make writing direction vertical in CSS
If you would like to see more Webtips, follow @flowforfrank

10 Best Practices for Quickly Improving Your CSS

Resources:

  • twitter
  • facebook
CSS
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.