How to write text vertically with CSS?

Many programming languages ​​were originally developed based on English, and HTML is no exception.
Therefore, horizontal writing is the standard for displaying text.
However, as long as you use Japanese, I think there are times when you want to express yourself in vertical writing.

In this article, I will show you how to use CSS to write text vertically.

Basics: How to make vertical writing with CSS

To achieve vertical writing with CSS, use the “writing-mode” property.

writing-mode: vertical-rl;

The specified part will be written vertically.
In the sample below, the “p” element is specified for vertical writing.

CSS

p {
  writing-mode: vertical-rl;
}

HTML

<p>
 
</p>
<div></div>

If you want it centered

Writing-mode is CSS used to adjust the starting position and direction of the text, so normal CSS can be applied otherwise.
However, when you want to align the text in the center, if you set it in the same way as for horizontal writing, it may be slightly different from what you expected.
Let’s check it with a sample when writing a sentence in a box with a light blue background color.

CSS

p {
  width: 100px;
  height: 200px;
  writing-mode: vertical-rl;
  background-color: #acf2f4;
  text-align: center;
}

If you specify “text-align: center” like this, it will be the “vertical center”.
If you want to align to the “horizontal center”, you need to set “vertical-align: middle”.
Let’s rewrite the CSS.

p {
  display: table-cell;
  width: 100px;
  height: 200px;
  writing-mode: vertical-rl;
  background-color: #acf2f4;
  vertical-align: middle;
}

“vertical-align” is a property that is set for inline elements or table cells, so even if you just add it, it will not be reflected in the “p” element, which is a block element.
Note that in order to set “vertical-align” inside a block you need to specify “display: table-cell;” and treat the layout inside the block like a table cell.

By the way, it is possible to set at the same time as “text-align: center”.

p {
  display: table-cell;
  width: 100px;
  height: 200px;
  writing-mode: vertical-rl;
  background-color: #acf2f4;
  vertical-align: middle;
  text-align: center;
}

If you want to write vertically a text containing mixed alphanumeric characters

The same problem occurs with word processing software, but if alphanumeric characters are mixed in the text that you want to write vertically, only the alphanumeric characters will be displayed horizontally.
Let’s check the sample.

CSS

p {
  display: table-cell;
  width: 100px;
  height: 200px;
  writing-mode: vertical-rl;
  background-color: #acf2f4;
}

HTML

If you want to write alphanumeric characters vertically

Alphanumeric characters can also be written vertically by using the “text-orientation” property.

Let’s rewrite the CSS like this:

p {
  display: table-cell;
  width: 100px;
  height: 200px;
  writing-mode: vertical-rl;
  background-color: #acf2f4;
  text-orientation: upright; /* ←この行を追加 */
}

You can see that alphanumeric characters are also written vertically.
In most cases, specifying this “text-orientation: upright” will allow you to display it beautifully.

As of January 2022, “text-orientation” is compatible with the latest versions of browsers other than IE (Internet Explorer).
IE will end support in June 2022 and will be replaced with Microsoft Edge that supports ‘text-orientation’, so you can use it without worrying about it unless there is a serious problem.

Contents that can be specified for text-orientation

text-orientation is CSS used in conjunction with writing-mode to specify the orientation of the text.

* sideways is only compatible with Firefox as of January 2022

Let’s see how each is displayed.

CSS

div {
  display: flex;
}
p {
  padding: 0.5em;
  width: 100px;
  height: 200px;
  writing-mode: vertical-rl;
  background-color: #acf2f4;
}

p.mixed {
  text-orientation: mixed;
}

p.upright {
  text-orientation: upright;
}

p.sideways {
  text-orientation: sideways;
}

HTML

Each setting will change the appearance of the text, so it is a good idea to select the appropriate setting value according to the design you want to create.

Shake Ruby

When writing vertically, in most cases Japanese is displayed.
If you want to write sentences such as scripts and novels, you may use ruby.
Since HTML has a ruby ​​ruby ​​function, it is possible to use ruby ​​text vertically.

CSS

p {
  padding: 0.5em;
  width: 400px;
  height: 200px;
  writing-mode: vertical-rl;
  background-color: #acf2f4;
}

HTML

As shown in the sample above, even if ruby ​​is shaken, it will be displayed on the right side.
Regarding the ruby ​​function, it is possible to write text without worrying about the design or placement, regardless of whether it is written vertically or horizontally.

Notes on vertical writing

When designing in vertical writing, be aware that browsers and PCs are not designed for vertical writing.
For example, the wheel on many mice can only be turned up and down, so you can only scroll up and down.
If you write a long sentence in vertical writing, scrolling will be necessary, and in that case you will be worried about how to arrange it.
Text flows from left to right, so it would be nice to be able to scroll to the left with each scroll, but given the browser and mouse wheel, the only option is to scroll down.

In that case, it is necessary to carefully consider and design the placement of the entire sentence.
Of course, by making full use of JavaScript, it is possible to scroll text horizontally in conjunction with scrolling up and down, but it is necessary to carefully consider consistency with other parts and operational feeling.

If you want to write vertically, first consider whether you really need to write vertically.

summary

I showed you how to write text vertically using CSS.

Vertical writing is very effective when you use it when you need it. Please take advantage of it.