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

CSS Direction

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,

<!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

CSS Direction Example Description

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,

<!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

CSS Direction Example Description

Note: The CSS property unicode-bidi can be combined with the direction property to change the direction of the text.

Our premium learning platform, created with over a decade of experience and thousands of feedbacks.

Learn and improve your coding skills like never before.

Try Programiz PRO
  • Interactive Courses
  • Certificates
  • AI Help
  • 2000+ Challenges