Inspired by pseudo-localization at Netflix and Firefox
English | Pseudo Language |
---|---|
pseudo-localization
is a script that performs pseudolocalization against the DOM.
Demo here. Changing text nodes and adding or removing trees of elements will trigger a pseudolocalization run on all the new text added to the DOM. Try it using the devtools.
npm install pseudo-localization
Copy paste the script in it's entirty from here and use as you wish.
pseudo-localization
is just a script and can be invoked like so:
const pseudoLocalization = require('pseudo-localization');
pseudoLocalization.start();
// Later, if needed
pseudoLocalization.stop();
To use pseudo-localization
in React, Vue, Ember or anything else, hook the start
and stop
methods into your libraries
component lifecycles. In React for example:
import React from 'react';
import pseudoLocalization from 'pseudo-localization';
class PseudoLocalization extends React.Component {
componentDidMount() {
pseudoLocalization.start();
}
componentWillUnmount() {
pseudoLocalization.stop();
}
}
// And use it
class Page extends React.Component {
render() {
return (
<main>
<PseudoLocalization />
<h1>I will get pseudo localized along with everything else under document.body!</h1>
<main>
);
}
}
pseudo-localization
supports two strategies:
- accented
- bidi
Usage: pseudoLocalization.start({ strategy: 'accented' });
or simply pseudoLocalization.start();
.
In Accented English all Latin letters are replaced by accented Unicode counterparts which don't impair the readability of the content. This allows developers to quickly test if any given string is being correctly displayed in its 'translated' form. Additionally, simple heuristics are used to make certain words longer to better simulate the experience of international users.
Usage: pseudoLocalization.start({ strategy: 'bidi' });
.
Bidi English is a fake RTL locale. All words are surrounded by Unicode formatting marks forcing the RTL directionality of characters. In addition, to make the reversed text easier to read, individual letters are flipped.
To catch localization problems like:
- Translated text that is significantly longer than the source language, and does not fit within the UI constraints, or which causes text breaks at awkward positions.
- Font glyphs that are significantly larger than, or possess diacritic marks not found in, the source language, and which may be cut off vertically.
- Languages for which the reading order is not left-to-right, which is especially problematic for user input.
- Application code that assumes all characters fit into a limited character set, such as ASCII or ANSI, which can produce actual logic bugs if left uncaught.
Works in all evergreen browsers.