CSS - direction Property

Quiz

CSS direction property is used to control the text direction of an element, which affects the layout and reading order of the text within that element. It ensures that text and other inline content are displayed in a manner consistent with the intended reading direction.

Syntax

direction: ltr | rtl | initial | inherit;

Property Values

Value	Description
ltr	It sets the text direction from left to right. Default.
rtl	It sets the text direction from right to left.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Direction Property

The following examples explain the direction property with different values.

Left to Right Text Direction

To let the direction of the text be from left to right, we use the ltr value. This is the default value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         font-size: larger;
         direction: ltr;
      }
   </style>
</head>

<body>
   <h2>
      CSS direction property
   </h2>
   <h4>
      left-to-right direction
   </h4>
   <p>
      This is the left-to-right direction of the text.
   </p>
</body>

</html>

Right to Left Text Direction

To let the direction of the text be from right to left, we use the rtl value. This is the default value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         font-size: larger;
         direction: rtl;
      }
   </style>
</head>

<body>
   <h2>
      CSS direction property
   </h2>
   <h4>
      right-to-left direction
   </h4>
   <p>
      This is the right-to-left direction of the text.
   </p>
</body>

</html>

Supported Browsers

Property
direction	2.0	5.5	1.0	1.3	9.2

css_reference.htm

Print Page