CSS direction Property

The direction property defines the text direction.

The direction property sets the base text direction of block-level elements and the direction of embeddings which are created by the unicode-bidi property. It also sets the text's default alignment of block-level elements and the direction that cells flow within a table row.

As a difference from dir attribute in HTML, the direction property is not inherited from table columns into table cells.

The direction property has no any effect on inline-level elements.

Initial Value ltr
Applies to All elements.
Inherited Yes.
Animatable Discrete.
Version CSS2
DOM Syntax object.style.direction = "rtl";

Syntax

direction: ltr | rtl | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
      direction: rtl;
      }
    </style>
  </head>
  <body>
    <p>As you can see, this text is written with default direction.</p>
    <div>However, this text is written from right to left as we defined.</div>
  </body>
</html>

In the given example the "rtl" value is used. The text goes from right to left.

Values

Value Description
ltr Means that the direction of text will be from left to right. This is the default value of the property.
rtl Means that the direction of text will be from right to left.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.




Related articles