CSS direction

The direction property specifies the direction of text flow within block-level elements. Block-level elements are the ones which always start from a new line and covers the full width available to them. div, p and form are some of the examples of block-level elements.

By default, direction of text flow is from left to right. This property can be used to make the text flow from right to left. This can be useful in displaying some languages like Arabic, Hebrew and Persian where text is written from right to left.

CSS

direction: value;

The direction property is effective only for block-level elements. It is normally used when you wish to change the text direction of an entire paragraph or document. It also sets the direction of flow of table cells within table rows.

Note: To make the property work for inline elements, it is used along with unicode-bidi property. Getting the property work for inline elements can be useful when you have to display both left-to-right and right-to-left content in the same paragraph or document. For example, displaying sentences in English (left-to-right) and Hebrew (right-to-left) in the same paragraph.

Values

ltr : This is the default value. Sets text flow from left to right.

rtl : Sets text flow from right to left.

initial : Sets the default value of the property.

inherit : Inherits the value from parent element.

To change the direction of text of an element from right to left, simply give the following value to the element.

CSS

.element {
	direction: rtl;
}

Examples

In the following example, direction: rtl is given to the text which is colored red.

HTML

<div>This is default text.</div>

<div id="dir1">This is block-level element.</div>

<div>This is block-level element. <span id="dir2">This is inline element.</span> This text will run from left to right.</div>

CSS

#dir1 {
  direction: rtl;
  color: red;
}

#dir2 {
  direction: rtl;
  color: red;
}

See the Pen direction: rtl by Aakhya Singh (@aakhya) on CodePen.

As you can see, the text of the second div (block-level element) starts from the right margin towards the left margin. Also notice that the property did not affect the text direction of the span because it is an inline element.

To change the text direction of inline elements, direction property is used with unicode-bidi property.

direction with unicode-bidi: embed

We will repeat the above example giving unicode-bidi: embed along with direction: rtl to make text flow from right to left for inline elements.

CSS

#dir1 {
  direction: rtl;
  unicode-bidi: embed;
  color: red;
}

#dir2 {
  direction: rtl;
  unicode-bidi: embed;
  color: red;
}

See the Pen direction: rtl and unicode-bidi: embed by Aakhya Singh (@aakhya) on CodePen.

Here unicode-bidi: embed is given to the span (inline element) in the third div along with the direction property. This changed the direction of the text from its right margin to its left margin (notice the position of ' . ').

Browser Support

This property is supported in all modern browsers.