Group-income-simple: Localize display of currency throughout the app

Created on 3 Oct 2019  ·  5Comments  ·  Source: okTurtles/group-income-simple

Problem

I think it might be the case that not all countries display currency with the symbol in front of the amount. I.e. some might do 100$ instead of $100. However, our app currency assumes that the symbol goes in front of the amount (everywhere).

Solution

  • Find out if there are countries/languages where the positioning is reversed (or somehow different)
  • If so, search the project for all instances of mincomeAmount and mincomeCurrency and fix their display by generating the strings using L and i18n with proper positioning, e.g.

    L('{currency} {amount}', { currency: this.mincomeCurrency, amount: this.mincomeAmount })
    
  • Or, since this might not be a language-based issue (but a region based issue), perhaps that's not the right way to go about it, and maybe for this case we need to look into libraries or built-in browser functions to handle proper rendering of currency info

NOTE: at issue creation, mincomeCurrency is named incomeCurrency, but this should change as soon as #679 is merged

Frontend Enhancement Starter Accessibility Research Up-for-grabs

Most helpful comment

Yes, positioning is sometimes reversed. Depending on the language, the € can come before or after the number: Written conventions for the euro in the languages of EU member states
For displaying a symbol, before/after are the only two conventions I recall seeing.

There's also the option to use ISO Currency Codes (e.g. USD, EUR, XBT). The ISO code would help distinguish between similar symbols (e.g. USD vs. CAD, XBT vs. THB), and also prevent the dreaded � or ☐ when the user's device doesn't support the currency symbol. See:
https://english.stackexchange.com/questions/11899/what-is-a-good-convention-for-expressing-different-currencies

All 5 comments

Yes, positioning is sometimes reversed. Depending on the language, the € can come before or after the number: Written conventions for the euro in the languages of EU member states
For displaying a symbol, before/after are the only two conventions I recall seeing.

There's also the option to use ISO Currency Codes (e.g. USD, EUR, XBT). The ISO code would help distinguish between similar symbols (e.g. USD vs. CAD, XBT vs. THB), and also prevent the dreaded � or ☐ when the user's device doesn't support the currency symbol. See:
https://english.stackexchange.com/questions/11899/what-is-a-good-convention-for-expressing-different-currencies

I researched this topic a while back (while designing our currency pickers) and reached the same conclusion as @dotmacro - the best option (that is, the option that works best with all currencies and languages) is to display the ISO code. I also added the symbol as an extra:

Captura de ecrã 2019-10-03, às 16 02 31

However, there are some places where we only show the symbol:
Captura de ecrã 2019-10-03, às 16 34 25

If we need to choose one, I would say that the ISO code would be better. If we can do both, that's even better! Up to you to decide @taoeffect !

Probably closed with the update to currencies.js. If not, feel free to re-open!

Possibly useful link: Falsehoods programmers believe about prices

Feel free to re-open this issue if we missed any of that ☝️

  1. All currencies have an ISO 4217 3-letter code. (The Transnistrian ruble has none, for example)

Should be okay for the prototype (so leaving issue closed), but potentially something to be aware of later.

Was this page helpful?
0 / 5 - 0 ratings