handling UI distortion caused by localization

We have a web client for our product with translations in 3 languages: English, French and German. This web client has a way to send emails to one of 3 different target groups: All connected users (currently logged in), all users, specific user group (all users in a freely selectable group). These are done through 3 radio buttons on the same line.

The problem is that our form looks nicely lined out when using English as the language, but when using French and to a lesser extent German, we run into problems with our radio button labels extending far beyond the right edge of our other controls, meaning a distorted form background. Apart from looking ugly, this also makes the UI look inconsistent when switching from one language to another. This is caused by the word for user being a lot longer in French (Utilisateur) and somewhat longer in German (Benützer).

All solutions I can think of either don't fix distortion or impact usability:

  • Editing the dimensions of the other fields to fit the French length just makes it so the other languages look weirder;
  • Placing French and German on 2 lines is again not consistent, but for the line height;
  • Placing all messages on 2 lines distorts the line height on the form. in addition, the horizontal width also remains inconsistent.
  • Changing this to a dropdown would solve most dimension-related issues, but also leads to extra clicks to choose the right value.

What is the best way to handle this?

Tags: