Overview

Internationalization (or i18n) basically describes the process of preparing your app for localization (or l10n). It is all about adjusting your code and design in a way to make all the text easily exchangeable.

The following information is based on Microsoft Visual Studio 2015 and developing a blank universal application.

If you are using Visual Studio 2015 it is easy to internationalize your app by using the x:Uid directive and .resw Resource Files.

By adding the x:Uid directive and a unique identifier to your hard coded string your application will check the resource file matching the user’s language and return the string attached to the identifier.

Here is an example of how to use x:Uid:


Original

<Viewbox>
  <TextBlock Text="Hello World!"/>
</Viewbox>

Internationalized

<Viewbox>
  <TextBlock x:Uid="helloWorld" Text="Hello World!"/>
</Viewbox>

Tutorial

This quick tutorial shows you how to set up your project for localization.


Step 1: Create a new folder in your main application called Strings.
Right click on your application – Add – New Folder

Visual Studio i18n step 1

Step 2: Inside your newly created Strings folder, create a folder for your source language. Name this folder after the languages ISO code with a region designator, e.g. en-US for English (USA), or de-DE for German (Germany).

Visual Studio i18n step 2

Step 3: Create a resource file in your source language folder.
Right click on Locale Folder – Add – New Item …


Step 4: Pick Resource File (.resw) and click Add.

Visual Studio i18n step  4

Step 5: Locate text in your code.

<Viewbox>
   <TextBlock Text="Hello World!"/>
</Viewbox>

Step 6: Add the x:Uid directive with an identifier.

<Viewbox>
   <TextBlock x:Uid="helloWorld" Text="Hello World!"/>
</Viewbox>

Step 7: Open your resource file and add all your strings.

Visual Studio i18n step 7

In the Name column write down the identifier in the following format: <identifier>.Text
The Value column contains the text you want to be shown in the application.
Comments can be ignored, but are useful for further localization to provide additional context to translators.


Tips and Tricks

Internationalize Display Name and Description

If you decide to internationalize your application you should not forget about your display name and description. This can be done in 2 easy steps:


Step 1: Open your Resources.resw file and add 2 more values to internationalize your display name and description.

Visual Studio i18n internationalize display name step 1

Step 2: Open the Package.appxmanifest file and exchange the display name and description with ms-resource: <identifier>

Visual Studio i18n internationalize display name

Provide Context in Comments

Start localizing once your text is a resource file. Your translators are not used to handling such resource files. Provide them with context information about each text segment to avoid any mistakes in your translations. You can add information as comments directly in your Resource File.

You can add additional information about the purpose of the string or about some special limitation in screen size or more in your comments.


Another way to add these comments is by opening your .resw file in your favorite text editor and directly adding the comments.

Simply open your Resources.resw file and add comments in the Comment column.

<data name="helloWorld.Text" xml:space="preserve">
  <value>Hello World</value>
  <comment>A welcome message</comment>
</data>

Hint
All comments added in your source file are automatically included by LingoHub upon import. Of course you can add further comments for your translators on LingoHub as well.
LingoChecks are another helpful feature. All quality checks in your resource file are imported too and LingoHub automatically checks for placeholder, the number of line breaks and much more.
Find more information about LingoChecks and how to use them in our documentation.

<data name="signUp.Text" xml:space="preserve">
  <value>Sign Up</value>
  <comment>lh-check: {max: 10}</comment>
</data>
Visual Studio i18n adding comments

Key Structure

Make sure to name your keys in a way your team always remembers what it stands for. Complicated names are thus not recommendable.

Preferably name your keys after their purpose. This can provide your translators with additional context information on what the string stands for.

<TextBlock x:Uid="loginSuccess" Text="Login successful! You will be redirected immediately."/>
<TextBlock x:Uid="loginFail" Text="Login failed. Please try again."/>

Don’t forget your Numbers

Internationalization and localization are related closely. Once internationalization is done you can start localizing. Consider these localization tips to make sure you are well prepared for going global.

Make sure to do punctuation within numbers right as it differs from country to country. 1,000 might mean one thousand in your source country, but your target audience is used to a different format (1.000). Consequently, 1,000 might get misinterpreted as one with 3 zeroes as decimals.

Read more about localization tips and tricks in our Android i18n with Android Studio and iOS i18n with Xcode7 tutorials or gather stunning country insights on our blog.


Localize Colors

When talking about localization color play a major role too. Consider the languages you want to translate your website to when creating the design as colors have different meanings from country to country. Make sure you know the meaning of a color for your local readers and adapt it if necessary.

While Germans link yellow to jealousy, Japanese people link i to dignity and Brazilians to joy. In northern Europe green is associated with hope, while Malaysians associate the color with fear.


Quick Summary

  • Use references to resources instead of hard coded content.
  • Provide additional information in comments.
  • Localize additional resources like images and numbers.
  • Think of other more verbose languages during the design process.

Try LingoHub 14 Days for free

Start your language project and get access to unlimited features.