: How to accomodate different text lengths in translated web content? I was recently working on a website design and I naturally based my work on the content supplied by my customer. I knew from

@Chiappetta793

Sylverdrag's answer is way better than this, but I wanted to chip in something that can work as a safety measure:

I had a nav menu where I used Calibri, which is typically a bit narrower than other fonts. I realized that if people didn't have that, the spacing of some of the fonts down the stack could be less than ideal. So I used jQuery to get the width of each menu item, and if one was too wide, I knocked the font size of every menu item down enough so that everything would fit and look nice.

JavaScript penetration is usually estimated to be in the high nineties, so it's not a solution for that small percent that would speak a language with long words and not have JavaScript on. But like I said, it's more of a fallback thing.

Vote Up Vote Down

@Tiffany317

Localization should be taken into consideration at the beginning of the project. That means:

1) Expanding layout wherever possible or use "More" link.
Depending on the source and the target language, the text length can vary by as much as 50% legitimately. In the case of English to common EU languages, the translation is usually 10 to 30% longer. This is legitimate and should be expected.

If you like a fixed layout, you can cut after a certain number of words (use characters for languages like japanese or Thai which have no word delimiters, and fade out the last few charactes because you can't predict if you will be in the middle of a word/concept) and add a "more" link point to a separate article page

2) Plan for plenty of white space then determine the max length (in characters) for menus, boutons, and other small strings.

When ordering the translation, these strings must be extracted and translated separately. Usually, these strings are put in an Excel file and the max length is indicated in a cell beside it so that the translator knows that there is a size limit and can work with it.

|------------|--------------|-------------------|-----------------|-------------|
| Item type | Length | Source (EN-US) | Target -FR-FR | target chars|
|------------|--------------|-------------------|-----------------|-------------|
| Menu | 15 chars | Home | Accueil | 7 |


If you can, write a small macro which counts the characters in the target and displays it in a separate column. This will help your translators keep to your limits where possible

The translator will do his best, but languages are what they are and he can't invent words, so if you limit the space too much, the translator will have to use abbreviations or acronyms which are often rather obscure, use the source word (not usually understood) or a related word that may be completely off the mark.

3) Keep in mind that just because a word is short in English it does not mean it will be short in the target language. For instance, "car" becomes "voiture" or "automobile" in French. It can be abbreviated to "Auto" in most EU languages, but occasionally, there just isn't a short translation in the target language, so irrespective of the length of the English word, allocate a fair number of characters for the translation. As a guideline, the average length of a word in English is 5 characters. In French 5.13. German, 6.26. Russian 6.36. Those are averages. If you are tight in space, I would recommend to assume 10 characters (for a single word string like a menu).

At the end of the day, the translator can only do so much. Either the word exists or it doesn't, so be flexible right from the beginning and use plenty of padding/white space in your design.

In your case, it is of course too late for preparation. Try to fit the text as much as possible without damaging your design (a bit small is not an issue, but too small, of course...), make a list of the items which definitely can not fit in your design and send them back to the translator mentionning the length limit (and of course pay him for the extra work, it wasn't his mistake)

Vote Up Vote Down