CSS Direction

CSS direction property is used to specify the base direction of text and layout within a block. For example,

h1 {
    direction: rtl;
}

Browser Output

Here, direction: rtl changes the direction of the text of the h1 element to the right-to-left.

CSS Direction Syntax

The syntax for the direction property is as follows,

direction: ltr | rtl | initial | inherit;

Here,

ltr - sets the direction of text from left to right, the default value
rtl - sets the direction of text from right to left
initial - sets the property value to the default
inherit - inherits the property value from its parent element

Example of the Direction Property

Let's see an example of the direction property,

HTML

CSS

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>CSS Direction</title>
</head>

<body>
  <div class="numbers original">
      <h2>Original Numbers</h1>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
  </div>
 
  <div class="numbers ltr">
     <h2>direction: ltr (left-to-right)</h2>
   <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
  </div>

  <div class="numbers rtl">
      <h2>direction: rtl (right-to-left)</h2>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
  </div>
</body>

</html>

span {
    border: 1px solid blue;
    padding: 2px 4px;
}

/*sets the text direction to left-to-right, default value */
div.ltr {
    direction: ltr;
}

/* sets the text direction to right-to-left */
div.rtl {
    direction: rtl;
}

Browser Output

The value of rtl is applied to languages that are written from right to left, such as Arabic or Hebrew, whereas ltr is used for languages that are written from left to right, such as English.

Let's see an example,

HTML

CSS

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS Direction</title>
    </head>

    <body>
        <div class="english">
            <h2>English Text (left-to-right)</h2>
            <p>This paragraph have the direction to left-to-right.</p>
        </div>
        <div class="arabic">
            <h2>Arabic Text (right-to-left)</h2>
            <p>
                هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى
                اليسار. هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين
                إلى اليسار.
            </p>
        </div>
    </body>
</html>

/*sets the text direction to left-to-right, default value */
div.english {
    direction: ltr;
}

/* sets the text direction to right-to-left */
div.arabic {
    direction: rtl;
}

Browser Output