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
Create a paragraph with a right-to-left direction in HTML5
The dir attribute in HTML sets the text direction for an element's content. To create a paragraph with right-to-left direction, use dir="rtl" on the paragraph element. This is particularly useful for languages like Arabic, Hebrew, Persian, and Urdu that are naturally written from right to left.
Syntax
Following is the syntax for creating a right-to-left paragraph using the dir attribute −
<p dir="rtl">Your text content here</p>
The dir attribute accepts three values −
-
rtl− Sets text direction from right to left -
ltr− Sets text direction from left to right (default) -
auto− Lets the browser determine direction based on content
Basic Right-to-Left Paragraph
Example
Following example demonstrates how to create a paragraph with right-to-left text direction −
<!DOCTYPE html>
<html>
<head>
<title>Right-to-Left Paragraph</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Normal Left-to-Right Paragraph</h2>
<p>This is a normal paragraph with left-to-right text direction.
Notice how the text flows from left to right and punctuation appears at the end.</p>
<h2>Right-to-Left Paragraph</h2>
<p dir="rtl">This is a paragraph with right-to-left direction.
Notice how the text alignment and flow changes completely.
The punctuation also moves to the left side.</p>
</body>
</html>
The output shows the difference between normal and right-to-left text direction −
Normal Left-to-Right Paragraph
This is a normal paragraph with left-to-right text direction. Notice how the text flows from left to right and punctuation appears at the end.
Right-to-Left Paragraph
.This is a paragraph with right-to-left direction
.Notice how the text alignment and flow changes completely
.The punctuation also moves to the left side
Using RTL with Different Languages
Example − Arabic Text
Following example shows how the dir="rtl" attribute works with actual Arabic text −
<!DOCTYPE html> <html> <head> <title>Arabic Text Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>English Text (LTR)</h2> <p>Welcome to TutorialsPoint. Learn HTML, CSS, and JavaScript.</p> <h2>Arabic Text (RTL)</h2> <p dir="rtl" style="font-size: 18px;">????? ??? ?? ???? ???? ????. ???? HTML ? CSS ? JavaScript.</p> <h2>Mixed Content</h2> <p dir="rtl">Learn programming: HTML, CSS, JavaScript - ???? ???????</p> </body> </html>
The Arabic text displays correctly from right to left, while mixed content handles both directions appropriately.
RTL Direction on Container Elements
The dir attribute can also be applied to container elements like <div> to affect all child elements within that container.
Example
<!DOCTYPE html>
<html>
<head>
<title>RTL Container</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<div dir="rtl" style="border: 2px solid #ccc; padding: 15px; margin: 10px;">
<h3>Right-to-Left Section</h3>
<p>This entire section has right-to-left direction.</p>
<p>All paragraphs inside inherit the RTL direction.</p>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
</div>
<div style="border: 2px solid #ccc; padding: 15px; margin: 10px;">
<h3>Normal Left-to-Right Section</h3>
<p>This section uses the default left-to-right direction.</p>
</div>
</body>
</html>
When applied to a container, all child elements inherit the right-to-left direction, including headings, paragraphs, and list items.
Auto Direction Detection
The dir="auto" value allows the browser to automatically determine text direction based on the first strongly directional character in the content.
Example
<!DOCTYPE html> <html> <head> <title>Auto Direction Detection</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Auto Direction Examples</h2> <p dir="auto">This paragraph starts with English, so it flows left-to-right.</p> <p dir="auto">??????? - This starts with Arabic, so it flows right-to-left.</p> <p dir="auto">123 numbers don't affect direction - English text wins.</p> </body> </html>
The browser automatically detects the appropriate direction based on the content's language.
Browser Compatibility
The dir attribute is supported by all modern browsers and has been part of HTML since early versions. The auto value was introduced in HTML5 and is supported in all current browsers.
| Value | Description | Use Case |
|---|---|---|
ltr |
Left-to-right text direction | English, French, Spanish, German texts |
rtl |
Right-to-left text direction | Arabic, Hebrew, Persian, Urdu texts |
auto |
Browser determines direction automatically | Mixed content or dynamic content |
Conclusion
The dir attribute with the value rtl creates paragraphs that display text from right to left, essential for proper rendering of Arabic, Hebrew, and other RTL languages. Use dir="auto" for mixed-language content where the browser should automatically detect the appropriate direction.
390 Views
