Question

I've been researching about adding Arabic localisation into our software. I understand that mirroring of some controls is essential, such as the relationship of labels and textboxes: any labels that are to the left of textboxes in left-to-right languages need to be to the right of the textboxes in Arabic and other right-to-left languages. But I can't find a definite answer on whether the entire layout of the graphical user interface should be mirrored.

For example in our software we have a panel with a map in it on the left of a window and secondary information in a panel on the right. Should the position of these panels be reversed for right-to-left languages?

The main reason I ask is that Microsoft Windows takes the path of mirroring everything when in Arabic, but I just noticed in the new support for Arabic in the iPhone OS 3.0, virtually nothing is mirrored, not even label-textbox examples. I would have thought this to be quite bad on Apple's part, but is this sort of thing widely accepted in the Arab world?

Was it helpful?

Solution

In Arabic, we read and scan graphic elements right-to-left

You will need to horizontal-flip the whole display, except for the images and text (the BiDi library - usually in the OS - handles that). You're only flipping the locations of the control.

A control bound by (x1,y1,x2,y2) in a w*h screen becomes (w-x2,y1,w-x1,y2), the contents of the rectangle are not to be flipped, just the position. It would keep its dimensions.

For example, compare Google news in English, and Arabic... notice the menu, the images, the news items.

Usually, one exception is acceptable, media players are still left-to-right for historical reasons (The tape recorders, VHS video devices were never localized).

OTHER TIPS

Its important. Imagine if you were using some software written by an Arabic speaker that was translated into English and some things were not correctly flipped.

In general, Windows (Vista and WIn7 in particular) and Office are very well translated for right to left reading languages. You can use this as an example of what to do - this is especially true for the top level UI elements

I would agree that purely graphical elements may not need to be flipped, but you should consider doing the right thing for anything that is generally scanned in reading order.

Mirroring is extremely important, not just because the text will be displayed properly, but because of the "mental model" of the user.

When a language is written right-to-left, the entire expectation of the user is shifted, but an even more interesting effect is the change of terminology. What we usually term positioning "left" and "right" actually end up being "beginning" and "end" (or "before" and "after") which makes mirroring the interface a little more elaborate.

On top of that, you will have elements that should not be mirrored. There are several examples in software that indiscriminantly mirrors all buttons and creates hilarious (horrible...) results. A few examples:

  • "Undo" and "Redo" buttons: Undo means 'go backwards'; in English (LTR) this means go-to-the-left, but in Arabic or Hebrew, it means go-to-the-right, so the button is flipped, and the same goes to the redo button. However, in RTL, the order of those two buttons is also flipped, which means you "double flipped" their representation, which essentially gives you a pair of buttons in RTL that look exactly the same as the pair in LTR, except with different meanings. This can be confusing to implement.
  • Icon mirroring #1 (lists): For the most part, icons are usually mirrored. For instance, an icon representing a bullet list will be bullets-on-the-left for LTR and bullets-on-the-right for RTL. Most software "simply" mirror it, which is fairly reasonable. However, there are a few pieces of software (OpenOffice is one, unfortunately) that also mirror the numbered list. This creates a situation where the numbers themselves are flipped (so the number 2 in that icon looks like a 5).
  • Icon mirroring #2 (question mark): Another example is a "help" button that is usually represented with a question mark. This is even more elaborate, because it is different for several RTL languages. Some RTL languages like Arabic display question mark reversed (؟) but others, like Hebrew, display it the same as English (?). This mirroring is dependent on language, not just on RTL/LTR.

Another challenge is having a mixed-content software. For example, if your software displays some set content but allows the user to change the interface language, you may run into interesting flip-no-flip issues.

If you have some software that lets you read RSS feeds, for example, the content may consistently be LTR, but if your user switches their interface to RTL, then some interface elements should mirror while others shouldn't. If we go by the icon examples above, for instance, then "bullet lists" shouldn't flip in this case, because while the interface is RTL, the actual content you insert is expected LTR, so the bullet will practically be left-to-right, and the bullet represents that.

The challenge in these cases is deciding which piece of your software is "content" and which is "interface" and while it is doable, it's a challenging endeavor.

To sum up - mirroring interfaces is not as straight forward as it sounds, and many times really depends on the purpose and context of your software. I would say it is extremely important, because RTL users' mental model (in terms of where things "start" and "end") is reverse, and just like LTR users' eyes are automatically drawn to the top-left (which is why logos are usually placed there) RTL users' eyes are usually automatically drawn to the top-right - and your interface should respect that. That said, you should analyze your interface and the way your content and interface are displayed in general, and beware of cases where flipping/mirroring is actually not suitable.

Hope this helps.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top