Internationalization (i18n) support in webapps is important, but I'm learning that it's not simple to do. Here are some quick guidelines if you're new to it.
The most basic thing you can do to support i18n is to use a format that supports "pluralization." For instance, if a string in English is "There are {count} dogs", you'll want it to read something like:
There are 0 dogs
There is 1 dog
There are 2 dogs
depending on the number of dogs. There are numerous formats and systems you can use to accomplish this functionality. One format is the ICU Message Format. An example string that represents the above string in the ICU Message Format is:
There
{ count, plural,
one {is}
other {are}
}
{ count }
{ count, plural,
one {character}
other {characters}
}.
Sometimes, your UI might display a dynamic list of things. For instance, if the user can select different types of pets, the UI might display:
You selected: a dog, a cat, a mouse.
In JavaScript, you might accomplish this using code like:
selectedPets.join(', ');This style of list generation only works for left-to-right (LTR) languages. RTL languages work differently, and some of them use a reverse, upside-down comma instead of the comma that English speakers are familiar with.
I couldn't find a library that supported this, so I wrote my own. You can see it on GitHub here:
The last, and perhaps most complex thing, is flipping the UI for RTL languages. Popular platforms like Facebook use this approach, because it greatly simplifies designing the UI. As you'd expect, flipping the UI isn't straightforward from the perspective of the developer.
I haven't done this myself, so I'm sure it presents some unique challenges.
One developer I spoke to mentioned that she built a system that allowed the UI to restructure itself based on the value of variable. That API makes sense to me. It's worth noting that this requires careful planning of the development of the app to make sure that it's used everywhere. For instance, she mentioned that assuming directionality (i.e. ...