HTML/CSS : How to write a text vertically, keeping the characters horizontally

You may use the writing-mode CSS property in conjunction with the text-orientation CSS property.

div {
  writing-mode: vertical-lr;
  text-orientation: upright;
}

To quote, writing-mode property..

[..]specifies the block flow direction, which is the direction in which block-level containers are stacked, and the direction in which inline-level content flows within a block container. Content flows vertically from top to bottom, horizontally from right to left. The next vertical line is positioned to the left of the previous line.

In effect, this defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.

text-orientation property defines the orientation of the text characters in a line. This property only has an effect in vertical mode.

Example:

p:first-of-type {
  writing-mode: vertical-lr;
}
p:last-of-type {
  writing-mode: vertical-lr;
  text-orientation: upright;
}
<h4>With writing mode "vertical-lr"</h4>
<p>Start</p>
<hr>
<h4>With writing mode "vertical-lr" and text-orientation "upright"</h4>
<p>Start</p>

Be warned though about text-orientation:

This is an experimental technology Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

According to this: https://caniuse.com/#search=text-orientation, it seems nearly all browsers support it as of today, except IE/Edge.

Tags:

Html

Css