Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to display text Right-to-Left Using CSS?
The CSS direction property is used to set the text direction for elements, allowing you to display text from right-to-left (RTL) or left-to-right (LTR). This is essential for languages like Arabic, Hebrew, and Urdu that are naturally written from right to left.
Syntax
selector {
direction: rtl | ltr | initial | inherit;
}
Possible Values
| Value | Description |
|---|---|
rtl |
Sets text direction from right to left |
ltr |
Sets text direction from left to right (default) |
initial |
Sets the property to its default value |
inherit |
Inherits the direction from parent element |
Method 1: Using Direction Property
The direction property changes the base text direction of an element. Here's how to display text right-to-left
<!DOCTYPE html>
<html>
<head>
<style>
.rtl-text {
direction: rtl;
border: 1px solid #ccc;
padding: 10px;
margin: 10px 0;
}
.ltr-text {
direction: ltr;
border: 1px solid #ccc;
padding: 10px;
margin: 10px 0;
}
</style>
</head>
<body>
<h2>Default (Left-to-Right)</h2>
<div class="ltr-text">
This text flows from left to right (English style).
</div>
<h2>Right-to-Left Direction</h2>
<div class="rtl-text">
This text flows from right to left (Arabic/Hebrew style).
</div>
</body>
</html>
The first text box shows normal left-to-right text flow. The second text box shows right-to-left text flow where text starts from the right edge and flows leftward.
Method 2: Combining with Text-Align
You can combine direction with text-align for better control over text positioning
<!DOCTYPE html>
<html>
<head>
<style>
.rtl-aligned {
direction: rtl;
text-align: right;
background-color: #f0f8ff;
padding: 15px;
border-left: 4px solid #007bff;
}
.rtl-numbers {
direction: rtl;
font-size: 18px;
color: #333;
padding: 10px;
background-color: #fff3cd;
}
</style>
</head>
<body>
<h3>RTL Text with Right Alignment</h3>
<div class="rtl-aligned">
Hello World! ????? ???????
</div>
<h3>RTL with Numbers</h3>
<div class="rtl-numbers">
Price: $25.99 - ?????? ????
</div>
</body>
</html>
Two styled boxes appear: the first with blue-bordered RTL text aligned to the right, and the second showing how numbers and mixed languages display in RTL mode.
Example: Full RTL Layout
For complete RTL support, apply the direction to the entire document
<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
body {
direction: rtl;
font-family: Arial, sans-serif;
}
.container {
max-width: 400px;
margin: 20px auto;
padding: 20px;
border: 2px solid #4CAF50;
border-radius: 8px;
}
.highlight {
background-color: #ffffcc;
padding: 5px;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<h2>RTL Document Example</h2>
<p>This entire page flows right-to-left.</p>
<div class="highlight">
Notice how the layout and text direction both follow RTL rules.
</div>
</div>
</body>
</html>
A centered green-bordered container appears with all content flowing right-to-left, including the layout structure and text direction.
Conclusion
The CSS direction property is essential for creating multilingual websites that support RTL languages. Use direction: rtl for right-to-left text flow and combine it with appropriate text alignment for optimal results.
2K+ Views
