Arabic script (and many others as well) is written from the right of the page to the left (RTL), top-to-bottom fashion. This means that other resources inserted in the text (e.g. images) as well as alignments and positioning should be treated the same way. Most of this work is done thanks to CSS direction property (see also W3C Internationalization), but there is still some work to be done elsewhere:
 

1. Set direction of the document Body to RTL

As said above, this is basically setting the CSS property of your document (web page) body with direction: rtl;

This can be achieved in several ways - a very lazy one is to just dump unescaped code in the top of your pages or frequently used webblocks (e.g. Menu/Header).


2. Convert Your Theme CSS to RTL

Because the CSS properties themselves need to be "mirrored" an external tool can help you out during design time. Check out https://cssjanus.commoner.com/ 


Once you have your Left-to-Right stylesheet converted to RTL, in order to support locales with different directions in your app, you're probably best with a dynamic stylesheet loading. This can be achieved with the creation of a web page whose purpose is only to download LTR or RTL stylesheets.


This download call be defined in your web page's Preparation action, with the help of some HTTPRequestHandler functions, in order to fetch the necessary stylesheet and add it to your document's head.


If your eSpace has a default Theme (which might be handy to improve your Web Editor experience) then you'll also need to remove that default stylesheet, with the help of HTTPRequestHandler function AddPostProcessingFilter.

3. Convert Javascript and Extended properties to RTL

Because we may also have application text coexisting with Javascript code and specific inline styles we should also review any such scripts to RTL (with the help of a tool such as the above). It's definitely a good approach to avoid or reduce as best as possible the amount of inline style scripts in your app. Also, for the same reason, you should try to separate Javascript logic from text literals in your client-side logic.

4. Translate text to a RTL script

There are also some pitfalls that need to be carefully avoided with translations: according to W3C, text itself has also specific characters with weak/neutral direction (e.g. numbers, exclamation marks, etc.) So be sure you get proper and skilled help for the translations (...which was not the case with the sample app in my post :)

5. Verify need of flipping images

Because there is a "mirroring" of the document, images that are closely related to the layout may need to be mirrored as well: sprites, for example (although that's not the case in the sample app). This basically means duplication of resources. At the time of writing this post, I'm not aware of any runtime feature that allows for this...
 

6. Check Service Studio Container and Table widgets alignment properties

It seems that Service Studio widget properties override CSS. Make sure you keep these values clean and available in your CSS classes.