Today I came across an excellent write-up about web typography for non-Latin languages. It focuses specifically on line breaks, and if you're a frontend engineer working on a heavily internationalized web app, I highly recommend giving it a read. The problem is widespread enough that I noticed it myself while learning Korean, as online translators and AI chatbots are notoriously bad at this.
So how can we spot these kinds of issues earlier – ideally before users have to complain? Let me introduce you to a practice called "Translation Tuesdays". I first came across it on Tumblr, though maybe it was Thursdays? I digress.
- Pick a recurring day. It could be every Tuesday, or even every full moon, if you're feeling whimsical.
- Modify your translation function – ideally the wrapper – to force a specific language in development and testing environments. That way everybody on your team will get to experience what your international customers see.
- Chances are not everyone on your team can read Japanese or Mandarin Chinese, and they still need to get around the app. Consider appending an untranslated version of the string to the translation as well. For example, "Save" might translate to "저장 (Save)".
- If you want to go to the extreme, consider duplicating the source strings for a longer output in your components.
If this sounds like a quick way to break your app’s meticulously crafted layout – you’re absolutely right. When designing and implementing interfaces, we often don't think how it will show up in a different language. And with the amount of languages out there, it's nearly impossible to predict all possible combinations.
Languages can vary dramatically, and often in unexpected ways. While your app will still be primarily optimized for English or any other language of choice, if you apply the above practice, you give yourself a much better chance of ensuring it at least doesn't break when viewed in a different language where your tidy four-letter button suddenly becomes a full sentence – or worse, a paragraph.