How to knock down vertical text by 90 degrees with CSS

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.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top