Number localization
If you want to reach a global audience, you need to consider how your product design and code will work for different languages and scripts. One of the challenges you may face is how to handle numerals. Number formatting is one of the aspects of internationalization that can affect the usability and accessibility of Pinterest products and services. Different countries and regions have different conventions and preferences for how they display and interpret numbers—such as decimals, commas, currency symbols and units of measurement.
The 1, 2, 3s of number localization
Below you will find a few considerations to take into account when creating content for global audiences that contains numerals.
Numeral Systems
When localizing numbers, it's important to have an idea of the different numeral systems that exist in the world. A numeral system is a written representation of numbers. The Western Arabic numeral system (which has the digit symbols 0, 1, 2, 3, 4, 5, 6, 7, 8, 9) is very common in Western locales. Not all languages use Western Arabic digits, though. Bengali, for example, uses the Bengali–Assamese numeral system, whose digits differ from the Western Arabic system: ০, ১, ২, ৩, ৪, ৫, ৬, ৭, ৮, ৯.
Quantity | Price per item | Subtotal |
|---|---|---|
17 | $123.00 | $2,091.00 |
1 | $4.56 | $4.56 |
পরিমাণ | আইটেম প্রতি মান | সাবটোটাল |
|---|---|---|
১৭ | ১২৩.০০US$ | ২,০৯১.০০US$ |
১ | ৪.৫৬US$ | ৪.৫৬US$ |
The same numbers represented in the Western Arabic and Bengali numeral systems
Fonts
Fonts factor into our number localization as well. When we select fonts for our digital products, we may want to make sure that they support all the numeral systems we need. Most operating systems today do a good job of falling back to system fonts when they encounter characters that the currently active font doesn't support. This means that we can often use custom fonts that don't include all the numeral systems we support without numbers turning into gibberish on us.
However, it's worth considering international numeral systems when doing UX research for our apps and websites. An international stock exchange app may need to represent all kinds of numeral systems, for example, and our font selection process may need to be sensitive to this. In all cases, we should always test our apps and websites on different platforms to see how our numeral systems are being rendered for our users.
Separators: Breaking up large numbers
When representing large numbers, it often helps with legibility to break up the numbers into digit groups. In many English locales we're used to separating thousands with a comma, and to separate the integer and fraction parts of a number with a point—like 1,234,567.89. However, it's important to be aware that different locales separate digit groups differently. In French (and even in some English locales), for example, it's common to separate groups of thousands with space and to separate an integer and a fraction with a comma—like 1 234 567,89. Some locales only separate the integer portion of a number, while others separate both the integer and fractional portions.
In case you're interested in best practices on how to format numbers at Pinterest, check out our
Content Standards.
Currencies
Localizing currency involves using symbols or codes to indicate the currency of the current number. Depending on the context, a special symbol ($ or US$), or an ISO 4217 currency code (USD) is used to represent the currency.
Some locales place the currency symbol to the left of the number, while others place the symbol to the right.
Locale | Currency | Example |
|---|---|---|
US English | US Dollar | $2,091.00 |
US English | Bermudan Dollar | BMD 2,091.00 |
US English | Mexican Peso | MX$2,091.00 |
US English | Chinese Yuan | CN¥2,091.00 |
China Chinese | Chinese Yuan | ¥2,091.00 |
France French | Euro | 2 091,00 € |
Bangladesh Bengali | Bangladesh Taka | ২,০৯১.০০৳ |
Saudi Arabia Arabic | Pakistani Rupee | PKR٢٬٠٩١٬٠٠ |
The same number represented in different currencies
Percentages
The common percent sign (%) may seem like it would be uniform across all locales, but that's not the case. Different locales use different symbols for the percent sign. And like currency symbols, the percent sign can go to the left or right of its associated number depending on the locale.
Locale | Example |
|---|---|
US English | 5% |
Arabic | %٥ |
The same percentage in different locales
Phone numbers
Phone numbers are formatted differently depending on the country. Use these regional guidelines 18n libraries to learn how they're formatted in each language.
Time and dates
It's no secret that people in different countries write the date and time in a certain way. For instance, in the US, they specify the month first, followed by the day, and then the year. Each component is also separated by a slash, which gives us mm/dd/yyyy, for example: 09/01/2021, which would be September 1, 2021. However, if you showed this date to a person from, say, Russia, they'd think that 09 is the day and 01 is the month. That's because in CIS (Commonwealth of Independent States) countries, the day goes before the month and usually each component is separated by dots: dd.mm.yyyy.
Moreover, we have different time formats. In some countries people tend to use a 12-hour format and append am/pm, whereas in others the standard is the 24-hour format. Therefore, it's very important to localize date and time properly based on the currently set locale.
Best practices
Write with localization in mind
When writing source content, be careful with examples and scenarios and use caution when utilizing expressions, slang or other phraseological constructs specific to your own culture, such as references to historical events that may not resonate. They need not be cut out entirely, simply used carefully and in such a way that they can be modified to be made suitable or omitted entirely.
Prepare for text expansion. If you are tight on space, keep in mind that numbers might expand in length during translation. Some languages are more "wordy" than others, requiring more or fewer words to express the same meanings.
Localization can work more smoothly when the source content is written with localization in mind.
Follow i18n libraries
- ICU (International Components for Unicode): ICU is a mature, widely used set of C/C++ and Java libraries providing Unicode and Globalization support for software applications. ICU libraries (bindings) can be found for most popular languages (PyICU, ICU4J, ICU4C etc.)
- CLDR (Unicode Common Locale Data Repository): provides locale-specific patterns for formatting and parsing:
- Dates
- Times
- Time zones
- Numbers
- Currency values
- Measurement units
- Translations of names (such as languages, scripts, time zones etc)
- Language-specific libraries, for example: FormatJS and i18next
- Plan for text expansion: lay out your elements in a way where text expansion doesn't hinder your information hierarchy
- Flexible design for varying language length and font size
- Use pseudo-localization to find problems
- Rely on local formats and i18n libraries
- Account for text expansion and different number systems causing the line break at the wrong spot
- Consider localization into different locales during the design phase
- Release without testing and pseudo-localization
- Assume numerals formats are the same for all languages and markets
Design tips
Mock up a scenario where the store, presentment, payout, and billing currencies are different. This scenario is becoming more common as more merchants start selling globally.
- Use Japanese Yen (JPY) amount to test currency length and space constraints
1 USD is approximately 100 JPY. If there is enough space for the JPY amount, it should work for most other major currencies.
- Always assyme the worst-case scenario for text length
Especially on mobile and in layouts such as tables and columns. Avoid using narrow columns.
Use currencies that share the same symbol to test for clarity
USD, CAD, AUD, HKD, SGD are just a few of the many currencies that share the same symbol “$”.Work with linguistic experts
To review line breaks and word wrapping for character-based languages, like Chinese or Japanese, to make sure they don't break sentences.Write content thinking about:
- Whether the currency symbol appears before or after the amount (for example, $250, 250 USD, 250 $)
- Whether decimals are used (for example, there are no "cents" in Japanese yen)
- Whether the decimal sign is a period or a comma (for example, 37,50 or 37.50)
- How to group numbers (for example, 10,000 or 1,0000, or using spaces)
Related
International design
About International Design abreviations and its meaning
RTL guidelines
A guide to designing surfaces with RTL languages in mind