direction

Summary

The direction CSS property specifies the text direction/writing direction. The rtl is used for Hebrew or Arabic text, the ltr is for other languages.

Overview table

Initial value: ltr
Applies to: All elements
Inherited: Yes
Media: visual
Computed value: specified value
Animatable: No
CSS Object Model Property: direction
Percentages: N/A

Syntax

direction: ltr
direction: rtl

Values

ltr: Default. Content flows left to right.
rtl: Content flows right to left.

Examples

The following example demonstrates how to set and retrieve the value of the direction property.

<p>This is a paragraph using default writting direction(ltr).</p>

<p class="rtl">This is a paragraph using right-to-left direction.</p>

<p class="rtl" id="bidi">The paragraph using rtl and sets the bidi-override as value of unicode-bidi property.</p>

View live example

p {
    width: 300px;
    background-color: #cccccc;
}

.rtl {
    direction: rtl;
}

#bidi {
    unicode-bidi: bidi-override;
}

Notes

The property does not affect alphanumeric characters in Latin documents. These characters always render ltr. However, the property does affect punctuation characters in Latin documents. The property pertains only to the directional flow of an element’s content. It has no effect on properties such as left or right, margin-left or margin-right. The margin-left property, for example, sets or retrieves the width of the margin on the left side of the document regardless of the value of the direction property.

Related specifications

Cascading Style Sheets Level 2 Revision 1: W3C Recommendation

Attributions

Microsoft Developer Network: [Windows Internet Explorer API reference Article]