Top Tips for Translations

Allison Lacker

• 3 min read

Tip 1: Don't use string interpolation with variables

When there is copy that says something like The small blue dress is on sale! there is often an inclination to say, "Great! I'll code The ${size} ${color} ${product} is on sale!. There are two main problems with this.

1. Different languages will put descriptors in different orders.

You often cannot assemble a grammatically correct sentence without knowing more about what the variables are.

Eg:
In French, "The small blue dress" would translate to "La petite robe bleue est en solde!", which is La ${size} ${product} ${color} est en solde!

(Note that color is after product instead of before).

Many translation libraries will allow the translator to change the order of variables, which is effective if you can be precise with your variables (like size and color) but less effective if you have variables like "characteristic1" or "characteristic2".

2. With gendered languages, the translation of surrounding words vary based on what the variables are.

Eg, if our product is a dress (feminine in French), the translation is "La petite robe bleue". If our product is a hat (masculine in French), the translation is "Le petit chapeau bleu".

(Note that all the words around the product are different, not just the variable).

Solutions

  1. Use colons.
    pros: you get all the details in there
    cons: it may seem robotic or unfriendly

    This item is on sale: 
    blue
    dress
    small

  2. Use phrasing that doesn't use variables
    pros: easy!
    cons: it doesn't include as much information

    An item you were interested in is on sale!

  3. Translate all options.
    pros: can get you exactly the copy you want
    cons: can become prohibitively complicated depending on the amount of variables you have and the number of options for each variable.

    This is common for limited options, like translating One blue dress vs No blue dresses vs Five blue dresses, but is very rare for larger combinations of words

Tip 2: Make your UI Flexible

Words are different lengths in different languages, and can be right-to-left instead of left-to-right.

Account for both different phrases and different word lengths.

If you end up truncating your phrases in order to limit the width or height of a component, you can use CSS to add ellipses in a flexible way that account for differing character widths.

Solutions:

  1. Have flexible-width containers and allow for horizontal scrolling
  2. Have flexible-height containers, with word breaks to naturally cascade the words. Warning: words can be wider than you may think!
  3. Use CSS to truncate and add ellipsis

Tip 3: Add your language to the HTML

One of the simplest things on this list is to add a lang attribute to your HTML! This is required so screenreaders can programmatically determine what language your app is in, (WCAG reference) (Language tag descriptions)

Example Lang Attribute:

<html lang="es">
...
</html>

Bonus - you can also use this attribute to have different CSS for different languages if you use CSS selector [lang="es"] or :lang(es)

Tip 4: Testing tips

  1. Test with your browser changed to a language. If your app accounts for browser language preference (which it should!), change the language of your browser and verify that the language shown changes. Instructions for changing your browser language You can also set up browser profiles (chrome instructions as an example) to make switching easy!
  2. Keep your app in another language as the default. Instead of changing from the most common language at your company to another one only when testing, flip the script and primarily keep your testing app in another language.
    a. you get better at a language!
    b. you'll start spotting small areas that weren't translated that you'd overlook when testing a singular place.
  3. For strings that can be any content (like people's names), test with wide words. In Arial, the widest letters are m and w, the shortest are l and i, with j, f, t, and f being close, so I often put in as many "W"s as are allowed.
  4. Test in Portuguese (if that is a supported language) to make sure your UI accounts for long phrases. Different phrases are different lengths in different languages, but I've found Portuguese to be regularly longer than English.
  5. Test with German (if that is a supported language) to make sure your UI accounts for long words. While I've found Portuguese to often be longer, German words have fewer spaces, which breaks reliance on word wrapping.
  6. Test with a Right-to-Left language, like Arabic, Hebrew, or Urdu (if you support a RTL language).