Thursday, November 1, 2012

Fixing RTL layout for the built in HTML5 store templates

Windows 8 HTML platform has great support for globalization generally and it has particularly very well crafted support for RTL languages. If you open the WinJS CSS, and JS files you will find code everywhere caring for the requirements of RTL languages. That is why it is very disappointing to see that all this effort undermined by the built-in VS templates. Once you create an app with one of these templates and switch to RTL, hell breaks loose and the well crafted layout is gone, items overlap, margins disappear, and the whole metro style is no more.

The following screenshot shows the extent of deformation in the built in Grid template once transformed into RTL layout

broken_layout_grid_template_rtl

Luckily all the issues are only in the template and can be fixed with some CSS modifications. I have compiled these modifications into a single CSS file that can be easily included in the project to fix the layout issues. The CSS changes is minimally invasive and shouldn’t interfere with your CSS. The CSS rules are all qualified with -ms-lang pseudo selector to ensure the rules only affect RTL layout. The WinJS CSS rules made it easy to extract the list of RTL languages which are (ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm)

You can download the file here. I have testes these updates only with the Grid template, I will work on Split and Navigation template soon. Please let me know about any issues in the fixes.

4 comments:

Anonymous said...

Hi Yasser - If you install the Visual Studio 2012 Update 1 CTP4, which was just released this week, you'll see that a new version of the Windows Store app templates for JavaScript are installed, with support for RTL.

Please take a look and let me know if you find issues in using these!

- Jordan Matthiesen, Microsoft Visual Studio program manager

Anonymous said...

Forgot to mention - you can get the Visual Studio 2012 Update 1 CTP4 from: http://www.microsoft.com/en-us/download/details.aspx?id=34818

Yasser Makram said...

Thank you Jordan for sharing the fix. I am installing it and will check the RTL support.

Anu Sri said...

Good post. I like your blog. Thanks for sharing.

php course in chennai