{"id":8766,"date":"2019-08-26T14:32:59","date_gmt":"2019-08-26T12:32:59","guid":{"rendered":"https:\/\/phrase.com\/blog\/?p=7478"},"modified":"2022-10-27T16:47:44","modified_gmt":"2022-10-27T16:47:44","slug":"number-localization","status":"publish","type":"post","link":"https:\/\/phrase.com\/blog\/posts\/number-localization\/","title":{"rendered":"A Concise Guide to Number Localization"},"content":{"rendered":"<p>Imagine checking out of an e-commerce store and seeing your order total as <code>$1,423.01<\/code>, and later seeing <code>$2,099.94<\/code> appear on your credit card bill. Your cart at checkout was shown in US dollars, but since you live in Australia, you naturally assumed that the amount was in Australian dollars. The currency was converted largely behind the scenes, and you ended up paying almost 150% of what you thought you were going to pay. That would be a nightmare scenario for the store since they&#8217;ve probably just lost you and countless others as returning customers. While this is an extreme example, it just goes to show how important number and currency localization is to both UX and our bottom line as software developers. In this guide, we&#8217;ll cover what every developer should know about number localization: numeral systems, currency representation, and percentages.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_69_1 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Overview<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/phrase.com\/blog\/posts\/number-localization\/#numeral-systems-the-1-2-3s-of-number-localization\" title=\"Numeral Systems: the 1, 2, 3s of Number Localization\">Numeral Systems: the 1, 2, 3s of Number Localization<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/phrase.com\/blog\/posts\/number-localization\/#separators-breaking-up-large-numbers\" title=\"Separators: Breaking Up Large Numbers\">Separators: Breaking Up Large Numbers<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/phrase.com\/blog\/posts\/number-localization\/#currency-localization\" title=\"Currency Localization\">Currency Localization<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/phrase.com\/blog\/posts\/number-localization\/#percentages\" title=\"Percentages\">Percentages<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/phrase.com\/blog\/posts\/number-localization\/#development-strategy\" title=\"Development Strategy\">Development Strategy<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/phrase.com\/blog\/posts\/number-localization\/#cest-fini\" title=\"C&#8217;est Fini\">C&#8217;est Fini<\/a><\/li><\/ul><\/nav><\/div>\n<h2 id=\"toc_2\"><span class=\"ez-toc-section\" id=\"numeral-systems-the-1-2-3s-of-number-localization\"><\/span>Numeral Systems: the 1, 2, 3s of Number Localization<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>When localizing numbers, it&#8217;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 <em>Western Arabic<\/em> numeral system \u2013 which has the digit symbols <code>0<\/code>, <code>1<\/code>, <code>2<\/code>, <code>3<\/code>, <code>4<\/code>, <code>5<\/code>, <code>6<\/code>, <code>7<\/code>, <code>8<\/code>, <code>9<\/code>\u00a0\u2013 is very common in Western locales. Not all languages use Western Arabic digits, though. Bengali, for example, uses the <em>Bengali\u2013Assamese<\/em> numeral system, whose digits differ from the Western Arabic system: <code>\u09e6<\/code>, <code>\u09e7<\/code>, <code>\u09e8<\/code>, <code>\u09e9<\/code>, <code>\u09ea<\/code>, <code>\u09eb<\/code>, <code>\u09ec<\/code>, <code>\u09ed<\/code>, <code>\u09ee<\/code>, <code>\u09ef<\/code>.<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7479 aligncenter\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2019\/08\/ncl-bengail-numeral-system.png\" alt=\"\" width=\"490\" height=\"291\" \/><br \/>\n<em>The same numbers represented in the Western Arabic and Bengali numeral systems<\/em><\/p>\n<p>\u270b\ud83c\udffd <em>Heads up \u00bb<\/em> Many languages have adapted to use Western Arabic numerals in modern times. It&#8217;s worth researching the locales your app or website supports to see if they officially use Western Arabic numerals or not.<br \/>\nIt&#8217;s important to be aware of local conventions when working with numbers. In some locales like Saudi Arabia, for example, it&#8217;s common to represent numbers in the local numeral system, <em>Eastern Arabic<\/em>, and not the Western Arabic system.<br \/>\nFonts 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&#8217;t support. This means that we can often use custom fonts that don&#8217;t include all the numeral systems we support without numbers turning into gibberish on us.<br \/>\nHowever, it&#8217;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.<\/p>\n<style type=\"text\/css\"><!--td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}--><\/style>\n<h2 id=\"toc_3\"><span class=\"ez-toc-section\" id=\"separators-breaking-up-large-numbers\"><\/span>Separators: Breaking Up Large Numbers<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>When representing large numbers, it often helps legibility to break up the numbers into digit groups. In many English locales we&#8217;re used to separating thousands with a comma, and to separate the integer and fraction parts of a number with a point \u2013 like <code>1,234,567.89<\/code>. However, it&#8217;s important to be aware that different locales separate digit groups differently. In French (and even in some English locales), for example, it&#8217;s common to separate groups of thousands with space and to separate an integer and a fraction with a comma \u2013 like <code>1 234 567,89<\/code>. Some locales only separate the integer portion of a number, while others separate both the integer and fractional portions.<br \/>\nThe Indian numbering system is unique in that it groups the three rightmost digits of an integer together, and separates digits to the left of that group into pairs, e.g. <code>12,34,567.89<\/code><\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7480 size-full\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2019\/08\/ncl-separators.png\" alt=\"Overview of different number separator uses worldwide | Phrase \" width=\"640\" height=\"441\" \/><br \/>\n<em>The same number separated differently in different languages<\/em><\/p>\n<p>\ud83d\udd17 <em>Resource \u00bb<\/em> <a href=\"http:\/\/xml.coverpages.org\/ISO-FDIS-8601.pdf\">Scientific and technical standards<\/a> exist for formatting numbers, including rules for separating digit groups. If your app or website is targeting a scientific or technical audience, you may want to look at these standards.<br \/>\n\ud83e\udd3f\u00a0<em>Go deeper \u00bb\u00a0<\/em>Check out our tutorial where we walk you through creating a simple algorithm for <a href=\"https:\/\/phrase.com\/blog\/posts\/how-convert-a-decimal-to-a-string-with-thousands-separators\/\">converting a decimal to a string with separators<\/a>.<\/p>\n<h2 id=\"toc_4\"><span class=\"ez-toc-section\" id=\"currency-localization\"><\/span>Currency Localization<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Localizing currency involves using symbols or codes to indicate the currency of the current number. Depending on the context, a special symbol (<code>$<\/code> or <code>US$<\/code>), or an <a href=\"https:\/\/www.iban.com\/currency-codes\">ISO 4217 currency code<\/a> (<code>USD<\/code>) is used to represent the currency.<br \/>\nSome locales place the currency symbol to the left of the number, while others place the symbol to the right.<br \/>\nSome currencies are represented by letters in their locale&#8217;s language. The United Arab Emirates dirham, for example, is represented with the letters <code>\u062f.\u0625<\/code>, which is the Arabic acronym for &#8220;Emirati dirham&#8221;.<br \/>\nThere are also unofficial abbreviations to currencies, and they&#8217;re commonly used within a country to represent its currency. The aforementioned Emirati dirham is sometimes unofficially represented with the Latin characters &#8220;DH&#8221; or &#8220;Dhs&#8221;.<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7485 size-large\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2019\/08\/currencies-1024x661.png\" alt=\"Overview of currency separators worldwide | Phrase\" width=\"1024\" height=\"661\" \/><br \/>\n<em>The same number represented in different currencies<\/em><\/p>\n<p>When the currency we&#8217;re working in isn&#8217;t obvious from the context, we would probably want to use either the ISO 4217 code or a disambiguated symbol to represent the currency. For example, the <code>$<\/code> symbol can represent the American, Canadian, or Singapore dollar \u2013 <a href=\"https:\/\/www.jagranjosh.com\/general-knowledge\/currencies-of-the-world-countries-that-have-dollar-as-currency-1303814480-1\">among many others<\/a>\u00a0\u2013 depending on the context. In fact, the <code>$<\/code> can represent currencies that aren&#8217;t dollars, like the Argentinian peso. If there&#8217;s any chance of confusion, using a disambiguated form of the currency symbol (<code>US$<\/code>) or the ISO code (<code>USD<\/code>) can make things clear for our apps&#8217; customers \u2013 which usually results in more sales &amp; revenue for us.<br \/>\n\ud83e\udd3f\u00a0<em>Go deeper \u00bb<\/em> We haven&#8217;t mentioned currency exchange because it&#8217;s a bit outside the scope of this article. However, it&#8217;s worth noting that there are APIs that offer currency exchange services. On example is the <a href=\"https:\/\/currencylayer.com\/\">currencylayer<\/a> API: it&#8217;s trusted by large corporations and has a free tier that allows you to try it out.<\/p>\n<h2 id=\"toc_5\"><span class=\"ez-toc-section\" id=\"percentages\"><\/span>Percentages<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The common percent sign (<code>%<\/code>) may seem like it would be uniform across all locales, but that&#8217;s not actually 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.<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7482 size-full\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2019\/08\/ncl-percent.png\" alt=\"Percentage separators worldwide | Phrase \" width=\"510\" height=\"354\" \/><br \/>\n<em>The same percentage shown in different locales<\/em><\/p>\n<h2 id=\"toc_6\"><span class=\"ez-toc-section\" id=\"development-strategy\"><\/span>Development Strategy<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>When developing our apps and websites, it&#8217;s probably wise to adopt a robust localization library that will do the heavy lifting of number localization for us. Many languages have localization in their official standard libraries. <a href=\"https:\/\/phrase.com\/blog\/posts\/the-best-javascript-i18n-libraries\/\">JavaScript<\/a>, for example, has the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/NumberFormat\">Intl.NumberFormat<\/a> object for formatting localized numbers, optionally as currencies or percentages.<\/p>\n<h2 id=\"toc_8\"><span class=\"ez-toc-section\" id=\"cest-fini\"><\/span>C&#8217;est Fini<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>We hope you enjoyed this brief guide to numbers and currency localization. For localizing more than just numbers, check out Phrase. It&#8217;s is a fully-featured, professional localization solution made for product managers, developers, and translators. With a flexible API, powerful web console, and expert features like branching, OTA (over the air) translations, and machine translations, Phrase greases the gears of your translation team and helps you focus on your app&#8217;s features, not merging string files. Check out all the <a href=\"https:\/\/phrase.com\/platform\/\"><span style=\"font-weight: 400;\">Phrase products<\/span><\/a>, and <a href=\"https:\/\/eu.phrase.com\/idm-ui\/signup\">sign up<\/a> for a free 14-day trial.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Often critical to international sales, knowledge of number localization can go a long way to providing better UX in internationalized apps and websites.<\/p>\n","protected":false},"author":41,"featured_media":2612,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_stopmodifiedupdate":false,"_modified_date":"","_searchwp_excluded":"","footnotes":""},"categories":[40],"class_list":["post-8766","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-localization"],"acf":[],"_links":{"self":[{"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/posts\/8766"}],"collection":[{"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/comments?post=8766"}],"version-history":[{"count":3,"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/posts\/8766\/revisions"}],"predecessor-version":[{"id":34926,"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/posts\/8766\/revisions\/34926"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/media\/2612"}],"wp:attachment":[{"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/media?parent=8766"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/categories?post=8766"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}