JIYIK CN >

In this article, we will use CSS to rotate HTML text. Rotated text is commonly used in many languages, such as Chinese, Japanese, or Korean.

Moreover, when designing a web page, developers may need to rotate the text to a certain degree to make the user interface more attractive. Here, we have used two different methods to rotate the text.

Rotating text using the CSS transform property

In the following example, we have created a div element and assigned it the element text class name for identification. Inside the div element, we have created an element and added text inside it.

Sample code:

<div class="example-text">
    <span>Rotated texts.</span>
</div>

Now, to rotate <div>all the text of the <div> element, we access the div using the class name in CSS.

Next, we transform: rotate(-90deg)applied the CSS properties to the div element to rotate the entire content. However, we used -webkit-transform: rotate(-90deg);To rotate the text in Chrome browser, -moz-transform: rotate(-90deg);in Firefox browser, -o-transform: rotate(-90deg);the same as in Opera.

Additionally, we've applied some additional CSS to position the div element at the top. Here, this Position: absolutemeans that the position of the div element will change relative to its parent element, which is the document body itself.

.example-text {
    -webkit-transform: rotate(-80deg);
    -moz-transform: rotate(-80deg);
    -o-transform: rotate(-80deg);
    position: absolute;
    top: 40px;
}

In the output below, the user can see that the text is rotated 90 degrees counterclockwise.

If we pass positive degrees as a parameter to rotate()the method, it rotates the content or text in clockwise direction as you can see from the following example.

.example-text {
    -webkit-transform: rotate(80deg);
    -moz-transform: rotate(80deg);
    -o-transform: rotate(80deg);
    position: absolute;
    top: 40px;
}
<div class="example-text">
    <span>Rotated texts.</span>
</div>

Rotating text using the CSS writing-mode property

The writing-mode CSS property helps us change the direction of the text. Using it, we can rotate the text by 90 or -90 degrees.

We can use verticle-rl as the value of the writing-mode property to rotate the text so that users can read it from right to left and from top to bottom.

In the following example, we create <p>HTML markup that contains some writing-mode:vertical-rltext that we rotate using CSS properties.

Sample code:

<p class="text">These text rotated by writing-mode: vertical-rl; CSS property. Read it from top to bottom and left to right.</p>
.text{
    writing-mode: vertical-rl;
    height: 200px;
}

If we use verticle-lr as the value of the writing-mode property, it rotates the text so that it can be read from left to right and top to bottom.

.text{
    writing-mode: vertical-lr;
    height: 200px;
}
<p class="text">These text rotated by writing-mode: vertical-rl; CSS property. Read it from top to bottom and left to right.</p>

The above output allows the user to read the text from left to right and top to bottom.

We have learned different methods to rotate text. The first method allows the programmer to rotate the text by any degree.

Using the second method, the programmer can rotate the text 90 degrees so that it can be read from left to right or right to left. Therefore, the first method is recommended.