How to Reverse Text Direction in CSS

When working with text, there may be situations where you need to reverse its direction, so that it flows from right to left instead of the default left to right. This article provides a solution for such scenarios using CSS.

CSS Code to Change Text Direction

The following CSS code can be used to reverse the direction of text:

.cssClassName {
  direction: rtl;
  unicode-bidi: bidi-override;
}

Applying the Class

To apply this code, use the .cssClassName class to the HTML element that contains the text you want to reverse. For example, if you have a paragraph tag with the following text:

This is it

And you want to reverse its direction, apply the class like this:

This is it

The resulting text will be:

ti si sihT

Note: Ensure that the .cssClassName class is applied to an element that contains text as it will not work on empty elements.