Vertical Text, with Horizontal Letters in CSS

css
Published on May 18, 2020

Creating a vertical direction text with horizontal characters can be achieved using text-orientation & writing-mode CSS properties.

TIP : Consider using a monospace font such as Courier, Consolas, Roboto Mono etc for a better look. A monospace font contains letters / characters of equal width.

Method 1) Using text-orientation & writing-mode

With writing-mode: vertical-lr rule, content of the element will flow vertically from top to bottom.

Adding to this, text-orientation: upright will lay out individual letters horizontally.

letter-spacing CSS property can also be used to set gap between individual letters.

<div id="sample-1">SAMPLE TEXT</div>
#sample-1 {
	writing-mode: vertical-lr;
	text-orientation: upright;
}

Demo :

SAMPLE TEXT

Method 2) Using overflow-wrap

(This method is shown just for the sake of explanation. It has its limitations)

By setting a small width of the element and using overflow-wrap: break-word will cause all letters to be overflown to the next line.

Spaces will however be needed to be replaced by &nbsp; symbol.

<div id="sample-2">SAMPLE&nbsp;TEXT</div>
#sample-2 {
	overflow-wrap: break-word;
	width: 15px;
}

Demo :

SAMPLE TEXT
In this Tutorial