The beauty of Dir attribute you never knew.

Image for post
Image for post

Most of the time we write in computer and we never think of directionality. We write from left to right by default. But in some language, text directionality is crucial part such as “Arabic” where we need to write from right to left. In that scenario we need to use an HTML global attribute which is Called “dir” attribute.

What are the values?

It has three values:

  1. dir=”ltr” (left to right).

It is used for languages where text are written from left to right

2)dir=”rtl”(right to left”) .

It is used for languages where text are written from right to left

3)dir= “auto”.

There is an algorithm which decides directionality. First It finds a character with strong directionality and applies the directionality to the whole element

Example:

<p dir="ltr">This is a sample text</p>
<p dir="rtl">This is a sample text</p>
<p dir="auto">This is a sample text</p>
Image for post
Image for post

Try this code right now.

In third example ,algorithm takes first character of the p tag and detects that it is an english letter and its direction is left to right. Then it applies the rule to the whole “p” element. This is the power of dir=“auto”.

Lets take Arabic language for example. First we write “Arabic” without defining dir attribute and then with dir attribute. Then we see how the interface looks.

<p>العاشر ليونيكود (Unicode Conference)، الذي سيعقد في 10-12 آذار 1997 بمدينة مَايِنْتْس،ألمانيا. و سيجمع المؤتمر بين خبراء من كافة قطاعات الصناعة على الشبكة العالمية انترنيت</p><p dir="auto">العاشر ليونيكود (Unicode Conference)، الذي سيعقد في 10-12 آذار 1997 بمدينة مَايِنْتْس،ألمانيا. و سيجمع المؤتمر بين خبراء من كافة قطاعات الصناعة على الشبكة العالمية انترنيت</p>
Image for post
Image for post
Code Output(Arabic) Without and with dir attribute

We clearly see that, when we don’t apply dir attribute , it is left to right by default. But when we apply dir=”auto”, it detects this “arabic language and set its directionality to right to left.

HTMLElement.dir

By applying dir attribute to any element you can change directionality of the text of that element . But if you need to change directionality of the element itself not its content then you should use this method.

According to Mozilla Network,

When a table has its dir=”rtl”, the column order is arranged from right to left.Here are two tables . One is set to dir=“ltr” and other is set to dir =”rtl”

<table border="1" dir="ltr"><tr><td>column1</td>
<td>column2</td>
<td>column3</td>
</tr><tr><td>column4</td>
<td>column5</td>
<td>column6</td>
</tr></table>
<br><br><br>
<table border="1" dir="rtl"><tr><td>column1</td>
<td>column2</td>
<td>column3</td>
</tr><tr><td>column4</td>
<td>column5</td>
<td>column6</td>
</tr></table>

Now see the output:

Image for post
Image for post

I hope you now know almost everything about directionality of text and element.

Diretionality of an element:

<p id="para1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod, eligendi ad dolore incidunt, adipisci voluptate.</p><script>var parg = document.getElementById('para1');
parg.dir = 'rtl';
</script>

This code sets a paragraph direction from right to left with respect to the window/Page. Here is the output:

Image for post
Image for post

The ultimate Solution:

If you are reading still now, Congratulations. You have the reward . We can also text directionality by a CSS property which is “Diretion”. It has also three value such as :

direction: ltr/rtl/auto;

You can use this in various elements suchas;

p{
direction: rtl;
}

You can use this property to any element and that element will set to that direction with respect to the winow.

Remember that “This property will only set direction of the element,not its content”.

Thank you very much for your Patience. Keep reading my articles and follow me to read future articles.

Written by

Front-End Developer & Tech Writer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store