There are several ways to make text vertical using CSS, but under certain circumstances it may be necessary to rotate the text 90 degrees. This can be accomplished by combining two CSS properties: writing-mode: vertical-rl;
and text-orientation: sideways;
.
Below is an example of how Japanese text can be written vertically and then rotated an additional 90 degrees.
<p style="writing-mode: vertical-rl; text-orientation: sideways;">This is test text. </p>
In this code, writing-mode: vertical-rl;
aligns the text vertically, and text-orientation: sideways;
rotates each character 90 degrees.
However, the text-orientation: sideways; property
is not yet supported by all browsers, so be careful when using it.