Test with a pseudo-locale

How to do it

Generate the pseudo-locale from the default messages. Swap letters for accented ones, add about 40% extra length, and wrap each text in brackets. Run the browser tests at phone width in this locale. Text without brackets is not in the message file, and cut or overlapping text shows where the layout cannot grow. Catch the breaks with Compare screenshots of every component state.

Examples

JavaScript example

const ACCENTED = { a: 'á', e: 'é', i: 'í', o: 'ö', u: 'ü', A: 'Å', E: 'É', O: 'Ö' };
const EXTRA_LENGTH = 0.4;
const pseudo = text => {
  const accented = text.replace(/\{[^}]*\}|./g, c => (c.length > 1 ? c : ACCENTED[c] ?? c));
  return `[${accented}${'~'.repeat(Math.ceil(text.length * EXTRA_LENGTH))}]`;
};
pseudo('Book a call {name}'); // "[Böök á cáll {name}~~~~~~~~]"

Python example

import math
import re
ACCENTED = str.maketrans("aeiouAEO", "áéíöüÅÉÖ")
EXTRA_LENGTH = 0.4
def pseudo(text: str) -> str:
    parts = re.split(r"(\{[^}]*\})", text)
    accented = "".join(p if p.startswith("{") else p.translate(ACCENTED) for p in parts)
    return f"[{accented}{'~' * math.ceil(len(text) * EXTRA_LENGTH)}]"

How to check

The browser tests pass in the pseudo-locale. A test finds no visible text node without the brackets, and no element that scrolls sideways.

Sources

• Microsoft Learn: Pseudolocalization

Related rules

• LOC-21 Give translators context and a review step in Localization
• LOC-30 Let every layout grow with the longest translation in Localization
• APP-55 Compare screenshots of every component state in Web app interface