Right-to-left UI Guidelines?

Question

I'm looking into RTL support for a proprietary UI framework (for a desktop app), and I'm wondering: are there guidelines as to how the widget rendering has to change?

I'm looking for a list of things like:

• checkbox labels are on the left of the checkbox, and right-aligned
• toolbar buttons flow from right to left
• vertical sliders are on the left sice
• window decoration ???
• ...

Answer 1

Generally layout should be mirrored that is horizontally flipped. Apart from controls you already mentioned, obviously radio buttons, combo boxes (aka drop down menus), spins (or up and downs, depending on the terminology) should be mirrored. Window decoration, or window control boxes, that is minimize, maximize and close buttons should be on opposite side. The same regards to window's title.
The order of the buttons should be changed as well, so if you have [OK] [Cancel] [Help], in RTL languages, it will be [Help] [Cancel] [OK]. Icons in pop-up messages should be on the other side.

You might want to know how Microsoft implemented RTL support in their MFC framework: they simply changed coordinates, so that 0,0 points to upper right corner of the screen and x coordinate increases when you move to the left side. This has some side effect which is observable in splitter control - it works exactly the other way round that one would expect (dragging it to the left side enlarges left part of the window).

Going back to controls: Obviously left-aligned text boxes in LTR languages, should be right aligned in RTL languages and so on.

What is definitely less obvious, some bitmaps should be flipped as well. What particularly surprised me, question mark icon (the one usually shown with confirmation dialog or as a help button) should be flipped when Localizing to Arabic, Urdu or Persian, for Reversed Question Mark (⸮​) is what they use. I am not sure about Hebrew though.

Please keep in mind that some bitmaps need to be localized for cultural reasons (for example some of them might be inappropriate). Also, it is more or less required to use so called Eastern Arabic numerals while localizing into Arabic (and similar languages) but it is not a good idea to use them for Hebrew. As you can imagine, if you have some nice images for bullet points (containing numerals) and the application (or framework) needs to be translated into Arabic, these images need to be at least localizable (that is replaceable).