Why you should use "dir" attribute more for right to left localization

So, in the past week I have been working on the implemetation for right to left localization on one of Mozilla Webmaker tool call Popcorn Maker and I have struggled a lot and having real hard time working on making the tool right to left compatible because...

Popcorn Maker is a Video Editor. I've done a lot of research and got some user input and discussed on how right to left being done with video player or video editor and most of right to left users preferred that it's the same as left to right language. Therefore I have to keep some part of the site to be same as LTR and the rest RTL.

If you have read my previous blog post about right to left localization using CSS selector and some library such as CSSJanus to convert properties and values in CSS from one direction to the other so it can be use for Right to left languages. Now, that is not really going to work in this case because we can't automate everything since we want to have some part of the site to have the same style with LTR.

Also, when you use dir attribute on <html> tag and if the direction is rtl the browser will try to render most of the element that was from one side to the other and this is really useful but most of the time we will just use this life-saver attribute on <html> tag and that's it, but if you don't already know dir attribute can be used in other element as well and this is why I think we should use this more.

Now, let's why and how this can be life-saver for many of you who's working on right to left and wants to make sure you can save some time battling with CSS.

I have this snippet:

<!doctype html>  
<html dir="rtl">  
  <head>
      <meta charset="utf-8">
    <title>Your Awesome Webpage</title>
  </head>
  <body>
    <p dir="ltr">This text will be on the left</p>
    <p>This text will be on the right</p>
  </body>
</html>

So:

This text will be on the left

This text will be on the right


As you can see from example above that we have two <p> tag and one is being override by dir="ltr" and the other one is being control by <html dir="rtl">.

That is one of the usefulness of the attribute where we can have mixed direction in the same page and not having to worry about writing a lot of CSS to control the direction yourself when the browser have this functionality by default.

Another example:

<p dir="ltr">The bulk of the content is in English and flows left to right,  
until this phrase in Arabic makes an appearance,  
<span lang="ar" dir="rtl">مرحبا</span> (meaning hello), which  
needs to be set to read right-to-left.</p>  

The bulk of the content is in English and flows left to right, until this phrase in Arabic makes an appearance, مرحبا (meaning hello), which needs to be set to read right-to-left.

Also, note that the dir attribute cannot be applied to the following elements:

  • applet
  • base
  • basefont
  • bdo
  • br
  • frame
  • frameset
  • iframe
  • param
  • script

So, generally dir attribute is really useful and will save you a lot of times when working on localization especially when you have to deal with bidirectional.

You can read more from MDN about dir attribute here.