- style
Text Formats
- 1 Internationalization and Localization
- 1.1 Date and Time
- 1.2 Decimals
- 1.3 Large Numbers
- 1.4 Text Expansion
- 1.4.1 Length and Size
- 1.4.2 Language expansion
- 1.5 Right to Left
- 1.6 Nation Flags
- 2 Headers
- 2.1 Content Headers
- 3 Labels
- 3.1 Accessibility
- 4 Capitalization
Internationalization and Localization
Internationalization (i18n) is the process of designing software applications so that it can be adapted to various languages and regions without engineering changes. Localization (l10n) is the process of adapting internationalized software for a specific region or language by adding locale-specific components and translating text.
Here are a number of guidelines for designing content with international audiences in mind:
Date and Time
Date and Time should always be stored in UTC to allow it to be converted and displayed in multiple time zones. LUX components and guidelines follow the conventions detailed below by default:
Basic date format: dd/mm/yyyy. For example 03/08/2017.
For the current day and the day before that, the default is Today and Yesterday.
Basic time format: 00:00 PM/AM. For example 05:55 AM.
The combined date and time should be connected using either a comma or the word ‘at’, where relevant. For example:
03/08/2017, 00:55 AM and Yesterday, 12:55 PM.
03/08/2017 at 00:55 AM and Yesterday at 12:55 PM.
Duration format: x days, x hours, x minutes. For example 2 days, 5 hours, 12 minutes.
All applications built for Verint should allow the above defaults to be automatically changed based on the users specified browser locale (or by a manual setting, if the application allows it). Details of conventions for specific countries and regions are available here.
Many frameworks and libraries (such as Moment.js) offer full and constantly-updated internalization features for easy localization of dates and times.
Decimals
Despite being the conventional standard (and the LUX default), Great Britain and the United States are two of the few places in the world that use a period to indicate the decimal place. Many other countries use a comma instead. Likewise, while the UK and US often use a comma to separate groups of thousands, many other countries use a period instead, and some countries separate groups of thousands with a thin space.
Region | Format |
|---|---|
Most English-speaking countries | 1,275.28 |
Many European countries | 1.275,28 |
Canada and some European countries | 1 275,28 |
As with Date and Time above, all applications built for Verint should allow the decimal character defaults to be automatically changed based on the users specified browser locale (or by a manual setting, if an application allows it). Details of conventions for specific countries and regions are available here.
Large Numbers
In LUX, large numbers may be represented using K for thousands and M for millions, which is the common practice in most countries.
The number | May be represented as |
|---|---|
1,380 | 1.38K |
2,040,296 | 2.04M |
Text Expansion
Always design with text expansion in mind. When English text gets translated into another language, the translated text can be as much as 3x longer. Make UI components expandable whenever possible. Do not assign a fixed width or height to your UI component unless you have a good reason to.
For longer text, wrapping is a good solution. Be aware of the potential vertical expansion since translated text will require more lines. Truncation with hover text can be a compromise. Be aware that this brings the risk of making the UI less effective.
Length and Size
The general rule for text expansion is: “the shorter the English text, the longer the translated text is likely to be”. The following table shows the average text expansion rate for different English text lengths:
English Text Length | Expansion |
|---|---|
1 - 10 | 100 - 200% |
11 - 20 | 80 - 100% |
21 - 30 | 60 - 80% |
31 - 50 | 40 - 60% |
51 - 70 | 50 - 70% |
71+ | 30% |
Language expansion
In addition to English text length, the target language also has an impact upon the amount of expansion. The following table shows the expansion factor for the English text “Share” into various languages:
Language | “Share” | Expansion Factor |
|---|---|---|
English | Share | 1.0 |
German | Freigeben | 1.8 |
French | Partager | 1.5 |
Spanish | Compartir | 1.8 |
Italian | Condividi | 1.7 |
Japanese | 共有 | 0.8 |
Chinese | 共享 | 0.8 |
Korean | 공유 | 0.7 |