CSS Writing Modes

You can use a little-known, yet important and powerful CSS property to make text run vertically.

A screenshot of a page featuring a photo of Octavia Butler, with the text "Octavia Butler" running down the right edge, starting at the top and going down the page.

Or instead of running text vertically, you can layout a set of icons or interface buttons in this way. Or, of course, with anything on your page.

[…]

If you do want a bit more of a taste, look at this example that adds text-orientation: upright; to the mix — turning the individual letters of the latin font to be upright instead of sideways.

A collage of photos of a dog on the right, with the text "winter" running down the left side, with letters stacked one on top of another.

Code language: CSS

h1 {
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-transform: uppercase;
  letter-spacing: -25px;
}