direction

direction specifies the horizontal writing direction of the document. There are two possible values: ltr (Left To Right) specifies left-to-right writing, while rtl (Right To Left) specifies right-to-left writing.

Initial Value ltr
Applies to All elements
Inheritance yes
Animation discrete

The direction property is used to define text direction, specifically for sites that use direction other than Left to Right (ltr).

For example, when using the Arabic alphabet, the reading is specified as from Right to Left (RTL).

The direction property is quite versatile and controls the following features:

  • The way the text is displayed in the block;
  • The order of the columns in the table;
  • The scrollbar position in the block;
  • The position of the last dangling line of the text block at text-align: justify.

For use with embedded elements, the Unicode-bidi property must be set to embed or override.

Syntax

/* Keyword values */

direction: ltr;
direction: rtl;

/* Global values */

direction: inherit;
direction: initial;
direction: revert;
direction: unset;

Description

valuewhat it does
ltrDefault value. Sets the direction from left to right.
rtlSets the direction from right to left.
initialSets the default value.
inheritThe value is inherited from the parent element.

Example

direction: ltr;

ltr: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

direction: rtl;

rtl: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

#direction_ltr {
	direction: ltr;
	unicode-bidi: bidi-override;
}

#direction_rtl {
	direction: rtl;
	unicode-bidi: bidi-override;
}