Multilingual support

Designing for translations

Different languages have varying word lengths and sentence structures. For instance, a phrase in English might be longer in German but shorter in Chinese.

When translating English into other languages, the text often needs more space. However, it's important to note that shorter English messages tend to have a proportionally larger increase in length when translated.

The following are average expected expansion rates for text translated from English into European languages

No. of characters in English source Average expansion
Up to 10 200–300%
11–20 180–200%
21–30 160–180%
31–50 140–160%
51–70 151-170%
Over 70 130%
Source: https://www.w3.org/International/articles/article-text-size.en

Compound nouns are words formed from two or more words that function as a single unit of meaning. They are common in many languages, notably in German, where they can be quite long. The challenge in translations and user interface (UI) design is ensuring that these compound nouns are accurately translated and fit well within the UI elements without disrupting the layout or readability

Dynamic Text Resizing

BAgel typography styles are not linked to specific html tags. This means that it is possible to implement dynamic text resizing where the font size adjusts based on the length of the word. This approach can help accommodate longer compound nouns without requiring additional space.

Breaking Compound Nouns

In some cases, especially in German, it might be possible to break down a compound noun into shorter segments with spaces or hyphens. This approach, however, should be used cautiously and in consultation with native speakers to ensure the meaning is not altered.

The syntax and structure of sentences can vary significantly between languages, affecting how information is presented and understood. Collaborate with translators or localisation experts from the beginning of the design process to identify and address potential issues with word order.

Design system supplied text

Some components come with built-in text, including but not limited to:

  • Alternative text for images and icons
  • Visually hidden text for assistive technologies
  • Input validation messages

Supported languages

Design system supplied text is provided in the following languages:

  • English - en (Default)
  • Chinese - zh
  • Korean - ko
  • Japanese - ja
  • French - fr
  • Spanish - es
  • Italian - it
  • Portuguese - pt
  • German - de
  • Russian - ru
  • Polish - pl

Components default to English if a language isn't supported

GitHub Storybook Figma library Version 3 release guide Release history BAgel helper QA process