Enforce language (#1344)

* Assign text content and a language

* Remove _appendMultilineText

* Assign lang for createTextNode content

* Add language attributes to HTML pages

6 files changed, 60 insertions, 47 deletions

diff --git a/ext/bg/pitch-accents-preview.html b/ext/bg/pitch-accents-preview.html
index b449222b..e22122c2 100644
--- a/ext/bg/pitch-accents-preview.html
+++ b/ext/bg/pitch-accents-preview.html
@@ -21,7 +21,7 @@
 <ul>
     <li>
         <strong>Downstep notation</strong> -
-        <span class="format-preview">
+        <span class="format-preview" lang="ja">
             <span class="term-pitch-accent-characters"><span class="term-pitch-accent-character" data-position="0" data-pitch="high" data-pitch-next="low"><span class="term-pitch-accent-character-inner">よ</span></span><span class="term-pitch-accent-character" data-position="1" data-pitch="low" data-pitch-next="low"><span class="term-pitch-accent-character-inner">む</span></span></span>
         </span>
     </li>
diff --git a/ext/bg/popup-preview.html b/ext/bg/popup-preview.html
index d8855946..d0bf77d3 100644
--- a/ext/bg/popup-preview.html
+++ b/ext/bg/popup-preview.html
@@ -20,7 +20,7 @@
     <div class="top-options">
         <div class="top-options-left">
             <div class="example-text-container">
-                <input type="text" class="example-text example-text-input" id="example-text-input" value="読め" hidden>
+                <input type="text" class="example-text example-text-input" id="example-text-input" value="読め" lang="ja" hidden>
                 <span class="example-text" id="example-text">読め</span>
             </div>
         </div>
diff --git a/ext/bg/search.html b/ext/bg/search.html
index 4537fb85..40c1ef45 100644
--- a/ext/bg/search.html
+++ b/ext/bg/search.html
@@ -46,7 +46,7 @@
                             </div>
                         </div>
                         <div class="search-textbox-container">
-                            <textarea id="search-textbox" placeholder="Input a term, expression, sentence, or block of text" autocomplete="off" autofocus></textarea>
+                            <textarea id="search-textbox" placeholder="Input a term, expression, sentence, or block of text" autocomplete="off" lang="ja" autofocus></textarea>
                             <button id="search-button"><span class="icon" data-icon="magnifying-glass"></span></button>
                         </div>
                     </div>
diff --git a/ext/bg/settings2.html b/ext/bg/settings2.html
index ba862b45..edaa90af 100644
--- a/ext/bg/settings2.html
+++ b/ext/bg/settings2.html
@@ -1179,7 +1179,7 @@
                 <div class="settings-item-description">Change what type of furigana is displayed for parsed text.</div>
             </div>
             <div class="settings-item-right">
-                <select data-setting="parsing.readingMode">
+                <select data-setting="parsing.readingMode" lang="ja">
                     <option value="none">None</option>
                     <option value="hiragana">ひらがな</option>
                     <option value="katakana">カタカナ</option>
@@ -1281,7 +1281,7 @@
         <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
             <div class="settings-item-left">
                 <div class="settings-item-label">Convert half width characters to full width</div>
-                <div class="settings-item-description">ﾖﾐﾁｬﾝ&#x3000;&rarr;&#x3000;ヨミチャン</div>
+                <div class="settings-item-description" lang="ja">ﾖﾐﾁｬﾝ&#x3000;&rarr;&#x3000;ヨミチャン</div>
             </div>
             <div class="settings-item-right">
                 <select data-setting="translation.convertHalfWidthCharacters">
@@ -1294,7 +1294,7 @@
         <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
             <div class="settings-item-left">
                 <div class="settings-item-label">Convert numeric characters to full width</div>
-                <div class="settings-item-description">1234&#x3000;&rarr;&#x3000;１２３４</div>
+                <div class="settings-item-description" lang="ja">1234&#x3000;&rarr;&#x3000;１２３４</div>
             </div>
             <div class="settings-item-right">
                 <select data-setting="translation.convertNumericCharacters">
@@ -1307,7 +1307,7 @@
         <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
             <div class="settings-item-left">
                 <div class="settings-item-label">Convert alphabetic characters to hiragana</div>
-                <div class="settings-item-description">yomichan&#x3000;&rarr;&#x3000;よみちゃん</div>
+                <div class="settings-item-description" lang="ja">yomichan&#x3000;&rarr;&#x3000;よみちゃん</div>
             </div>
             <div class="settings-item-right">
                 <select data-setting="translation.convertAlphabeticCharacters">
@@ -1320,7 +1320,7 @@
         <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
             <div class="settings-item-left">
                 <div class="settings-item-label">Convert hiragana to katakana</div>
-                <div class="settings-item-description">よみちゃん&#x3000;&rarr;&#x3000;ヨミチャン</div>
+                <div class="settings-item-description" lang="ja">よみちゃん&#x3000;&rarr;&#x3000;ヨミチャン</div>
             </div>
             <div class="settings-item-right">
                 <select data-setting="translation.convertHiraganaToKatakana">
@@ -1333,7 +1333,7 @@
         <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
             <div class="settings-item-left">
                 <div class="settings-item-label">Convert katakana to hiragana</div>
-                <div class="settings-item-description">ヨミチャン&#x3000;&rarr;&#x3000;よみちゃん</div>
+                <div class="settings-item-description" lang="ja">ヨミチャン&#x3000;&rarr;&#x3000;よみちゃん</div>
             </div>
             <div class="settings-item-right">
                 <select data-setting="translation.convertKatakanaToHiragana">
@@ -1346,7 +1346,7 @@
         <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
             <div class="settings-item-left">
                 <div class="settings-item-label">Collapse emphatic character sequences</div>
-                <div class="settings-item-description">すっっごーーい&#x3000;&rarr;&#x3000;すっごーい / すごい</div>
+                <div class="settings-item-description" lang="ja">すっっごーーい&#x3000;&rarr;&#x3000;すっごーい / すごい</div>
             </div>
             <div class="settings-item-right">
                 <select data-setting="translation.collapseEmphaticSequences">
@@ -2228,7 +2228,7 @@
                     Change which voice is used for text-to-speech audio playback.
                 </p>
                 <div class="horizontal-flex">
-                    <input type="text" value="よみちゃん" id="text-to-speech-voice-test-text" autocomplete="off">
+                    <input type="text" value="よみちゃん" id="text-to-speech-voice-test-text" autocomplete="off" lang="ja">
                     <button id="text-to-speech-voice-test">Test</button>
                     <a class="more-toggle" data-parent-distance="3">Hide&hellip;</a>
                 </div>
@@ -2770,7 +2770,7 @@
                 <div class="anki-card-templates-test-table-header">Scanned text</div>
                 <div class="anki-card-templates-test-table-header">Card field</div>
                 <div></div>
-                <input type="text" id="anki-card-templates-test-text-input" class="form-control" value="読め" placeholder="Preview text" autocomplete="off">
+                <input type="text" id="anki-card-templates-test-text-input" class="form-control" value="読め" placeholder="Preview text" autocomplete="off" lang="ja">
                 <div class="anki-card-templates-test-input-container">
                     <input type="text" class="input-with-suffix-button" id="anki-card-templates-test-field-input" value="{expression}" placeholder="{marker}" autocomplete="off" spellcheck="false">
                     <button class="input-suffix-button input-suffix-icon-button" id="anki-card-templates-test-field-menu-button" data-menu="anki-card-all-field-menu" data-menu-position="below left"><span class="icon icon-button-icon-light" data-icon="material-down-arrow"></span></button>
@@ -2926,9 +2926,9 @@
 
     <div class="translation-text-replacement-test-label translation-text-replacement-test-node">Test Input:</div>
     <div class="translation-text-replacement-test-container translation-text-replacement-test-node">
-        <input type="text" class="translation-text-replacement-test-input">
+        <input type="text" class="translation-text-replacement-test-input" lang="ja">
         <div class="translation-text-replacement-test-label-inner">Output:</div>
-        <input type="text" class="translation-text-replacement-test-output" readonly>
+        <input type="text" class="translation-text-replacement-test-output" lang="ja" readonly>
     </div>
 </div></template>
 
@@ -2991,10 +2991,10 @@
         </select>
     </td>
     <td>
-        <input type="text" class="sentence-termination-character-input1" maxlength="1">
+        <input type="text" class="sentence-termination-character-input1" maxlength="1" lang="ja">
     </td>
     <td>
-        <input type="text" class="sentence-termination-character-input2" maxlength="1">
+        <input type="text" class="sentence-termination-character-input2" maxlength="1" lang="ja">
         <div class="sentence-termination-character-input2-alt">&mdash;</div>
     </td>
     <td>
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index e13d8f91..6e250aa5 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -1000,6 +1000,9 @@ button.action-button[data-icon=source-term]::before {
 .term-glossary-item::marker {
     color: var(--text-color-light3);
 }
+.term-glossary {
+    white-space: pre-line;
+}
 .term-definition-disambiguation-list {
     color: var(--text-color-light3);
 }
@@ -1337,6 +1340,9 @@ button.action-button[data-icon=source-term]::before {
 .term-glossary-image-link-text::after {
     content: ']';
 }
+.term-glossary-image-description {
+    white-space: pre-line;
+}
 
 
 /* Kanji */
@@ -1398,6 +1404,9 @@ button.action-button[data-icon=source-term]::before {
 .kanji-glossary-item::marker {
     color: var(--text-color-light3);
 }
+.kanji-glossary {
+    white-space: pre-line;
+}
 
 
 /* Progress bar */
diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js
index 70cbcf13..05376ee5 100644
--- a/ext/mixed/js/display-generator.js
+++ b/ext/mixed/js/display-generator.js
@@ -130,7 +130,7 @@ class DisplayGenerator {
         const codepointsContainer = node.querySelector('.kanji-codepoints');
         const dictionaryIndicesContainer = node.querySelector('.kanji-dictionary-indices');
 
-        glyphContainer.textContent = details.character;
+        this._setTextContent(glyphContainer, details.character, 'ja');
         const groupedFrequencies = DictionaryDataUtil.groupKanjiFrequencies(details.frequencies);
 
         const dictionaryTag = this._createDictionaryTag(details.dictionary);
@@ -157,7 +157,7 @@ class DisplayGenerator {
         const node = this._templates.instantiateFragment('footer-notification-tag-details');
 
         const details = tagNode.dataset.details;
-        node.querySelector('.tag-details').textContent = details;
+        this._setTextContent(node.querySelector('.tag-details'), details);
 
         let disambiguation = null;
         try {
@@ -182,6 +182,7 @@ class DisplayGenerator {
                 const segments = this._japaneseUtil.distributeFurigana(expression, reading);
                 const disambiguationItem = document.createElement('span');
                 disambiguationItem.className = 'tag-details-disambiguation';
+                disambiguationItem.lang = 'ja';
                 this._appendFurigana(disambiguationItem, segments, (container, text) => {
                     container.appendChild(document.createTextNode(text));
                 });
@@ -196,13 +197,13 @@ class DisplayGenerator {
         const content = this._templates.instantiate('footer-notification-anki-errors-content');
 
         const header = content.querySelector('.anki-note-error-header');
-        header.textContent = (errors.length === 1 ? 'An error occurred:' : `${errors.length} errors occurred:`);
+        this._setTextContent(header, (errors.length === 1 ? 'An error occurred:' : `${errors.length} errors occurred:`), 'en');
 
         const list = content.querySelector('.anki-note-error-list');
         for (const error of errors) {
             const div = document.createElement('li');
             div.className = 'anki-note-error-message';
-            div.textContent = isObject(error) && typeof error.message === 'string' ? error.message : `${error}`;
+            this._setTextContent(div, isObject(error) && typeof error.message === 'string' ? error.message : `${error}`);
             list.appendChild(div);
         }
 
@@ -234,6 +235,8 @@ class DisplayGenerator {
         node.dataset.readingIsSame = `${!reading || reading === expression}`;
         node.dataset.frequency = termFrequency;
 
+        expressionContainer.lang = 'ja';
+
         this._appendFurigana(expressionContainer, furiganaSegments, this._appendKanjiLinks.bind(this));
         this._appendMultiple(tagContainer, this._createTag.bind(this), termTags);
         this._appendMultiple(tagContainer, this._createSearchTag.bind(this), searchQueries);
@@ -244,7 +247,7 @@ class DisplayGenerator {
     _createTermReason(reason) {
         const fragment = this._templates.instantiateFragment('term-reason');
         const node = fragment.querySelector('.term-reason');
-        node.textContent = reason;
+        this._setTextContent(node, reason);
         node.dataset.reason = reason;
         return fragment;
     }
@@ -282,7 +285,7 @@ class DisplayGenerator {
     _createTermGlossaryItemText(glossary) {
         const node = this._templates.instantiate('term-glossary-item');
         const container = node.querySelector('.term-glossary');
-        this._appendMultilineText(container, glossary);
+        this._setTextContent(container, glossary);
         return node;
     }
 
@@ -330,7 +333,7 @@ class DisplayGenerator {
 
         if (typeof description === 'string') {
             const container = node.querySelector('.term-glossary-image-description');
-            this._appendMultilineText(container, description);
+            this._setTextContent(container, description);
         }
 
         return node;
@@ -351,27 +354,27 @@ class DisplayGenerator {
     _createTermDisambiguation(disambiguation) {
         const node = this._templates.instantiate('term-definition-disambiguation');
         node.dataset.term = disambiguation;
-        node.textContent = disambiguation;
+        this._setTextContent(node, disambiguation, 'ja');
         return node;
     }
 
     _createKanjiLink(character) {
         const node = document.createElement('a');
         node.className = 'kanji-link';
-        node.textContent = character;
+        this._setTextContent(node, character, 'ja');
         return node;
     }
 
     _createKanjiGlossaryItem(glossary) {
         const node = this._templates.instantiate('kanji-glossary-item');
         const container = node.querySelector('.kanji-glossary');
-        this._appendMultilineText(container, glossary);
+        this._setTextContent(container, glossary);
         return node;
     }
 
     _createKanjiReading(reading) {
         const node = this._templates.instantiate('kanji-reading');
-        node.textContent = reading;
+        this._setTextContent(node, reading, 'ja');
         return node;
     }
 
@@ -392,8 +395,8 @@ class DisplayGenerator {
         const node = this._templates.instantiate('kanji-info-table-item');
         const nameNode = node.querySelector('.kanji-info-table-item-header');
         const valueNode = node.querySelector('.kanji-info-table-item-value');
-        nameNode.textContent = details.notes || details.name;
-        valueNode.textContent = details.value;
+        this._setTextContent(nameNode, details.notes || details.name);
+        this._setTextContent(valueNode, details.value);
         return node;
     }
 
@@ -407,7 +410,7 @@ class DisplayGenerator {
         const inner = node.querySelector('.tag-inner');
 
         node.title = details.notes;
-        inner.textContent = details.name;
+        this._setTextContent(inner, details.name);
         node.dataset.details = details.notes || details.name;
         node.dataset.category = details.category;
         if (details.redundant) { node.dataset.redundant = 'true'; }
@@ -473,7 +476,7 @@ class DisplayGenerator {
         node.dataset.tagCount = `${tags.length}`;
 
         let n = node.querySelector('.term-pitch-accent-position');
-        n.textContent = `${position}`;
+        this._setTextContent(n, `${position}`, '');
 
         n = node.querySelector('.term-pitch-accent-tag-list');
         this._appendMultiple(n, this._createTag.bind(this), tags);
@@ -493,7 +496,7 @@ class DisplayGenerator {
             n1.dataset.position = `${i}`;
             n1.dataset.pitch = highPitch ? 'high' : 'low';
             n1.dataset.pitchNext = highPitchNext ? 'high' : 'low';
-            n2.textContent = mora;
+            this._setTextContent(n2, mora, 'ja');
 
             n.appendChild(n1);
         }
@@ -510,14 +513,14 @@ class DisplayGenerator {
         for (const exclusiveExpression of exclusiveExpressions) {
             const node = this._templates.instantiate(templateName);
             node.dataset.type = 'expression';
-            node.textContent = exclusiveExpression;
+            this._setTextContent(node, exclusiveExpression, 'ja');
             container.appendChild(node);
         }
 
         for (const exclusiveReading of exclusiveReadings) {
             const node = this._templates.instantiate(templateName);
             node.dataset.type = 'reading';
-            node.textContent = exclusiveReading;
+            this._setTextContent(node, exclusiveReading, 'ja');
             container.appendChild(node);
         }
 
@@ -590,9 +593,9 @@ class DisplayGenerator {
 
         const frequency = frequencies.join(', ');
 
-        node.querySelector('.frequency-disambiguation-expression').textContent = expression;
-        node.querySelector('.frequency-disambiguation-reading').textContent = (reading !== null ? reading : '');
-        node.querySelector('.frequency-value').textContent = frequency;
+        this._setTextContent(node.querySelector('.frequency-disambiguation-expression'), expression, 'ja');
+        this._setTextContent(node.querySelector('.frequency-disambiguation-reading'), (reading !== null ? reading : ''), 'ja');
+        this._setTextContent(node.querySelector('.frequency-value'), frequency, 'ja');
 
         node.dataset.expression = expression;
         node.dataset.reading = reading;
@@ -610,7 +613,7 @@ class DisplayGenerator {
 
         const frequency = frequencies.join(', ');
 
-        node.querySelector('.frequency-value').textContent = frequency;
+        this._setTextContent(node.querySelector('.frequency-value'), frequency, 'ja');
 
         node.dataset.character = character;
         node.dataset.dictionary = dictionary;
@@ -620,6 +623,7 @@ class DisplayGenerator {
     }
 
     _appendKanjiLinks(container, text) {
+        container.lang = 'ja';
         const jp = this._japaneseUtil;
         let part = '';
         for (const c of text) {
@@ -675,15 +679,6 @@ class DisplayGenerator {
         }
     }
 
-    _appendMultilineText(container, text) {
-        const parts = text.split('\n');
-        container.appendChild(document.createTextNode(parts[0]));
-        for (let i = 1, ii = parts.length; i < ii; ++i) {
-            container.appendChild(document.createElement('br'));
-            container.appendChild(document.createTextNode(parts[i]));
-        }
-    }
-
     _createDictionaryTag(dictionary) {
         return {
             name: dictionary,
@@ -695,4 +690,13 @@ class DisplayGenerator {
             redundant: false
         };
     }
+
+    _setTextContent(node, value, language) {
+        node.textContent = value;
+        if (typeof language === 'string') {
+            node.lang = language;
+        } else if (this._japaneseUtil.isStringPartiallyJapanese(value)) {
+            node.lang = 'ja';
+        }
+    }
 }