I18n Safe UI Text Management

In i18n world, long text and flexible UI that can handle it is a major task that almost every companies and products are facing and need to resolve.

For the web, there are already so many good solutions, and most them provide high quality.

Here I have done some CSS and JS works that resolves various UI overflow and truncation problems.

Text Wrapping

With CSS, this is simply manageable.

.overflow {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

Quick React demo app is here. Test with one of the longest German word – Kraftfahrzeughaftpflichtversicherung. Also mixed with HTML tags and one of common HTML entity –  .

With the hyphens: auto;, there are few important issues that we need to remember for better internationalization. By using hyphens, wether we use auto or manual, adding ­ at the middle of word, it will make hyphen when the word is being wrapped.

Also, as i18n engineer, when you consider to use the hyphens: auto, you have to follow one of the i18n basic – lang=xx in the DOM. Without it, browsers and assistive technology can only guess the website’s language leading to a poor user experience.

Dynamic Font Resizing

Text wrapping is mostly for the UIs that displays contents. For the specific UI components like buttons, input labels, badges or navigation menus are still need special treatment – resizing font size.

Detecting overflow of a text is important part to resize the font size, and this can be done via DOM scrollHeight(https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight) and clientHeight(https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight).

const isOverflow = (element) => {
  return element.scrollHeight > element.clientHeight ? true : false;
};

Once the overflow is detected, simply start reducing or increase the font size until the whole text fits in the parent component.

Truncate Text With CSS

Not all UI components(buttons, input labels, badges or navigation menus) works with the text wrapping or dynamic font resizing for every possibly single languages.

Truncation is the pretty efficient solution and vary last solution. Again with simple CSS, this can be easily done.

.csstruncation {
  text-overflow: ellipsis;
}

However, this is not really recommended, since it simply truncates the text based on whether it is overflowing or not. It does not consider the position at which the string should be truncated.

Truncate Text with Javascript Based on Word Boundary

There are two crucial aspects to consider when truncating text. First, it is important to communicate the intended message of the text while preserving a positive user experience. Second, users should be aware that the text continues beyond the ellipsis. To convey the message effectively, it is essential to keep words intact and truncate around their boundaries, indicating that the text continues. This is why employing a utility function proves more effective than relying solely on CSS. Word boundaries can be recognized and truncated using regular expressions or by identifying whitespace between words in various ways.

Math.min(truncated.length, truncated.lastIndexOf(" "));

Truncate Text with Word Boundary, then Dynamically Resizing Font

The i18n safe truncation employs dynamic font resizing to minimize the size of long text while ensuring readability without introducing line breaks. By applying truncation on a word boundary basis, we aim to achieve optimal UI design and enhance user experience across multiple languages. We consider this approach to be the most effective in achieving the desired results.