How-To Build Arabic (Right to Left) Apps on Windows 8 RTM

If you are developing an Arabic application for Windows 8, you can do it LTR, with Arabic content while keeping the LTR UI, or you can flip the entire UI of your app to have a full RTL experience.

I wanted to share a tip on how you can create the RTL experience!

Default LTR Application:

RTL Application

Now, in Windows RP it was easy to do this – using the manifest file to change language settings from “x-generate” to “ar-SA” and that was it. In Windows 8 RTM, it’s a bit different. You will have to do one extra step and modify the template.

 

Step 1: Open the Application Manifest, in the first tab: Find the Language field and to set it to Arabic. Type “ar-SA” instead of the default “en-US”

Step 2: Right click the Application Manifest and click “View Code”. Find the line where it says “x-generate” and replace it with “ar-SA”. Save and close.

Run the application. Click on the title “Group 1”, and you will get a mess that looks like the image below. Notice the Group Subtitle and its image fall in the wrong place. You won’t be able to fix it with CSS. Trust me, I tried. Follow the next step to fix this.

Step 3: I am running a JS application, so the final step is to browse in the JS folder, and open the Navigator.js file. Find the line where it says …

and add this line at the beginning of the function:

element.setAttribute("dir", window.getComputedStyle(this._element, null).direction);

Final result should look like this:

 

Run the application… Click on the title “Group 1”, and you should get something like this…

After CSS edits:

Now you can play with the CSS code to make it the appropriate design changes. Happy coding!

You can check out the app above, Senses (سنسز), in the Windows Store!