Skip to content

Commit 8266240

Browse files
authored
simulate translated text size expansion (#585)
* fix #538: plugin for CT scan of <head> * expand-text
1 parent f5a3e5e commit 8266240

File tree

2 files changed

+159
-0
lines changed

2 files changed

+159
-0
lines changed

app/plugins/_registry.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { commands as remove_css_commands, description as remove_css_description,
1717
import { commands as detect_overflows_commands, description as detect_overflows_description, default as DetectOverflows } from './detect-overflows'
1818
import { commands as loop_thru_widths_commands, description as loop_thru_widths_description, default as LoopThruWidths } from './loop-through-widths'
1919
import { commands as placeholdifier_commands, description as placeholdifier_description, default as PlaceholdifierPlugin } from './placeholdifier'
20+
import { commands as expand_text_commands, description as expand_text_description, default as ExpandTextPlugin } from './expand-text'
2021

2122
const commandsToHash = (plugin_commands, plugin_fn) =>
2223
plugin_commands.reduce((commands, command) =>
@@ -43,6 +44,7 @@ export const PluginRegistry = new Map(Object.entries({
4344
...commandsToHash(detect_overflows_commands, DetectOverflows),
4445
...commandsToHash(loop_thru_widths_commands, LoopThruWidths),
4546
...commandsToHash(placeholdifier_commands, PlaceholdifierPlugin),
47+
...commandsToHash(expand_text_commands, ExpandTextPlugin),
4648
}))
4749

4850
export const PluginHints = [
@@ -64,6 +66,7 @@ export const PluginHints = [
6466
{command: detect_overflows_commands[0], description: detect_overflows_description},
6567
{command: loop_thru_widths_commands[0], description: loop_thru_widths_description},
6668
{command: placeholdifier_commands[0], description: placeholdifier_description},
69+
{command: expand_text_commands[0], description: expand_text_description},
6770
...colorblind_commands.map(cbc => {
6871
return {
6972
command: cbc, description: `simulate ${cbc}`

app/plugins/expand-text.js

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
export const commands = [
2+
'expand-text',
3+
]
4+
5+
export const description = 'simulate translated text expansion based on a w3.org table'
6+
7+
export default async function() {
8+
const settings = {
9+
expanded: true,
10+
predictableMode: false,
11+
};
12+
13+
const accents = "̟́";
14+
15+
console.log(
16+
"Reference expansion table: https://www.w3.org/International/articles/article-text-size"
17+
);
18+
19+
alert(
20+
'Click on the page, then: \n\nhit the Ctrl key to toggle translation size expansion, or \n\nhit the Shift key to toggle random insertion of spaces.'
21+
);
22+
23+
englishToExpectedEuropeanLanguageExpansionSize();
24+
25+
document.body.addEventListener("keydown", function (event) {
26+
if (event.ctrlKey) {
27+
settings.expanded = !settings.expanded;
28+
if (settings.expanded) {
29+
englishToExpectedEuropeanLanguageExpansionSize();
30+
} else {
31+
backToEnglishSize();
32+
}
33+
} else if (event.shiftKey) {
34+
settings.predictableMode = !settings.predictableMode;
35+
if (settings.predictableMode) {
36+
alert("Spaces will NOT be randomly included.");
37+
} else {
38+
alert("Spaces WILL be randomly included.");
39+
}
40+
}
41+
});
42+
43+
function englishToExpectedEuropeanLanguageExpansionSize() {
44+
const elementsWithText = [...document.querySelectorAll("body *")]
45+
.filter((el) => hasText(el))
46+
.reverse();
47+
elementsWithText.forEach((el) => setExpandedSizeText(el));
48+
}
49+
50+
function backToEnglishSize() {
51+
const elementsWithText = [...document.querySelectorAll("body *")]
52+
.filter((el) => hasText(el))
53+
.reverse();
54+
elementsWithText.forEach((el) => setEnglishSizeText(el));
55+
}
56+
57+
function hasText(element) {
58+
return (
59+
element.innerText && element.innerText.trim() && hasChildTextNode(element)
60+
);
61+
}
62+
63+
function hasChildTextNode(element) {
64+
return [...element.childNodes].some((n) => n.nodeType === Node.TEXT_NODE);
65+
}
66+
67+
function setEnglishSizeText(element) {
68+
const elementData = element.getAttribute(
69+
"data-englishToExpectedEuropeanLanguageExpansionSize"
70+
);
71+
if (elementData) {
72+
const originalLength = JSON.parse(elementData).originalLength;
73+
const expandedLength = JSON.parse(elementData).expandedLength;
74+
const difference = expandedLength - originalLength;
75+
const multiplier = 1 + accents.length;
76+
element.innerHTML = element.innerHTML.slice(0, -difference * multiplier);
77+
}
78+
}
79+
80+
function setExpandedSizeText(element) {
81+
const elementData = element.getAttribute(
82+
"data-englishToExpectedEuropeanLanguageExpansionSize"
83+
);
84+
const alreadyExpanded =
85+
elementData ||
86+
element.querySelectorAll(
87+
"[data-englishToExpectedEuropeanLanguageExpansionSize]"
88+
).length;
89+
if (alreadyExpanded) {
90+
if (
91+
element.hasAttribute(
92+
"data-englishToExpectedEuropeanLanguageExpansionSize"
93+
)
94+
) {
95+
const originalLength = JSON.parse(elementData).originalLength;
96+
const expandedLength = JSON.parse(elementData).expandedLength;
97+
element.innerHTML = element.innerHTML.slice(0, originalLength);
98+
element.innerHTML += getExpandedString(expandedLength - originalLength);
99+
}
100+
} else {
101+
const originalHtmlLength = element.innerHTML.length;
102+
const originalLength = element.innerText.trim().length;
103+
const expandedLength = useExpansionTable(element.innerText.trim());
104+
const difference = expandedLength - originalLength;
105+
element.innerHTML += getExpandedString(difference);
106+
const data = {
107+
originalLength: originalHtmlLength,
108+
expandedLength: originalHtmlLength + difference,
109+
};
110+
element.setAttribute(
111+
"data-englishToExpectedEuropeanLanguageExpansionSize",
112+
JSON.stringify(data)
113+
);
114+
}
115+
}
116+
117+
function useExpansionTable(englishText) {
118+
let expandedLength = englishText.length;
119+
if (englishText.length <= 10) {
120+
expandedLength = englishText.length * 3;
121+
} else if (englishText.length <= 20) {
122+
expandedLength = englishText.length * 2;
123+
} else if (englishText.length <= 30) {
124+
expandedLength = englishText.length * 1.8;
125+
} else if (englishText.length <= 50) {
126+
expandedLength = englishText.length * 1.6;
127+
} else if (englishText.length <= 70) {
128+
expandedLength = englishText.length * 1.7;
129+
} else if (englishText.length > 70) {
130+
expandedLength = englishText.length * 1.3;
131+
}
132+
return Math.ceil(expandedLength);
133+
}
134+
135+
function getExpandedString(length) {
136+
let output = "";
137+
const abc = "abcdefghijklmnopqrstuvwxyz";
138+
const chanceOfSpace = settings.predictableMode ? 0 : 0.1;
139+
let i = 0;
140+
while (i < length) {
141+
const notLastCharacter = i < length - 1;
142+
const precededBySpace = i > 0 && output[i - 1] === " ";
143+
if (
144+
notLastCharacter &&
145+
!precededBySpace &&
146+
Math.random() >= 1 - chanceOfSpace
147+
) {
148+
output += " " + accents;
149+
} else {
150+
output += abc[i % 26] + accents;
151+
}
152+
i++;
153+
}
154+
return output;
155+
}
156+
}

0 commit comments

Comments
 (0)