This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

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

See also

Other articles

Attributions