Inspiration
It's difficult for engineers to create UI elements where the translated text perfectly fits the interface in all circumstances. When developing the UI translated text is like a 'black box' where the content never gets revealed until the translation process is complete. Not all engineers prioritises the importance of correct translation to the user experience so they may settle for truncated text(ellipses) or hyphenated text. While this approach may make sense if you know English well, it may not be the best approach for other languages for which we don't have subject matter experts.
We needed a way to simulate French and German, or any other language, so that we can build a more consistent and robust user experience for ALL customers. After doing some research we were inspired by Netflix's approach to this problem, they coined the term 'Pseudo Localization'.
What it does
When translating from English to other languages the text may grow horizontally up to 40%. The text may even grow vertically with special characters, for example: à or Ç. We built a service to pseudo localize text by expanding the text given by 40% and adding special characters to the text for the vertical growth simulation. To make the original text still readable we kept all characters from the source message and did transformations on those characters that had special character replacements. For example, the text 'Flash Deals' now becomes 'Fłåšh Dęåłš'. The additional 40% of the new message is a combination of two underscores '_', to signify that everything that comes after this is junk text, then random special characters. The original text 'Flash Deals' will now look like this 'Fłåšh Dęåłš_üÝšÇÈ'. We did one more thing, that is to add square brackets around the pseudo localized text [Fłåšh Dęåłš__üÝšÇÈ]. The idea is that once you are able to see opening and closing square brackets when you have pseudo localized your feature then the feature is good to go! Your original text can be translated to any language without breaking the user interface.
How I built it
When the pseudo localized feature is turned on by the engineer we force the locale of the request to be English. This way we only pseudo localize English text seeing that's what we will always translate from.
We then hijack the text that's to be sent back to the client and run it through out pseudo localizer service.
The pseudo localizer service takes a block of text, breaks it apart into it's individual characters, then replaces each character with it's equivalent special character, if one exists. If it doesn't then it returns the original character. After it does the special character replacement it then measures 40% of the original text by counting the characters in the text and returning 40% of the total characters. If 10 characters are in the original message then the 'Chraracter Expander function' knows it needs to append 4 random characters at the end.
When all this is done we return the pseudo localized string to the client in square brackets.
Challenges I ran into
Trying to figure out the best way to estimate 40% of the original text, it didn't seem very obvious at first ;) Trying to determine the most commonly used special characters to include them in the pseudo localized text
Accomplishments that I'm proud of
I'm happy that we got our prototype working within 4 hours.
What I learned
There is a way to create really great UI's without actually seeing how the text will look in all translated languages. There are tons of special characters out there that we need to think about, and ensure that we properly accommodate for them, as we increase our global dominance as a company.
What's next for Pseudo Localization
Find a way to pseudo localize the product catalog, so that we can be sure that we are delivering the highest quality product to our customers.
