The Challenge

I'm building a web application for a client that runs a translation and interpretation company. One of the important functional requirements for this application is that it must be internationalized so that users can view the page in their preferred language.

Technologies

I'm using next.js to build the application along with an internationalization library called next-international. This article wont be a guide on how to use these technologies, I think their docs do a great job with guiding you through setting up internationalization. Rather, this will be overview of what the task of localizing a web page entails and a way for me to document my learning.

Key Words

The first thing I ran into when starting my internationalization project were some terms that I had never heard before: locale, default locale, localization, and i18n. What do these terms mean?

locale

A locale is a set of parameters that defines the user's language, country, and any special variant preferences. This information is used by software to format dates, times, numbers, currency, and other data in a way that is culturally appropriate for the user. For example, the locale for United States English is typically denoted as enUS, while French as used in France is frFR.

default locale

The default locale is the locale that a website or application will fall back to if a user's specific locale settings are not available. It acts as a standard setting for the language and > regional format. For instance, if your website's default locale is set to en_US, users who do not have a specific locale setting will see content in US English.

localization

Localization is the process of adapting a product, content, or application to meet the language, cultural, and other specific needs of a target market or locale. This goes beyond mere translation to include adjustments that make the content relevant and appropriate for the specific audience.

i18n

This stands for "internationalization," and it refers to the process of designing and preparing your software or website to handle multiple languages and cultural differences. The term is > a numeronym where the "18" represents the number of letters between the first 'i' and the last 'n' in the word "internationalization." This process includes translating text, adapting date and time formats, handling different currencies, and other localization tasks.

Translations

The next question I had to answer was how I was going to get translations for my content. Could I use Google Translate or Chat GPT to generate my translations?

It's possible, but you have to be careful and consider what it means to localize content. Referencing our definition for localization we can see that localizing content is not just about converting text from one language into another, it about making sure the content is culturally relevant meets any specific needs of the market or locale that is being targeted.

Another thing to look out for is the translation of names.

For example - if you enter "Rio de Janeiro State University" into google translate and try to get an english -> portuguese translation you will get a comprehensible output, but its not quite right. The google translate suggestion is "Universidade Estadual do Rio de Janeiro". The way the university itself presents its name is "Universidade do Estado do Rio de Janeiro"

Idiomatic Expressions and Colloquialisms

Idioms, slang, and colloquial expressions often do not translate well directly and can result in awkward or nonsensical translations.

They can translate the text literally, but the meaning is lost. For example:

There is a portuguese idiom "Corte o rabo do macaco" which, when translated literally into english, reads "Cut off the monkey's tail". This doesn't make sense to english speakers because we don't have this idiom in english and therefore we need to find and english phrase that represents the meaning other rather than make a literal translation.

The html tag and the lang attribute

I had to dig deeper into the docs to learn why the html tag and its lang attribute is important.

Localizing forms

Things to look out for:

• placeholder text
• labels
• toasts and other user feedback mechanisms
• validation errors
• file input element has english default text

Localizing meta tags

• How can we be sure that links shared from a locale will have the correct meta tag content

Route localization

• should urls be translated into the clients language?

Key Words

i18n locale localization default locale