CSS direction Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 28 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The direction property in CSS is used to set the text direction of an element.

This property is particularly useful for creating web pages that support languages written from right to left (RTL), such as Arabic and Hebrew. By controlling the direction of text, you can ensure that your website provides a proper and intuitive reading experience for users of different languages.

💡 Syntax

The syntax for the direction property is straightforward. It can be applied to any block-level element.

Syntax

Copied

element {
  direction: ltr | rtl | initial | inherit;
}

🎛️ Default Value

The default value of the direction property is ltr (left-to-right).

🏠 Property Values

Value	Description
ltr	Text direction goes from left to right. This is the default value.
rtl	Text direction goes from right to left.
initial	Sets the property to its default value (ltr).
inherit	Inherits the `direction` property from its parent element.

📄 Example

In this example, we'll change the text direction of a paragraph to right-to-left.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS direction Property Example</title>
  <style>
    p.rtl {
      direction: rtl;
    }
  </style>
</head>
<body>
  <h1>Paragraph with Custom Text Direction</h1>
  <p>This paragraph is left-to-right by default.</p>
  <p class="rtl">This paragraph is right-to-left.</p>
</body>
</html>

🖥️ Browser Compatibility

The direction property is supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is also supported in older browsers, ensuring broad compatibility across different user environments.

🎉 Conclusion

The direction property is an essential tool for web developers who need to support multiple languages, especially those written in right-to-left scripts.

By controlling the direction of text, you can create a more inclusive and user-friendly web experience. Experiment with this property to see how it can enhance the readability and accessibility of your web content.