# Internationalization

Internationalization refers to designing a product in such a way that it can easily be localized (i.e. localization) into a target language. We currently use the svelte-i18n library to handle this functionality.

⚠️ Localization should be used only when dealing with user-facing text; if the user is not intended to see a message or error, then it does NOT need to be localized.

# Usage

It is quite easy to use svelte-i18n once it has been configured and initialized. We simply import the localize(...) function, which allows us to create any localization as long as there is an entry for it in a corresponding {language}.json file.

If the provided path for the locale data does NOT exist, the text will default to English. In the case that the English also does NOT exist, an undefined value will be returned.

# International Components for Unicode

As is the norm for internationalization functionality, we adhere to the widely used ICU (International Components for Unicode) message format for creating better adapted localizations. With it, we can...

• Create translations with no dynamic data

  // in en.json
  {
      "general": {
          "ateApple": "I ate an apple."
      }
  }
  
  // in code
  const text = localize('general.anApple') // "I ate an apple."

• Create translations with simple dynamic data

  // in en.json
  {
      "general": {
          "ateDinnerWith": "I ate dinner with {person}."
      }
  }
  
  // in code
  const text = localize('general.ateDinnerWith', { values: { person: 'Wallet Jesus' }}) // "I ate dinner with Wallet Jesus."

• Create translations with dynamic amounts

  // in en.json
  {
      "general": {
          "ateAppleCount": "I ate {numApples, plural, one {# apple} other {# apples}}."
      }
  }
  
  // in code
  const text = localize('general.ateAppleCount', { values: { numApples: 100 }}) // "I ate 100 apples."

• Create translations with multiple conditions

  // in en.json
  {
      "general": {
          "friendOnline": "Hello, your friend {friend} is online. {gender, select, male {He} female {She} other {They}} have a new NFT profile pic!"
      }
  }
  
  // in code
  const text = localize(
      'general.friendsOnline',
      { values:  { friend: 'The Destroyer', gender: 'other' }}
  ) // "Hello, your friend The Destroyer is online. They have a new NFT profile pic!"

⚠️ Punctuation may or may NOT be used in a locale entry; if relevant, see similar texts to determine if you should use punctuation (e.g. setting description text does NOT use punctuation).

ℹ️ Although these four usages cover our needs well, there are a few more available functionalities specifically surrounding numbers, dates, and times (see here).