![How to Vertically Write Text With CSS](https://allma.si/blog/wp-content/uploads/2020/11/vertically-write-text-with-css.png)
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
.
![Example of difference between mixed and upright orientation](https://allma.si/blog/wp-content/uploads/2020/11/mixed-vs-upright-orientation-1.gif)
![How to make writing direction vertical in CSS](https://allma.si/blog/wp-content/uploads/2020/11/vertically-write-text-with-css.png)
![10 Best Practices for Quickly Improving Your CSS](https://miro.medium.com/max/700/1*m7oyUcMoJsW5wyzGfh6ydA.png)
Resources:
![Mentoring](/assets/img/mentoring.png)
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
![CSS - The Complete Guide (including Flexbox, Grid and Sass)](https://img-c.udemycdn.com/course/480x270/1561458_7f3b_2.jpg)
CSS - The Complete Guide (including Flexbox, Grid and Sass)
![The HTML & CSS Bootcamp](https://img-c.udemycdn.com/course/480x270/5088684_a587_7.jpg)
The HTML & CSS Bootcamp
![The Creative HTML5 & CSS3 Course](https://img-c.udemycdn.com/course/480x270/3014898_c2e1_3.jpg)