How to Vertically Write Text With CSS

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

/* Use writing-mode with text-orientation to create vertical texts */
span {
    writing-mode: vertical-rl;
    text-orientation: upright;
}

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

span {
    writing-mode: vertical-lr; /* left to right */
    writing-mode: vertical-rl; /* right to left */
}

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.

10 Best Practices for Quickly Improving Your CSSBuilding scalable and manageable stylesheetsCSS has its own nuances that can make or break your design. Here are 10 tips for CSS :  best practices that can help you bring out the best from your styles.Learn More

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Resources:

• The writing-mode property
• The text-orientation property