40
Views
4
Comments
Solved
How to make text stand vertical
Application Type
Traditional Web

Hello everyone,

A section of my application requires text in vertical form. I need an idea on how to make text stand vertical. Please, kindly assist. Thanks

2019-01-07 16-04-16
Siya
 
MVP
Solution

Apply a CSS class like:   .vertical-text {writing-mode: vertical-rl;text-orientation: upright;}  Assign it to your element, and adjust writing-mode or text-orientation as needed.  See https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation  for options.

2025-07-28 06-45-20
Rupesh Patil

Hi @Harrison 

You can use this CSS:

.vertical-text {

  writing-mode: vertical-lr;    /* vertical-rl also works */

  text-orientation: upright; 

}

  • vertical-rl : text flows from top to bottom.

  • vertical-lr : text flows bottom to top.

  • text-orientation: upright : keeps each character upright.

Usage in OutSystems:

  • Drag a Container or Expression.

  • Assign Style Classes : vertical-text.

  • Add your text.

I hope this helps

Thanks




2024-06-10 11-39-07
Abhishek Mandloi

Hi @Harrison,

You can Direct apply on Style in properties "vertical-text "

2025-08-07 06-30-56
Amit J
Champion

Add just 

    writing-mode: vertical-rl; 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.