Skip to content

Commit 8d5de07

Browse files
WebCoder49WebCoder49
committed
Add internationalisation tests and support text bidirectionality
Works: - Rendering of left-to-right and right-to-left text, if the HTML dir attribute is set on the code-input element or a parent - Rendering of left-to-right or right-to-left text inside a block of opposite-directionality text - Consistent widths of bold text in Latin, Han, Arabic scripts in Librewolf (Firefox, Gecko), GNOME Web (Safari-like, Webkit) and Chromium (Chrome, Blink) on Wayland, KDE Plasma, EndeavourOS (Arch Linux) GNU/Linux Doesn't work: - Consistent widths of bold text in Hebrew, Hindi scripts in Librewolf and GNOME Web - does work in Chromium
1 parent 9beef37 commit 8d5de07

File tree

3 files changed

+130
-2
lines changed

3 files changed

+130
-2
lines changed

‎code-input.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ code-input textarea, code-input pre, code-input pre * {
6666
font-family: inherit!important;
6767
line-height: inherit!important;
6868
tab-size: inherit!important;
69+
text-align: inherit!important;
6970
}
7071

7172
code-input textarea, code-input pre {
@@ -182,4 +183,4 @@ code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(tex
182183
code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused):not(.code-input_pre-element-styled) pre code,
183184
code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused).code-input_pre-element-styled pre {
184185
padding-top: calc(var(--padding) + 3em)!important;
185-
}
186+
}

‎tests/i18n.html

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Right-to-left text!</title>
5+
6+
<meta charset="utf-8"/>
7+
8+
<!--Import Prism-->
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
10+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
11+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
12+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
13+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css">
14+
<script src="prism-match-braces-compatibility.js"></script>
15+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/match-braces/prism-match-braces.min.css">
16+
17+
<!--Import Highlight.JS-->
18+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
19+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
20+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/xml.min.js"></script>
21+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/css.min.js"></script>
22+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/javascript.min.js"></script>
23+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script>
24+
25+
26+
<!--Import code-input-->
27+
<link rel="stylesheet" href="../code-input.css">
28+
<script src="../code-input.js"></script>
29+
30+
<!--Import code-input plugins-->
31+
<script src="../plugins/auto-close-brackets.js"></script>
32+
<script src="../plugins/autocomplete.js"></script>
33+
<script src="../plugins/autodetect.js"></script>
34+
<link rel="stylesheet" href="../plugins/autocomplete.css">
35+
<script src="../plugins/find-and-replace.js"></script>
36+
<link rel="stylesheet" href="../plugins/find-and-replace.css">
37+
<script src="../plugins/go-to-line.js"></script>
38+
<link rel="stylesheet" href="../plugins/go-to-line.css">
39+
<script src="../plugins/indent.js"></script>
40+
<link rel="stylesheet" href="../plugins/prism-line-numbers.css">
41+
<script src="../plugins/select-token-callbacks.js"></script>
42+
<script src="../plugins/special-chars.js"></script>
43+
<link rel="stylesheet" href="../plugins/special-chars.css">
44+
45+
<!--Register templates-->
46+
<script>
47+
codeInput.registerTemplate("hljs", codeInput.templates.hljs(hljs, [
48+
/*new codeInput.plugins.AutoCloseBrackets(),
49+
new codeInput.plugins.Autocomplete(function(popupElem, textarea, selectionEnd) {
50+
if(textarea.value.substring(selectionEnd-5, selectionEnd) == "popup") {
51+
// Show popup
52+
popupElem.style.display = "block";
53+
popupElem.innerHTML = "Here's your popup!";
54+
} else {
55+
popupElem.style.display = "none";
56+
}
57+
}),
58+
new codeInput.plugins.Autodetect(),
59+
new codeInput.plugins.FindAndReplace(),
60+
new codeInput.plugins.GoToLine(),
61+
new codeInput.plugins.Indent(true, 2),
62+
new codeInput.plugins.SelectTokenCallbacks(codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks.createClassSynchronisation("in-selection"), false, true, true, true, true, false),
63+
new codeInput.plugins.SpecialChars(true),*/
64+
]));
65+
codeInput.registerTemplate("prism", codeInput.templates.prism(Prism, [
66+
/*new codeInput.plugins.AutoCloseBrackets(),
67+
new codeInput.plugins.Autocomplete(function(popupElem, textarea, selectionEnd) {
68+
if(textarea.value.substring(selectionEnd-5, selectionEnd) == "popup") {
69+
// Show popup
70+
popupElem.style.display = "block";
71+
popupElem.innerHTML = "Here's your popup!";
72+
} else {
73+
popupElem.style.display = "none";
74+
}
75+
}),
76+
new codeInput.plugins.FindAndReplace(),
77+
new codeInput.plugins.GoToLine(),
78+
new codeInput.plugins.Indent(true, 2),
79+
new codeInput.plugins.SelectTokenCallbacks(new codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks(selectBrace, deselectAllBraces), true),
80+
new codeInput.plugins.SpecialChars(true),*/
81+
]));
82+
</script>
83+
</head>
84+
<body>
85+
<textarea dir="rtl" placeholder="textarea rtl"></textarea>
86+
<textarea dir="ltr" placeholder="textarea ltr"></textarea>
87+
<code-input dir="rtl" template="prism" language="markdown" placeholder="prism rtl"></code-input>
88+
<code-input dir="ltr" template="prism" language="markdown" placeholder="prism ltr"></code-input>
89+
<code-input dir="rtl" template="hljs" language="markdown" placeholder="hljs rtl"></code-input>
90+
<code-input dir="ltr" template="hljs" language="markdown" placeholder="hljs ltr"></code-input>
91+
92+
<script>
93+
rtl = `# ערך מומלץ ערך מומלץ
94+
95+
**לוטרת** הים היא יונק ימי קטן יחסית, חבר במשפחת הסמורים, שחי לחופיו הצפוניים והמזרחיים של האוקיינוס השקט.
96+
97+
ההגנה מפני קור אצל לוטרת הים מבוססת על שכבה עבה של פרווה, שהיא מהצפופות בעולם החי,
98+
וזאת בשונה ממרבית היונקים הימיים הנסמכים על שכבת שומן. CC-BY-SA he.wikipedia.org אף שהיא מסוגלת להלך על היבשה, מבלה לוטרת הים את מרבית זמנה באוקיינוס הפתוח.
99+
100+
# مقالة اليوم المختارة
101+
102+
**الواقعية في الأدب الإسبا**ني هي حركة أدبية شكلت جزءًا من الواقعية، وهو تيار ثقافي ظهر في أوروبا في منتصف القرن التاسع عشر عقب اضمحلال اتجاهات الرومانسية.
103+
104+
ظهر سابقًا في فرنسا سنة 1850 حيث تطورت أصوله التي كانت موجودة بالفعل في الرومانسية، وخصوصًا في الأدب الذي يتناول العادات والتقاليد. CC-BY-SA ar.wikipedia.org التي كانت تعج بكل ما هو خيالي وجمالي خلاب، وعمدوا إلى الملاحظة الموضوعية للأشخاص والمجتمع والأحداث المعاصرة في محاولة منهم إلى تقديم صورة واضحة للمجتمع آنذاك.`;
105+
ltr = `# From today's featured article
106+
107+
CC-BY-SA en.wikipedia.org: History is the systematic study of the past with its main focus on the human past.
108+
109+
Historians analyse and interpret primary and secondary sources to construct narratives about what happened and explain why it happened. RTL: مقالة اليوم المختارة They engage in source criticism to assess the authenticity, content, and reliability of these sources.
110+
111+
# निर्वाचित लेख
112+
113+
CC-BY-SA hi.wikipedia.org: **ग्लेशियर नेशनल पार्क** अमेरिकी राष्ट्रीय उद्यान है, जो कि कनाडा-संयुक्त राज्य अमेरिका की सीमा पर स्थित है। उद्यान संयुक्त राज्य के उत्तर-पश्चिमी मोंटाना राज्य
114+
115+
में स्थित है और कनाडा की ओर अल्बर्टा और ब्रिटिश कोलम्बिया प्रांतों से सटा हुआ है। उद्यान दस लाख एकड़ RTL: ערך מומלץ ערך מומלץ (4,000 किमी2) से अधिक क्षेत्र में फैला हुआ है और इसमें दो पर्वत श्रृंखला (रॉकी पर्वत की उप-श्रेणियाँ), 130 से अधिक नामित झीलें...`;
116+
window.addEventListener("load", function() {
117+
118+
const elems = document.querySelectorAll("body > code-input, body > textarea");
119+
for(let i = 0; i < elems.length; i++) {
120+
let dir = elems[i].getAttribute("dir");
121+
if(dir == "rtl") elems[i].value = rtl;
122+
else elems[i].value = ltr;
123+
}
124+
});
125+
</script>
126+
</body>
127+
</html>

‎tests/prism.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,4 +51,4 @@ <h4><a href="hljs.html">Test for highlight.js</a></h4>
5151
beginTest(false);
5252
</script>
5353
</body>
54-
</html>
54+
</html>

0 commit comments

Comments
 (0)