Test Language Direction

If you want to make your web site or your next framework work internationally, with different languages and in different regions, then you need to understand that some languages write text in different directions. In English we write text from the left to right, but in some other languages, they write in the other direction, from right to left.

The browser will automatically set the direction of the text on a page, if none is set directly, to whichever the computer is setup with, in whatever region they are in. For example, browsing a page on a computer used in Iraq, will show the text from right to left.

In HTML and CSS there are ways to change the direction of the text. The first is done within HTML, using the global attribute dir, set to rtl or ltr. The other is way is using CSS using the direction property, set to either rtl or ltr. Look at the example below.

The direction doesn't just effect text, it also changes the direction of grid and flex elements. The first flex box will be on the right, instead of the left, if the direction is right to left. There are lots of CSS properties made to handle these issues.

However, after developing anything to handle direction, I was running into a problem, how do you test it? How do we know if it looks correct on computer's in Iraq?

There are some options available to us, but they have issues of their own.

• In the settings of your computer, change region and language, so you see what it is like for one of your international users. This is a very bad idea. Once your computer is in another language, finding your way back again may not be possible, you will be lost in what looks like another world.
• Create new user login accounts and then set them to work in the required region and language. You will still be using it in another language but you can now log out and into you main account at any time, without getting lost, hopefully.
• Use a chrome extension that sets the direction. This will allow you to test the language direction without any need to change your computer's region or language information.

There were existing extensions that did this, but I wanted one that did more. So the only option I had was to create my own extension. This not only allows you to change the direction of a page, but you can also change the writing mode to be vertical too.

The way it changes the direction is by setting the body element's CSS direction property. This effects all the child elements to use the same direction, except any elements that have their direction set or if the dir attribute is used.

Give it ago. You can get it from the Google chrome web store.

Language Direction