Rotating Text in HTML

In many situations we may need to rotate HTML text like display text vertically in a table or list, creating text-based logos, designing charts and graphs, creating text animations, etc. We can use CSS to rotate a text to specific degrees such as 45 degrees, 90 degrees, etc. So, in this article, we will see how to rotating a HTML text.

What is rotating text?

It is the process of changing the text orientation within a webpage. By rotating text, designers and developers can make their web content more visually interesting and engaging. We can rotate a text of the range from 0 to 360 degrees CSS transforms property. If we create text using any HTML tag, by default the text will be displayed straight line from left to right, For example:

<p>This is the paragraph text</p>

Output

In this example, we have created the texts using <p> tag. Note that : the text is displayed horizontal line from left to right. To easily rotate HTML texts, you can use CSS “transform”, “writing-mode” or “text-orientation” properties.

How to rotate text?

Follow these 3 ways to rotate a HTML element text is using CSS:

1. transform property

The first way is to use the CSS transform property 

Syntax:

transform: rotate(<angle>);

• rotate = This is a function and it is used to specify the amount of rotation in degrees.
• <angle> = We have to give the number of degrees we want to rotate like 45deg, 90deg, etc.

Example

HTML:

<div class="container">
  <p class="rotate-text">45 Degree Rotated Text</p>
</div>

CSS:

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the container on the page */
}

.rotate-text { 
  transform-origin: center; /* To the center of the element */
  transform: rotate(45deg); /* Rotate the text by 45 degrees */
}

Output:

In the above example code, we first create a container div element that will contain our text element <p>. Then we rotate the text by 45 degrees by set the CSS ‘transform property’ to ‘rotate(45deg)’.

Normally, if we use the rotate() function, the text will go off the screen. So we have to Position the container element at the center of the page using position: absolute, top: 50% and left: 50%. We also use transform: translate(-50%, -50%) to center the element relative to its own dimensions.

Add our text element inside the container element and apply the transform-origin property with a value of center to center the rotation of the element around its center. You can rotate any HTML element i.e the div, p, span, etc using this property easily.

2. writing-mode property

This property specifies whether text should be displayed horizontally or vertically, and can be used to achieve different types of rotation.

Syntax:

writing-mode: horizontal-tb | vertical-rl | vertical-lr ;

• horizontal-tb = to rotate text horizontally from left to right, vertically from top to bottom. This is the default value for the write method property.
• vertical-rl = to rotate text vertically from top to bottom, horizontally from right to left
• vertical-lr = to rotate text vertically from top to bottom, horizontally from left to right

Example
HTML:

<!--horizontal-tb-->
   <div class="box">
      <p class="text1">This is horizontal-tb text </p>
   </div>

<!--vertical-rl-->
   <div class="box">
      <p class="text2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat.</p>
   </div>

<!--vertical-lr-->
   <div class="box">
      <p class="text3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat.</p>
   </div>

CSS:

.text1{
      writing-mode: horizontal-tb;
   }
   .text2{
      writing-mode: vertical-rl;
   }
   .text3{
      writing-mode: vertical-lr;
   }
   .box {
      background-color: lightblue;
      color: black;
      padding: 10px;
      display: inline-block;
      vertical-align: middle;
      font-weight: bold;
   }

Output:

In this above code, we’re applying three writing-modes namely horizontal-tb, vertical-rl and vertical-lr to seperate text. The horizontal-tb is default value, so it display default text position. You can use vertical-rl value to the read text from right to left and top to bottom and vertical-lr value read text from left to right and top to bottom.

3. text-orientation property

It can be used to rotate text by 90 or 180 degrees, among other options. It has several values, each value rotates the text by different degrees.

Syntax

text-orientation: mixed | upright | sideways | sideways-right | use-glyph-orientation;

• mixed = T0 rotate text 90 degrees clockwise.
• upright = To text standing upright.
• sideways = It is only supported in Firefox.
• sideways-right = Similar to sideways value and it is used for compatibility purposes.
• use-glyph-orientation = To use in SVG elements.

Example
HTML :

<!--mixed-->
 <div class="box">
  <p class="mixed">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 </div>

<!--upright-->
 <div class="box">
   <p class="upright">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
     tempor incididunt ut labore et dolore magna aliqua. .</p>
 </div>

CSS:

.mixed{
      text-orientation: mixed; 
    }
    .upright{
      text-orientation: upright; 

   }
   .box {
      background-color: lightblue;
      padding: 10px;
      margin: 10px;
      display: inline-block;
      vertical-align: middle;
      font-weight: bold;
      height: 250px;
      width: fit-content;
        writing-mode: vertical-lr;
   }

Output:

In this example, we set the writing-mode to vertical-lr for both div. Then we use mixed and upright text-orientation values to separate text.

Conclusion

So, rotating HTML text can be a powerful tool for designers and developers who want to create visually appealing and effective web content.