HTML dir Attribute: How to Set Text Direction

The dir attribute tells the browser which way text should go in HTML. You use it when a page or part of it needs left-to-right or right-to-left layout.

What Is the HTML dir Attribute?

The dir attribute controls text direction in HTML. It sets the writing flow. You use it to support languages that go from right to left like Arabic or Hebrew.

It also helps when you show mixed languages on the same page. Some go from left to right, others from right to left. So you must tell the browser how to handle that.

By default, HTML uses left-to-right direction. This suits English and other similar languages. But when the page includes right-to-left content, the layout may break. That is where dir helps.

Here is an example:

<tag dir="ltr|rtl|auto">Content here</tag>

• ltr: Text goes from left to right
• rtl: Text goes from right to left
• auto: The browser picks direction based on content

You can add dir to the whole page using the <html> tag. You can also use it on smaller parts like a paragraph, span, or div.

Here is another example:

<html dir="rtl">
<body>
  <p>This text goes from right to left.</p>
</body>
</html>

This makes the whole page flow right to left. You can also do this in smaller blocks:

<p dir="rtl">مرحبا بك في الصفحة</p>
<p dir="ltr">Welcome to the page</p>

Here, each paragraph flows in its own direction.

The dir attribute only controls direction. It does not fix font, spacing, or alignment and also does not support mixed directions in the same word.

It does not work well when the content direction changes inside the same line. Use it only when full blocks of content change direction.

The dir vs CSS Direction Property in HTML

If you use both dir and CSS direction, the CSS rule wins. The browser gives more weight to styles than HTML attributes.

HTML dir is easier for quick changes. CSS direction works better in big projects. Use dir when you need to switch text flow in one tag and CSS when you want full control.

Use dir for layout in small parts andCSS when you need many rules. Avoid mixing both without reason. It can confuse the layout and cause errors.

Examples of dir Attribute in HTML

Set Right-to-Left on Full Page:

<html dir="rtl">
  <body>
    <p>هذا نص باللغة العربية</p>
  </body>
</html>

This sets the entire page to flow from right to left. Arabic text lines up to the right side. It shows how to handle full-page direction change.

Mixed Paragraph Directions on One Page:

<p dir="rtl">هذا النص باللغة العربية</p>
<p dir="ltr">This text is in English</p>

This example shows two languages on one page. Arabic text flows right. English text flows left. Each paragraph keeps its own direction using dir.

Auto Direction for Dynamic Content:

<p dir="auto">مرحبا</p>
<p dir="auto">Hello</p>

This example lets the browser decide the direction. The browser checks the first strong letter. Then it picks the right flow. This helps when content comes from user input.

Wrapping Up

In this article, you learned what the dir attribute does and where to use it. You also saw how to use ltr, rtl, and auto with real examples.

Here is a quick recap:

• Use dir to control text direction in HTML
• Default is left-to-right unless you set it
• Use rtl for Arabic or Hebrew
• Use auto to let the browser decide
• CSS direction can override HTML dir

FAQs

<p dir="rtl">This text flows right to left</p>
<p dir="ltr">This text flows left to right</p>

<div dir="rtl">
  <p>مرحبا بك</p>
</div>

<div dir="rtl">This overrides any CSS unless !important is used</div>

<style>
  div { direction: ltr !important; }
</style>

Similar Reads