How to deal with line breaks and embedded text in translation? We have a few tricks that you can use to stay consistent with the designs and still keep your content completely translation-ready for continuous translation. Keep on reading!

#1. Expand and Contract Text by About 30%

Leave about 1/3 of ‘in case of accident’ space each time you put text on a button. Translations are unlikely to be the exact length of your original text. Sure, you can fix line breaks in proofreading but why risk it in the first place?

#2. Relative objects, Wrappers, and Containers Instead of Fixed Values

This might sound nerdy web-dev and all, but in fast-paced environments, it’s easier to just fix a positioning problem with height or width parameters instead of having to relate everything to each other. Go as far as to menu items with this – not only will it comply with your RWD ideas but it’ll save you from having cropped/cut/line-broken words in the translated interface.

#3. Research Your Fonts and Prepare to Optimize Per Language

Before selecting a fancy and fashionable font like Roboto678 be sure you are actually aware of what UTF-8 and UTF-16 stand for. After you’re good to go with your encoding knowledge think of which languages will be used. A decent font will last you a lifetime. Pick and choose from Google’s free NOTO or its counterparts. Don’t skip testing this via in-country reviews though – the font is a powerful medium that can make or break your whole interface!

#4. Ditch UI Elements With Embedded Text

You simply can’t translate them! Well, you can, if you REALLY want to, but it’s just not worth it. Especially since you can build virtually anything usable with CSS. If you have embedded text on graphics and use it as buttons – swap that and your localization efforts will be WAY faster.

#5. Get Detailed with Foreign Metric Systems, Currencies and Alphabetical Sorting

You will have this covered in your development framework…Most of the time. What’s the issue then? Well, if you run an eCommerce store and your payment gateway accepts foreign currency, allow it to display it. If you sell products in Europe, allow it to display KG instead of LBS. Building a weather app for Germany? Degrees Celsius, please! And don’t forget to sort – you don’t want the über-rific t-shirt to be skipped simply because you don’t know if the ü goes before or after u. We can help you figure this out for Japanese or Arabic, too.

#6. When In Doubt, Refer to ISO Symbols Encoded in UTF-16 Standards

Did you know that a thumbs-up gesture in Greece is regarded as offensive?  There really are a whole lot of local idiosyncrasies that are not widely known out there! Use symbols that are universally acceptable and well understood. A bonus tip would be to use them as font characters (if available) and not images. That way you’ll save up a bit on page load time and won’t have to translate those few alt=”” parameter words. You use alt=”” right?

#7. Mobile First!

Everything in this matter has already been covered virtually everywhere so I’ll simply take the opportunity and ask you this: does your refrigerator need an LCD display on its door to tell you how cold is it inside? Don’t add things your interface doesn’t really need and you’ll immediately become a responsive web design champion.

#8. Account For Line Breaks When Translating

Normally when you use relative dimensions you can easily position text against an image in a single row. If you, however, translate “translation platform” into “übersetzungplatform” you will not be able to automatically line-break. There will be a lot of white space left, but this is still better than having elements overlap. Now think of Chinese that rarely uses spaces – you truly need a professional language service provider to handle that.

#.9 All Your Screenshots Require an Update by Yesterday!

This may very well be the most dreaded problem of all web developers. And screenshots often ARE used in web apps – especially in tutorials or embedded support content. You can make a new series of screenshots, but you also can ask Text United to translate them into photo-editing. An option good to have if some of your screenshots are fakes.

#10. That 3rd Party Software That’s Available in Your Interface

There is absolutely no easy way to say this. If your support system, helpdesk, tutorial, chat, or other vendor does not provide a localized UI, you will have a difficult time providing a unified and concise experience to your international users.

Either way, if you have any questions related to this matter or you need advice on how to deal with website translation, feel free to reach out to us. We will gladly help you set everything up for your global success!