CSS

CSS

🎯 What is direction?

The direction property is used to define the text or content flow direction within an HTML element.

In other words, it controls whether the text is read from:

  • Left to right (LTR)
  • Right to left (RTL)

This property is especially useful for languages such as Arabic or Hebrew, which are written from right to left.

🔹 Basic Usage

CSS

p { 
    direction: ltr; 
}

➡️ In this example, the paragraph content flows from left to right ( LTR – Left To Right ).

This is the default direction for languages like English or Turkish.

🔹 Values

1. ltr (Left To Right)

Text flows from left to right.

Example:

CSS

p { 
    direction: ltr; 
}

✳️ Commonly used for languages such as:

  • Turkish
  • English
  • French
  • German

2. rtl (Right To Left)

Text flows from right to left.

Example:

CSS

p { 
    direction: rtl; 
}

✳️ Commonly used for languages such as:

  • Arabic
  • Hebrew
  • Persian

🔍 Example Difference

HTML

<p style="direction: ltr;">Hello World!</p>

<p style="direction: rtl;">Hello World!</p>

➡️ The first text starts from the left side, while the second starts from the right side.

3. initial

Resets the text direction to the browser’s default value.

Example:

CSS
direction: initial;

➡️ In most browsers, this usually becomes ltr.

4. inherit

Inherits the text direction from the parent element.

Example:

CSS

div { 
    direction: rtl; 
}

p   { 
    direction: inherit; 
}

➡️ Here, the <p> element inherits the right-to-left direction from the <div> element.

💡 Summary Table

Value Meaning
ltr Text flows from left to right
rtl Text flows from right to left
initial Resets to the browser default
inherit Inherits the direction from the parent element

  • 🧠 Summary

  • The direction property defines the writing direction of text inside an element.
  • It is generally chosen based on the language being used:
  • Turkish, English, French, etc. → ltr
  • You can also:
  • Use initial to reset the value
  • Use inherit to inherit the direction from a parent element
  • The direction property is especially important when building multilingual websites or supporting right-to-left languages.
CSS Repeating Radial Gradient
CSS unicode-bidi