On internationalization

I’ve been digging into internationalization and localization recently. This sent me down a rabbit hole of research — it turns out there’s a lot more to localization than I thoughtSee the recent SpaceX launch funded by the internet fortune of Elon Musk.

Nokia failed miserably when launching its Lumia phone in the Spanish-speaking market. Turns out Lumia means prostitute. Oops.
When Carrefour chose its Chinese name, it picked 家乐福 (jiālèfú), meaning family/prosperous/blessing.
On the other hand, Coca-Cola didn’t initially have a Chinese name, so Chinese merchants used a phonetic translation 蝌蝌啃蠟 (kēdǒu kěn là)… translating to “bite the wax tadpole”. They’ve since decided to go by 可口可乐 (kekou kele), or “let your mouth rejoice”, and it’s now considered one of the best brand transliterations.
More recently, Disney’s Moana is known as Oceania in Italy, presumably because there’s an Italian porn actress named Moana Pozzi (no links for this one).

Translations

When I started working on Cialfo’s China marketing strategy in 2017, I learnt very quickly that my original idea of a spreadsheet with two columns - one in English and one in Chinese - wasn’t going to work. While the words work well in English, the Chinese variant missed out on context and subtle UI cues. We now start with an outline that will work in both languages, and write the copy from scratch to avoid the Google Translate effect.

You need a local, native speaker to translate — preferably, a native speaker that can also write marketing copy (typical translators aren’t very good at writing copy that hooks readers). Words carry nuance, and it’s impossible for anyone who doesn’t deeply understand the target culture to decipher all of it.

Numbers, for example: four in Chinese and Japanese cultures sounds like death and is considered unlucky, so you’ll need to avoid the use of four in any product names. In the US, 420 is weed — in India, 420 is a conman.

Expanding text

Not every language uses the same amount of characters — or, for that matters, reads left-to-right.

A phrase like “Start learning now!” is ‘¡Empieza a aprender ahora!’ in Spanish and “‘现在开始学习!” in Mandarin. In Italian, numbers are strung together without spaces, so 2,345 becomes duemilatrecentoquarantacinque. “Food intolerance” in German is nahrungsmittelunverträglichkeiten.

This has a cascading effect from marketing copy (can your marketing emails accommodate long lines?) to UX (how long should buttons be, anyway?). While inelegant, hyphenation works. CSS hyphenation doesn’t handle obvious places to break a word, so the best workaround is:

span:lang(de) { 
  hyphens: auto;
}

Followed by  to add an invisible hypen and accommodate for troublesome words.

We watched as text started to bleed beyond the bounding boxes of buttons, we watched as our grids started to go into the gutter, and we watched as our navigation became illegible to non-English speaking users.

Robyn Larsen, international UX marketing @ Shopify

I figure when in doubt, test with German.

Planning for cultural differences

Take, for instance, these three different versions of the Starbucks website: Japan, France, and the U.S. They’re all on the same coffee line-up page.

The US menu is straightforward and familiar to most people reading this. It’s in English and it’s minimal, featuring the usual products you’d expect at a Starbucks - coffee, tea, or a frappucino.

The French menu, on the other hand, has a huge Starbucks sidebar and much bigger product photos. Also interestingly, it starts with basic drinks: a latte and a black coffee.

And then there’s Japan. Anecdotally, Japanese coffee drinkers seem to prefer some sort of sweetened coffee - and I suppose Starbucks agrees with me, considering it’s pushed the sweet drinks up to the top.

Even homepages are very different. In Asia, people have a preference for busy UI — as much information as possible. As a result, a lot of websites designed for an Asian audience is much more information dense than its American counterpart.

Compare the homepages of: Starbucks America, Starbucks Japan (Japanese) and Starbucks Japan (English).

Most Starbucks visitors who read English in Japan would be foreigners - hence (I assume) the more minimal design.

Dates, times, and numbers

Another component that caused me a lot of stress while localizing Cialfo.

2/3/20 is interpreted differently by each country. Americans read this as February 3rd; Asians read this as 2nd March (note, too, how even in the long-form the days and months are reversed). Different countries prefer 24 hour clocks over 12 hours, making timezones complicated. Similarly, in the US the number 123456.78 would be formatted as 123,456.78 while some Europeans would format it as 123.456,78.

CSS oddities

As a marketer, CSS is usually the last thing I’m thinking about when localizing. This was a mistake. There were several ways CSS could’ve helped me in localization.

The :lang pseudoclass recognizes language even if its declared outside of the element.
writing-mode lets me set the direction of text vertically or right-to-left.
The ch unit (as in max-width:20ch) sets the maximum characters to the width of text. Fullwidth characters take 2ch for one character, compared with two characters in the halfwidth form of Latin language characters.
The q HTML element indicates quotations in short inline form. Quotations are different per language: "" in English, «» in French, and「」 in Japanese.

Online forms

One of my best friend’s name contains a diacritic. It’s difficult for him to fill out a form properly. I do not have a last name. It is impossible for me to fill out any form that requires First Name Last Name.

Most forms can’t handle special characters, umlauts, or diacritics. Names are hard, but leaving people out is worse. Make sure your forms accept non-English letters beyond A-Z.