pseudo-localization - npm Package Compare versions

Comparing version 1.1.2 to 1.1.4

index.js

 const pseudoLocalization = (() => {
-  const map = {
-    a: "àáâãäåāăąǻȁȃ",
-    A: "ÀÁÂÃÄÅĀĂĄǺȀȂ",
-    b: "ƀƂƃƄƅɓ",
-    B: "ßƁɃʙβ",
-    c: "çćĉċč",
-    C: "ÇĆĈĊČ",
-    d: "ďđðδ",
-    D: "ĎĐƉƊ",
-    e: "èēĕėęěȅȇ",
-    E: "ĒĔĖĘĚȄȆÉ",
+  const ACCENTED_MAP = {
+    a: "ȧ",
+    A: "Ȧ",
+    b: "ƀ",
+    B: "Ɓ",
+    c: "ƈ",
+    C: "Ƈ",
+    d: "ḓ",
+    D: "Ḓ",
+    e: "ḗ",
+    E: "Ḗ",
     f: "ƒ",
     F: "Ƒ",
-    g: "ĝğġģϱ",
-    G: "ĜĞĠĢ",
-    h: "ĥħλ",
-    H: "ĤĦ",
-    I: "ĨĪĬĮİÍ",
-    i: "ĩīĭįıï",
-    J: "ĵ",
-    j: "Ĵ",
-    K: "ĶƘϏ",
-    k: "ķĸƙ",
-    l: "ĺļľŀłℓ",
-    L: "ĹĻĽĿŁ£",
-    m: "₥",
-    N: "ŃŅŇŊƝ",
-    n: "ńņňʼnŋƞกี้ñ",
-    o: "ōŏőơô",
-    O: "ŌŎŐƠÓ",
+    g: "ɠ",
+    G: "Ɠ",
+    h: "ħ",
+    H: "Ħ",
+    i: "ī",
+    I: "Ī",
+    j: "ĵ",
+    J: "Ĵ",
+    k: "ķ",
+    K: "Ķ",
+    l: "ŀ",
+    L: "Ŀ",
+    m: "ḿ",
+    M: "Ḿ",
+    n: "ƞ",
+    N: "Ƞ",
+    o: "ǿ",
+    O: "Ǿ",
+    p: "ƥ",
     P: "Ƥ",
-    p: "ƥƿþ",
-    Q: "ǪǬ",
-    q: "ǫǭɋ",
-    r: "ŕŗř",
-    R: "ŔŖŘƦ",
-    S: "ŚŜŞŠ§",
-    s: "śŝşšȿƨ",
-    T: "ŢŤŦ",
-    t: "ţťŧƭ†",
-    v: "ѷƲ",
-    U: "ŨŪŬŮŰŲÛ",
-    u: "ũūŭůűųม้ú",
-    w: "ŵผึ้",
-    W: "Ŵ",
-    Y: "ŶŸƳȲɎ¥ÝⓎ",
-    y: "ŷƴȳɏ",
-    Z: "ŹŻŽƵ",
-    z: "źżžƶ"
+    q: "ɋ",
+    Q: "Ɋ",
+    r: "ř",
+    R: "Ř",
+    s: "ş",
+    S: "Ş",
+    t: "ŧ",
+    T: "Ŧ",
+    v: "ṽ",
+    V: "Ṽ",
+    u: "ŭ",
+    U: "Ŭ",
+    w: "ẇ",
+    W: "Ẇ",
+    x: "ẋ",
+    X: "Ẋ",
+    y: "ẏ",
+    Y: "Ẏ",
+    z: "ẑ",
+    Z: "Ẑ"
   };
 
-  const explosionSymbols = [
-    "one",
-    "two",
-    "three",
-    "four",
-    "five",
-    "six",
-    "seven",
-    "eight",
-    "nine",
-    "ten"
-  ];
+  const BIDI_MAP = {
+    a: "ɐ",
+    A: "∀",
+    b: "q",
+    B: "Ԑ",
+    c: "ɔ",
+    C: "Ↄ",
+    d: "p",
+    D: "ᗡ",
+    e: "ǝ",
+    E: "Ǝ",
+    f: "ɟ",
+    F: "Ⅎ",
+    g: "ƃ",
+    G: "⅁",
+    h: "ɥ",
+    H: "H",
+    i: "ı",
+    I: "I",
+    j: "ɾ",
+    J: "ſ",
+    k: "ʞ",
+    K: "Ӽ",
+    l: "ʅ",
+    L: "⅂",
+    m: "ɯ",
+    M: "W",
+    n: "u",
+    N: "N",
+    o: "o",
+    O: "O",
+    p: "d",
+    P: "Ԁ",
+    q: "b",
+    Q: "Ò",
+    r: "ɹ",
+    R: "ᴚ",
+    s: "s",
+    S: "S",
+    t: "ʇ",
+    T: "⊥",
+    u: "n",
+    U: "∩",
+    v: "ʌ",
+    V: "Ʌ",
+    w: "ʍ",
+    W: "M",
+    x: "x",
+    X: "X",
+    y: "ʎ",
+    Y: "⅄",
+    z: "z",
+    Z: "Z"
+  };
 
+  let opts = {
+    prefix: "",
+    postfix: "",
+    map: ACCENTED_MAP,
+    elongate: true
+  };
+
   const textNodesUnder = element => {
@@ -86,17 +139,22 @@ const walker = document.createTreeWalker(
     for (let character of string) {
-      if (map[character]) {
-        pseudoLocalizedText +=
-          map[character][Math.floor(Math.random() * map[character].length)];
+      if (opts.map[character]) {
+        const cl = character.toLowerCase();
+        // duplicate "a", "e", "o" and "u" to emulate ~30% longer text
+        if (
+          opts.elongate &&
+          (cl === "a" || cl === "e" || cl === "o" || cl === "u")
+        ) {
+          pseudoLocalizedText += opts.map[character] + opts.map[character];
+        } else pseudoLocalizedText += opts.map[character];
       } else pseudoLocalizedText += character;
     }
 
-    const explodeRatio = 1.4;
-    // Trim strings to prevent whitespace from increasing the explosion amount
-    const explodedTextLength = Math.ceil(string.trim().length * explodeRatio);
-    let i = 0;
-    while (pseudoLocalizedText.trim().length < explodedTextLength) {
-      pseudoLocalizedText += " " + explosionSymbols[i++];
+    // If this string is from the DOM, it should already contain the pre- and postfix.
+    if (
+      pseudoLocalizedText.startsWith(opts.prefix) &&
+      pseudoLocalizedText.endsWith(opts.postfix)
+    ) {
+      return pseudoLocalizedText;
     }
-
-    return "[" + pseudoLocalizedText + "]";
+    return opts.prefix + pseudoLocalizedText + opts.postfix;
   };
@@ -143,3 +201,12 @@
 
-  const start = () => {
+  const start = (options = { strategy: "accented" }) => {
+    if (options.strategy === "bidi") {
+      // Surround words with Unicode formatting marks forcing
+      // the RTL directionality of characters.
+      opts.prefix = "\u202e";
+      opts.postfix = "\u202c";
+      opts.map = BIDI_MAP;
+      opts.elongate = false;
+    }
+
     pseudoLocalize(document.body);
@@ -146,0 +213,0 @@ observer.observe(document.body, observerConfig);

package.json

 {
   "name": "pseudo-localization",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "Dynamic pseudo-localization in the browser",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -1,2 +0,2 @@
-<sub>Inspired by https://medium.com/netflix-techblog/pseudo-localization-netflix-12fff76fbcbe</sub>
+<sub>Inspired by pseudo-localization at [Netflix](https://medium.com/netflix-techblog/pseudo-localization-netflix-12fff76fbcbe) and [Firefox](https://reviewboard.mozilla.org/r/248606/diff/2#index_header)</sub>
 
@@ -7,3 +7,3 @@ # pseudo-localization
 | ------------- | ------------- |
-| <img width="559" alt="screen shot 2018-08-12 at 1 23 18 pm" src="https://user-images.githubusercontent.com/2373958/44001651-21f32b42-9e36-11e8-80eb-5b88e8fd9b13.png"> | <img width="661" alt="after" src="https://user-images.githubusercontent.com/2373958/44001656-2fba7780-9e36-11e8-8924-69c849a3b48c.png"> |
+| <img width="559" alt="screen shot 2018-08-12 at 1 23 18 pm" src="https://user-images.githubusercontent.com/2373958/44001651-21f32b42-9e36-11e8-80eb-5b88e8fd9b13.png"> | <img width="661" alt="after" src="https://user-images.githubusercontent.com/2373958/44311352-2a29fb00-a3e6-11e8-88ed-5485697f7a40.png"> |
 
@@ -27,3 +27,3 @@ ---
 
-## Usage
+# Usage
 
@@ -66,3 +66,3 @@ ### import or require the npm module
        <PseudoLocalization />
-       <h1>I will get pseudo localizad along with everything else under document.body!</h1>
+       <h1>I will get pseudo localized along with everything else under document.body!</h1>
       <main>
@@ -74,2 +74,34 @@ );
 
+## Strategies
+`pseudo-localization` supports two strategies:
+
+1. accented
+2. bidi
+
+### accented - Ȧȧƈƈḗḗƞŧḗḗḓ Ḗḗƞɠŀīīşħ
+
+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.
+
+<img width="622" alt="screen shot 2018-08-19 at 18 48 29" src="https://user-images.githubusercontent.com/2373958/44311259-62303e80-a3e4-11e8-884a-54c77416b922.png">
+
+
+### bidi - ɥsıʅƃuƎ ıpıԐ
+
+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.
+
+<img width="602" alt="screen shot 2018-08-19 at 18 45 49" src="https://user-images.githubusercontent.com/2373958/44311263-770cd200-a3e4-11e8-97e4-9a1896bd5975.png">
+
+
 ## Why?
@@ -76,0 +108,0 @@ To catch localization problems like:

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

389229

increased by0.98%

Number of package files

5

increased by25%

Lines of code

210

increased by45.83%

Number of lines in readme file

113

increased by39.51%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes