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.
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