Article Categories

Selected Reading

How do we include the direction of text display in HTML?

HTML Javascript Programming

Use the dir attribute in HTML to specify the text direction. This attribute controls whether text flows left-to-right (LTR) or right-to-left (RTL).

Syntax

<element dir="value">content</element>

Attribute Values

Value	Description	Use Case
`ltr`	Left-to-right	English, French, German
`rtl`	Right-to-left	Arabic, Hebrew, Urdu
`auto`	Browser determines direction	Mixed language content

Example

Here's how to use the dir attribute for different text directions:

<!DOCTYPE html>
<html>
<head>
    <title>Text Direction Example</title>
</head>
<body>
    <p>This is default left-to-right text.</p>
    <p dir="rtl">This text flows from right-to-left.</p>
    <p dir="ltr">This explicitly sets left-to-right direction.</p>
    <p dir="auto">Browser will determine: ????? Hello</p>
</body>
</html>

Output

This is default left-to-right text.
                    .tfel-ot-thgir morf swolf txet sihT
This explicitly sets left-to-right direction.
Browser will determine: ????? Hello

Common Use Cases

The dir attribute is essential for:

Multilingual websites - Supporting RTL languages like Arabic or Hebrew
User-generated content - When users input text in different languages
International applications - Adapting layout for global audiences

Best Practices

Set the direction at the document level for consistency:

<!DOCTYPE html>
<html dir="rtl">
<head>
    <title>RTL Document</title>
</head>
<body>
    <p>All content flows right-to-left by default.</p>
    <p dir="ltr">This paragraph overrides to left-to-right.</p>
</body>
</html>

Conclusion

The dir attribute provides essential text direction control for multilingual websites. Use rtl for right-to-left languages and auto for mixed content where the browser should determine direction automatically.

Rishi Rathor

Updated on: 2026-03-15T23:18:59+05:30

236 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next