Internationalization

Basic Concept

Internationalization (i18n)

The practice of building a product which supports localization, globalization, and translation.

Localization (l10n)

Adapting your product to a particular locale (country/language)

Globalization

The process of becoming global product, which works everywhere and for everyone

Translation

An important part of localization, but only the tip of the iceberg

Supported Languages

The following languages are currently supported by Adjust:

• English
• Chinese (simplified)
• French
• Japanese
• Korean
• Portuguese
• Russian
• Spanish
• Turkish
• Vietnamese

Design Considerations

• When designing an interface, consider that English text can become much longer, or shorter when translated to other languages.
• Avoid making components that contain text a fixed-width. This prevents them from growing or shrinking to support translations of different lengths.
• Wrapping text in components is preferred to truncating the text. You may be cutting off important information in another language.
• Don't put text inside of a graphic, it can't be translated.

Localization of Dates

According to the context and availability of space, the format of dates is modified to fit the scenario the best way possible.

note

Dates are localized via the standardized Javascript construtor Intl.DateTimeFormat (we do have custom formats for some languages, which are italic in the table below).

BCP47	Language	Date	Date Compact	Datetime	Datetime Compact
en-US	English (US)	Dec 20, 2021	Dec 20	Dec 20, 2021 04:23	Dec 20 04:23
ja-JP	Japanese	2021/12/20	12/20	2021/12/20 4:23	12/20 4:23
zh-CN	Chinese (simplified)	2021/12/20	12/20	2021/12/20 04:23	12/20 04:23
ko-KR	Korean	2021/12/20	12/20	2021/12/20 오전 4:23	12/20 오전 4:23
vi-VN	Vietnamese	20/12/2021	20/12	04:23, 20/12/2021	04:23, 20/12
ru-RU	Russian	20.12.2021	20.12	20.12.2021, 04:23	20.12, 04:23
pt-BR	Portuguese (Brazil)	20/12/2021	20/12	20/12/2021, 4:23	20/12, 4:23
es-419	Spanish (Latin Americas)	20/12/2021	20/12	20/12/21 4:23	20/12, 4:23
tr-TR	Turkish	20.12.2021	20.12	20.12.2021, 04:23	20.12, 04:23
fr-FR	French (France)	20/12/2021	20/12	20/12/2021 04:23	20/12 04:23

Example

You can use useDateLocalization hook to format dates as below by passing date, locale and formatType:

Live Editor

function Internationalization() { const date = new Date('2021-12-20T04:23'); const formattedDate = useDateLocalization(date, 'en', 'date') return ( <span>{formattedDate}</span> ); }

function Internationalization() {
  const date = new Date('2021-12-20T04:23');
  const formattedDate = useDateLocalization(date, 'en', 'date')

  return (
  <span>{formattedDate}</span>
  );
}

Result

Loading...

Live Editor

function InternationalizationTable() { const date = new Date('2021-12-20T04:23'); return ( <> <table> <thead> <tr> <th>locale</th> <th>date</th> <th>compactDate</th> <th>dateTime</th> <th>compactDateTime</th> </tr> </thead> <tbody> <tr> <td>en</td> <td>{useDateLocalization(date, 'en', 'date')}</td> <td>{useDateLocalization(date, 'en', 'dateCompact')}</td> <td>{useDateLocalization(date, 'en', 'dateTime')}</td> <td>{useDateLocalization(date, 'en', 'dateTimeCompact')}</td> </tr> <tr> <td>ja</td> <td>{useDateLocalization(date, 'ja', 'date')}</td> <td>{useDateLocalization(date, 'ja', 'dateCompact')}</td> <td>{useDateLocalization(date, 'ja', 'dateTime')}</td> <td>{useDateLocalization(date, 'ja', 'dateTimeCompact')}</td> </tr> <tr> <td>zh</td> <td>{useDateLocalization(date, 'zh', 'date')}</td> <td>{useDateLocalization(date, 'zh', 'dateCompact')}</td> <td>{useDateLocalization(date, 'zh', 'dateTime')}</td> <td>{useDateLocalization(date, 'zh', 'dateTimeCompact')}</td> </tr> <tr> <td>ko</td> <td>{useDateLocalization(date, 'ko', 'date')}</td> <td>{useDateLocalization(date, 'ko', 'dateCompact')}</td> <td>{useDateLocalization(date, 'ko', 'dateTime')}</td> <td>{useDateLocalization(date, 'ko', 'dateTimeCompact')}</td> </tr> <tr> <td>vi</td> <td>{useDateLocalization(date, 'vi', 'date')}</td> <td>{useDateLocalization(date, 'vi', 'dateCompact')}</td> <td>{useDateLocalization(date, 'vi', 'dateTime')}</td> <td>{useDateLocalization(date, 'vi', 'dateTimeCompact')}</td> </tr> <tr> <td>ru</td> <td>{useDateLocalization(date, 'ru', 'date')}</td> <td>{useDateLocalization(date, 'ru', 'dateCompact')}</td> <td>{useDateLocalization(date, 'ru', 'dateTime')}</td> <td>{useDateLocalization(date, 'ru', 'dateTimeCompact')}</td> </tr> <tr> <td>pt</td> <td>{useDateLocalization(date, 'pt', 'date')}</td> <td>{useDateLocalization(date, 'pt', 'dateCompact')}</td> <td>{useDateLocalization(date, 'pt', 'dateTime')}</td> <td>{useDateLocalization(date, 'pt', 'dateTimeCompact')}</td> </tr> <tr> <td>es</td> <td>{useDateLocalization(date, 'es', 'date')}</td> <td>{useDateLocalization(date, 'es', 'dateCompact')}</td> <td>{useDateLocalization(date, 'es', 'dateTime')}</td> <td>{useDateLocalization(date, 'es', 'dateTimeCompact')}</td> </tr> <tr> <td>tr</td> <td>{useDateLocalization(date, 'tr', 'date')}</td> <td>{useDateLocalization(date, 'tr', 'dateCompact')}</td> <td>{useDateLocalization(date, 'tr', 'dateTime')}</td> <td>{useDateLocalization(date, 'tr', 'dateTimeCompact')}</td> </tr> <tr> <td>fr</td> <td>{useDateLocalization(date, 'fr', 'date')}</td> <td>{useDateLocalization(date, 'fr', 'dateCompact')}</td> <td>{useDateLocalization(date, 'fr', 'dateTime')}</td> <td>{useDateLocalization(date, 'fr', 'dateTimeCompact')}</td> </tr> </tbody> </table> </> ); }

function InternationalizationTable() {
  const date = new Date('2021-12-20T04:23');

  return (
  <>
  <table>
    <thead>
        <tr>
          <th>locale</th>
          <th>date</th>
          <th>compactDate</th>
          <th>dateTime</th>
          <th>compactDateTime</th>
        </tr>
    </thead>
    <tbody>
        <tr>
          <td>en</td>
          <td>{useDateLocalization(date, 'en', 'date')}</td>
          <td>{useDateLocalization(date, 'en', 'dateCompact')}</td>
          <td>{useDateLocalization(date, 'en', 'dateTime')}</td>
          <td>{useDateLocalization(date, 'en', 'dateTimeCompact')}</td>
        </tr>
      <tr>
        <td>ja</td>
        <td>{useDateLocalization(date, 'ja', 'date')}</td>
        <td>{useDateLocalization(date, 'ja', 'dateCompact')}</td>
        <td>{useDateLocalization(date, 'ja', 'dateTime')}</td>
        <td>{useDateLocalization(date, 'ja', 'dateTimeCompact')}</td>
      </tr>
      <tr>
        <td>zh</td>
        <td>{useDateLocalization(date, 'zh', 'date')}</td>
        <td>{useDateLocalization(date, 'zh', 'dateCompact')}</td>
        <td>{useDateLocalization(date, 'zh', 'dateTime')}</td>
        <td>{useDateLocalization(date, 'zh', 'dateTimeCompact')}</td>
      </tr>
      <tr>
        <td>ko</td>
        <td>{useDateLocalization(date, 'ko', 'date')}</td>
        <td>{useDateLocalization(date, 'ko', 'dateCompact')}</td>
        <td>{useDateLocalization(date, 'ko', 'dateTime')}</td>
        <td>{useDateLocalization(date, 'ko', 'dateTimeCompact')}</td>
      </tr>
      <tr>
        <td>vi</td>
        <td>{useDateLocalization(date, 'vi', 'date')}</td>
        <td>{useDateLocalization(date, 'vi', 'dateCompact')}</td>
        <td>{useDateLocalization(date, 'vi', 'dateTime')}</td>
        <td>{useDateLocalization(date, 'vi', 'dateTimeCompact')}</td>
      </tr>
      <tr>
        <td>ru</td>
        <td>{useDateLocalization(date, 'ru', 'date')}</td>
        <td>{useDateLocalization(date, 'ru', 'dateCompact')}</td>
        <td>{useDateLocalization(date, 'ru', 'dateTime')}</td>
        <td>{useDateLocalization(date, 'ru', 'dateTimeCompact')}</td>
      </tr>
      <tr>
        <td>pt</td>
        <td>{useDateLocalization(date, 'pt', 'date')}</td>
        <td>{useDateLocalization(date, 'pt', 'dateCompact')}</td>
        <td>{useDateLocalization(date, 'pt', 'dateTime')}</td>
        <td>{useDateLocalization(date, 'pt', 'dateTimeCompact')}</td>
      </tr>
      <tr>
        <td>es</td>
        <td>{useDateLocalization(date, 'es', 'date')}</td>
        <td>{useDateLocalization(date, 'es', 'dateCompact')}</td>
        <td>{useDateLocalization(date, 'es', 'dateTime')}</td>
        <td>{useDateLocalization(date, 'es', 'dateTimeCompact')}</td>
      </tr>
      <tr>
        <td>tr</td>
        <td>{useDateLocalization(date, 'tr', 'date')}</td>
        <td>{useDateLocalization(date, 'tr', 'dateCompact')}</td>
        <td>{useDateLocalization(date, 'tr', 'dateTime')}</td>
        <td>{useDateLocalization(date, 'tr', 'dateTimeCompact')}</td>
      </tr>
      <tr>
        <td>fr</td>
        <td>{useDateLocalization(date, 'fr', 'date')}</td>
        <td>{useDateLocalization(date, 'fr', 'dateCompact')}</td>
        <td>{useDateLocalization(date, 'fr', 'dateTime')}</td>
        <td>{useDateLocalization(date, 'fr', 'dateTimeCompact')}</td>
      </tr>
    </tbody>
 </table>
    </>
  );
}

Result

Loading...

Date

It's the most used format and can be applied as the basic standard.

• Korean uses the same format as in the Japanese language for this type of date.
• English shows the month abbreviation to help users from outside of USA or other English speaking countries to get a better understanding of the structure of the format.
• We do not differentiate between English locales, such as Australia, Canada, Ireland, or Great Britain.

Compact Date

For even more reduced spaces such as when using a date dimension on a chart, there is a possibility of using the compact version which includes only a date and month.

This format also may be part of scenarios as the ranges, in which there are two different applications:

• Range within the same year: e.g. Dec 20 - Dec 25, 2021
• Range within two different years: e.g. Dec 20, 2021 - Jan 25, 2022

Datetime

In order to describe a specific timestamp and date this format will be used.

• English language uses the 24 hour format (not AM/PM).
• pt-BR and tr-TR include an extra comma separating the date and time.

Relative Time

Relative time should be used to convey urgency, and to communicate durations that don't need an exact date.

Use case	Relative time/date
Less than 1 minute	Just now
Less than 1 hour	23 minutes ago
Less than 1 day	11 hours ago
Less than 1 week	3 days ago
After one week	Revert to exact time

Localization of Numbers

Numbers and currency are localized via the standardized Javascript construtor Intl.NumberFormat. This results in the following formatting for numbers:

BCP47	Language	Number	Number abrev.(K)	Number abrev.(M)	Number abrev.(B)	Number abrev.(T)	Percentage
en-US	English (U.S.)	10,123,456.36	3.02K	6.93M	4.28B	8.37T	67.57%
ja-JP	Japanese	10,123,456.36	3023.79	693.03万	42.84億	8.37兆	67.57%
zh-CN	Chinese (simplified)	10,123,456.36	3023.79	693.03万	42.84亿	8.37万亿	67.57%
ko-KR	Korean	10,123,456.36	3023.79	693.03만	42.84억	8.37조	67.57%
vi-VN	Vietnamese	10.123.456,36	3,02 N	6,93 Tr	4,28 T	8,37 NT	67,57%
ru-RU	Russian	10 123 456,36	3,02 тыс.	6,93 млн	4,28 млрд	8,37 трлн	67,57 %
pt-BR	Portuguese (Brazil)	10.123.456,36	3,02 mil	6,93 mi	4,28 bi	8,37 tri	67,57%
es-419	Spanish (Latin Americas)	10,123,456.36	3.02 k	6.93 M	4284.03 M	8.37 B	67.57 %
tr-TR	Turkish	10.123.456,36	3,02 B	6,93 Mn	4,28 Mr	8,37 Tn	%67,57
fr-FR	French (France)	10 123 456,36	3,02 K	6,93 Mn	4,28 Md	8,37 Bn	67,57 %

Localization of Currency

Currencies are localized via the standardized Javascript construtor Intl.NumberFormat. This results in the following formatting for numbers in connection with a currency:

BCP47	Language	Currency
en-US	English (U.S.)	$6,930,271.79
en-GB	English (GB)	£6,930,271.79
en-AU	English (AU)	$6,930,271.79
en-IE	English (IE)	€6,930,271.79
ja-JP	Japanese	￥6,930,272
zh-CN	Chinese (simplified)	¥6,930,271.79
ko-KR	Korean	₩6,930,272
vi-VN	Vietnamese	6.930.272 ₫
ru-RU	Russian	6 930 271,79 ₽
pt-PT	Portuguese (Portugal)	6 930 271,79 €
pt-BR	Portuguese (Brazil)	R$ 6.930.271,79
es-ES	Spanish (Spain)	6.930.271,79 €
es-MX	Spanish (Mexico)	$6,930,271.79
tr-TR	Turkish	₺6.930.271,79
fr-FR	French (France)	6 930 271,79 €
fr-CA	French (Canada)	6 930 271,79 $ CA