Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
direction

direction

Specifies the direction of text flow.

Sample Code

div.test { direction: ltr;}
div.test1 { direction: rtl;}

Available Values

Value	Description
ltr	Specifies text flow direction from left to right. This 'ltr' is the initial value for Japanese and English locales.
rtl	Specifies text flow direction from right to left. When specifying this value, you also need to set the 'unicode-bidi' property to 'bidi-override'.

Browser Preview

<p style="direction: ltr">This is a p element with 'direction: <span style="color: #f00">ltr</span>' specified.</p>

<p style="direction: rtl; unicode-bidi: bidi-override;">This is a p element with 'direction: <span style="color: #f00">rtl</span>' and 'unicode-bidi: bidi-override' specified.</p>

Browser Support

Desktop

Chrome

2+ ○

1 and earlier ×

Firefox

1+ ○

Safari

1+ ○

Edge

12+ ○

Supported in all versions

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

9.2+ ○

8 and earlier ×

Mobile

iOS Safari

1+ ○

Android Browser

4.4+ ○

3 and earlier ×

Chrome Android

Latest ○

Same support as desktop

Firefox Android

Latest ○

Same support as desktop

※ Version data based on MDN.

Overview

Specifies the direction of text flow.

To make text flow from right to left, you not only need to set the value to 'rtl', but you also need to set the 'unicode-bidi' property to 'bidi-override'.

If you find any errors or copyright issues, please contact us.

Home