Internationalization and Localization

There are many ways to make your website more appealing to the users, internationalization (i18n) and localization (L10n) is one of the methods. I18n is the process of enabling your website to display in different languages and different formats like date format and number format. L10n is the process of translating from one language to another with its national formats like date format and number format.

A CultureInfo identifies a region (such as a country) in which people speak a particular language or language variant. The CultureInfo determines the formatting and parsing of dates, times, numbers and currencies as well as measurement units and the translated names for time zones, language and countries.

In Blazor Server, there are 2 types of i18n:

• Passive translation.
• Reactive translation.

For each type, we have 3 methodologies for detecting users' preferred languages.

• Language in URL.
• Language in Accept-Language of the request header.
• Language in cookies.

This guide provides information to help you decide which type of i18n works best for your situation and walks you through how to L10n your website.

Choosing an approach

Passive and reactive i18n manage the translation process differently. Each approach offers different advantages.

• Passive translation delegates the process of switching language to a controller, providing you more access but also requires the user to reload the page to see the selected language.
• Reactive translation delegates the process of switching language to a service, it fast and does not require the user to reload the page.

Localization

Before diving in on how to i18n your website, you first need to know how to L10n first. In other words, you first need to understand how Blazor Server is looking for a translation of a text.

For each available language on your website, there will be a language file. The language files have .resx as the file extension, those files are called Resources File. The folder structure must be the same as the component/page folder. The following image will give you an idea about resources folder structure.

Setting up localization

1. Create a new folder to contain all the resource files. In the above example, it is the Resources folder.
2. The resource file must have the same folder structure as the component you are going to translate. In this example, you are going to translate the I18N.razor and NavMenu.razor so you will need to create a Pages folder inside the Resources folder for the I18N.razor component and a Shared folder inside the Resources folder for the NavMenu.razor component.

3. Create a default language file with the name exactly the same as your component. For example, if you are going to translate I18N.razor component you will name your default language file as I18N.resx. Right click on the Pages folder inside the Resources folder, select Add => New Item.... Look for the Resources File as the following picture.

4. For each language you want to translate, add the respective file for the language with the file name pattern: <ComponentName>.<LanguageCode>.resx. You can check http://www.lingoes.net/en/translator/langcode.htm for language codes. In this example, the component will have 2 languages: English and French, so you will need to create a I18N.fr.resx file.
5. The language file will be stored as a key value pair. The next step you need to do is declare the language key and its value for each specific language. For example, in the default language file I18N.resx you have a key with the name "Name" and it's value is "First name" so later on, when you use the key "Name" it will be translated to "First name" when the user selects English. You also want to use "No code generation" as the Access Modifier for all language files.

Localizing a component

Blazor Server support IStringLocalizer for localize your website.

1. Inject IStringLocalizer with the current component as a generic parameter. You are currently in I18N.razor so the generic would be I18N.

@using Microsoft.Extensions.Localization
@inject IStringLocalizer<I18N> Localizer

2. Use Localizer with the key you have created in the resource file. For example, @Localizer["Name"]. The following picture will elaborate on how to use the Localizer.