[Prisjakt – The Story is a series of blog posts about our experiences helping Prisjakt/PriceSpy to write a Windows 8 Metro Style App using HTML/CSS/JavaScript. Today’s post is a primer on how to localize your app and is authored by Peter Bryntesson]

Introduction

In Windows 8 and in particular with the advent of the Microsoft Store, you have immediate access to the entire world as your marketplace. Take advantage of this and localize your app from the beginning. It’s a straight forward process and if you localize from the beginning it’s even easier.

Prisjakt/PriceSpy currently exists in four countries: Sweden, Norway, United Kingdom and New Zeeland so we needed to include localization in the project. You can localize both string resources as well as other resources such as pictures etc. This was very useful since Prisjakt is called PriceSpy in UK and New Zeeland.

Localize strings

There is two ways to do this. First, you can do static localization by setting the data-win-res attribute on the element tag in the HTML file.

<span class="productratinglabel">(</span><span class="productratinglabel" data-win-bind="textContent : user_reviews_count">

</span>&nbsp;<span class="productratinglabel" data-win-res="{textContent : 'reviews'}"> </span><span class="productratinglabel">)</span>

In the example above the span element’s textContent property will be localized to the string defined for ‘reviews’ in the particular language the user is using. In the page’s ready function you need to add the following code to do the actual localization.

// localize all HTML resources

WinJS.Resources.processAll();

The other way is to do this in JavaScript code.

// localize this

var res = new Windows.ApplicationModel.Resources.ResourceLoader;

document.getElementById("aboutCaption").textContent = res.getString("About");

Here the aboutCaption element’s textContent property will be localized to the string defined for ‘About’.

The localized strings are defined in a file called resources.resjson and there is one file per language supported. This is how it looks in Visual Studio:

clip_image004

The content of the resources.resjson is a simply key-value file, like this:

clip_image006

[EDIT: Rewriting this section since it wasn’t technically correct, Thanks Rylan for the tip]

Localization works by combining the user’s defined languages and the languages the application support. The result is stored in the

Windows.Globalization.ApplicationLanguages.languages

array. The code in the resource manager for selecting the appropriate language is quite complex, so don’t write your own code around this, Put your resources in the Resources folder and let the resource manager decide what to use. A tip is that you  can wildcard resources, so if you want the same resources for all English dialects, use

Resources\en

Localizing other resources

Localizing other resources, such as bitmaps is even simpler. Here is what you have to do:

clip_image011

If you have those bitmaps in all your supported languages then you can refer to them as images\background_main.png and you are all set. Simple, huh?

Conclusion

Localizing your Windows 8 Metro Style App written in HTML/CSS/JavaScript is easy and straightforward. Make sure you do this from the beginning every time you start a new project.

Do you have any additional tips or tricks for localization? We would love to hear from you.