The direction property in CSS is used to define the direction in which text is displayed inside an element. It helps control the flow of content for different writing systems and languages.
- Supports two main values: ltr (left to right) and rtl (right to left).
- Commonly used for languages like Arabic and Hebrew that follow right-to-left writing.
- Helps improve text layout and proper content alignment in multilingual websites.
Syntax:
element_selector {
direction: rtl | ltr | initial | inherit;
}
Default Value: ltr
Property values:
- rtl: Specifies the direction as the right to left.
- ltr(default): Specifies the direction as left to right which is also the default direction.
- initial: Sets the property to its default value.
- inherit: Inherits the property from the parent element.
Example: Here, we are using the above-explained property.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
CSS | direction Property
</title>
<!--Driver Code Ends-->
<style>
html {
color: green;
}
.rtl {
direction: rtl;
}
.ltr {
direction: ltr;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>This text goes from left to right. This is default.</p>
<p class="ltr">This text goes from left to right.</p>
<p class="rtl">This text goes from right to left.</p>
</body>
</html>
<!--Driver Code Ends-->