CSS direction Property

Description

The direction CSS property is used to define the text direction within an HTML element. It is primarily used for languages that are written from right to left, such as Arabic or Hebrew, to ensure proper text rendering. By default, text is displayed from left to right (ltr), which is suitable for most languages. However, when the "direction" property is set to "rtl" (right to left), the text and other inline elements within the specified container will be displayed in the opposite direction. This property plays a crucial role in maintaining the readability and cultural appropriateness of web content for users of various languages and scripts.

Initial value

ltr

Applies to

All elements

Inherited

Yes

Computed value

Specified value

Animatable

No

JavaScript syntax

object.style.direction

Interactive Demo

direction: ltr;

direction: rtl;

Syntax

direction: ltr | rtl

Values

• ltrThe direction of text and other elements go from left to right.
• rtlThe direction of text and other elements go from right to left.
• inherit

Example

<p>The direction of the letter from left to right. </p> 

<p class="test">The direction of the letter from right to left. </p> 

.test {
   direction: rtl; 
}

Browser Support

The following table will show you the current browser support for the CSS direction property.

Desktop
12	2	1	9.2	1

Tablets / Mobile
18	4	10.1	1	1	4.4

Last updated by CSSPortal on: 1st January 2024