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 set text direction in HTML?
Text direction in HTML controls how text flows within elements. The direction property specifies whether text reads from left-to-right (LTR) or right-to-left (RTL). This is essential for multilingual websites and proper display of languages like Arabic, Hebrew, or Persian.
We can set text direction using the CSS direction property through inline styles, internal stylesheets, or external CSS files. The direction property affects the text flow, alignment, and even the positioning of UI elements within the container.
Syntax
Following is the syntax for setting text direction using the CSS direction property −
direction: ltr | rtl | initial | inherit;
The values are −
ltr − Sets text direction to left-to-right (default for most languages)
rtl − Sets text direction to right-to-left (for Arabic, Hebrew, etc.)
initial − Uses the default value
inherit − Inherits the direction from parent element
Setting Right-to-Left Text Direction
The direction: rtl property makes text flow from right to left, which is useful for languages like Arabic, Hebrew, Urdu, and Persian.
Example
<!DOCTYPE html>
<html>
<head>
<title>Right-to-Left Text Direction</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Right-to-Left Text Example</h2>
<p style="direction: rtl; border: 1px solid #ccc; padding: 10px;">
This text flows from right to left. Notice how the text alignment changes and punctuation appears on the left side.
</p>
<p style="direction: rtl; border: 1px solid #ccc; padding: 10px;">
????? ??? ?? ???? ????????? ????? - ??? ?? ????
</p>
</body>
</html>
The output shows text flowing from right to left with proper alignment −
Right-to-Left Text Example [Text flows from right side, aligned to the right margin] This text flows from right to left. Notice how the text alignment changes and punctuation appears on the left side. ????? ??? ?? ???? ????????? ????? - ??? ?? ????
Setting Left-to-Right Text Direction
The direction: ltr is the default direction for most languages including English, Spanish, French, and German.
Example
<!DOCTYPE html>
<html>
<head>
<title>Left-to-Right Text Direction</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Left-to-Right Text Example</h2>
<p style="direction: ltr; border: 1px solid #ccc; padding: 10px;">
This text flows from left to right, which is the standard direction for English and most European languages.
</p>
<p style="direction: ltr; border: 1px solid #ccc; padding: 10px;">
Numbers like 123, 456 and punctuation appear in their normal positions.
</p>
</body>
</html>
The output displays normal left-to-right text flow −
Left-to-Right Text Example This text flows from left to right, which is the standard direction for English and most European languages. Numbers like 123, 456 and punctuation appear in their normal positions.
Using Internal CSS for Text Direction
Instead of inline styles, we can define text direction using internal CSS for better organization and reusability.
Example
<!DOCTYPE html>
<html>
<head>
<title>Text Direction with Internal CSS</title>
<style>
.rtl-text {
direction: rtl;
background-color: #f0f8ff;
padding: 15px;
border-left: 4px solid #007bff;
margin: 10px 0;
}
.ltr-text {
direction: ltr;
background-color: #f8f9fa;
padding: 15px;
border-left: 4px solid #28a745;
margin: 10px 0;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Text Direction with CSS Classes</h2>
<div class="ltr-text">
This paragraph uses left-to-right direction with a green border.
</div>
<div class="rtl-text">
This paragraph uses right-to-left direction with a blue border.
</div>
</body>
</html>
The output shows styled containers with different text directions −
Text Direction with CSS Classes [Green bordered box, text left-aligned] This paragraph uses left-to-right direction with a green border. [Blue bordered box, text right-aligned] This paragraph uses right-to-left direction with a blue border.
Mixed Direction Content
When dealing with mixed-direction content (like English text with Arabic words), proper handling becomes important.
Example
<!DOCTYPE html>
<html>
<head>
<title>Mixed Direction Content</title>
<style>
.mixed-content {
padding: 15px;
border: 2px solid #dc3545;
margin: 10px 0;
font-size: 16px;
}
.rtl-container { direction: rtl; }
.ltr-container { direction: ltr; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Mixed Direction Text</h2>
<div class="mixed-content ltr-container">
Welcome ????? to TutorialsPoint ???? ?????? - LTR Container
</div>
<div class="mixed-content rtl-container">
Welcome ????? to TutorialsPoint ???? ?????? - RTL Container
</div>
</body>
</html>
Notice how the same mixed content displays differently based on the container's direction −
Mixed Direction Text Welcome ????? to TutorialsPoint ???? ?????? - LTR Container (Text starts from left, Arabic text embedded naturally) Welcome ????? to TutorialsPoint ???? ?????? - RTL Container (Text starts from right, overall flow is right-to-left)
Direction Values Comparison
Following table compares the different direction values −
| Value | Description | Use Case |
|---|---|---|
ltr |
Left-to-right text flow | English, Spanish, French, German, most European languages |
rtl |
Right-to-left text flow | Arabic, Hebrew, Persian, Urdu |
initial |
Browser default direction | Reset to default when inheriting unwanted direction |
inherit |
Inherits from parent element | Maintain consistent direction within nested elements |
Practical Considerations
When implementing text direction, consider these important points −
Document Language − Use the
langattribute along with direction for proper language identificationUI Elements − Direction affects the positioning of scrollbars, form controls, and navigation elements
Number Display − Numbers in RTL text maintain left-to-right reading order even within RTL context
Mixed Content − Use the
dirattribute on specific elements when mixing LTR and RTL content
Example − Using the dir Attribute
<!DOCTYPE html> <html> <head> <title>Using dir Attribute</title> </head> <body style="font-family: Arial, sans-serif; padding: 10px;"> <h2>Using the dir Attribute</h2> <p dir="ltr">This paragraph uses the dir attribute for left-to-right direction.</p> <p dir="rtl">??? ???? ?????? ????? dir ??????? ?? ?????? ??? ??????</p> <p dir="auto">This paragraph uses dir="auto" - the browser determines direction automatically.</p> </body> </html>
The dir attribute provides an HTML-based alternative to CSS direction property −
Using the dir Attribute This paragraph uses the dir attribute for left-to-right
3K+ Views
