Fix HTML lang tags not matching the selected language (#979)

* Cleanup and add language tag to renderResult

* Add language switching support to anki card templates scanned text

* Update search page search-textbox lang on language switch

* Set queryparser lang

* Allow updating language for display-generator

* Only use kanji-stroke-orders font for japanese

4 files changed, 25 insertions, 11 deletions

diff --git a/ext/js/display/display-generator.js b/ext/js/display/display-generator.js
index 8a388a38..2b0ceb58 100644
--- a/ext/js/display/display-generator.js
+++ b/ext/js/display/display-generator.js
@@ -38,6 +38,8 @@ export class DisplayGenerator {
         this._templates = new HtmlTemplateCollection();
         /** @type {StructuredContentGenerator} */
         this._structuredContentGenerator = new StructuredContentGenerator(this._contentManager, document);
+        /** @type {string} */
+        this._language = 'ja';
     }
 
     /** */
@@ -46,6 +48,13 @@ export class DisplayGenerator {
         this.updateHotkeys();
     }
 
+    /**
+     * @param {string} language
+     */
+    updateLanguage(language) {
+        this._language = language;
+    }
+
     /** */
     updateHotkeys() {
         const hotkeyHelpController = this._hotkeyHelpController;
@@ -162,7 +171,8 @@ export class DisplayGenerator {
         const codepointsContainer = this._querySelector(node, '.kanji-codepoints');
         const dictionaryIndicesContainer = this._querySelector(node, '.kanji-dictionary-indices');
 
-        this._setTextContent(glyphContainer, dictionaryEntry.character, 'ja');
+        this._setTextContent(glyphContainer, dictionaryEntry.character, this._language);
+        if (this._language === 'ja') { glyphContainer.style.fontFamily = 'kanji-stroke-orders, sans-serif'; }
         const groupedFrequencies = groupKanjiFrequencies(dictionaryEntry.frequencies);
 
         const dictionaryTag = this._createDictionaryTag(dictionaryEntry.dictionary);
@@ -508,7 +518,7 @@ export class DisplayGenerator {
     _createTermDisambiguation(disambiguation) {
         const node = this._instantiate('definition-disambiguation');
         node.dataset.term = disambiguation;
-        this._setTextContent(node, disambiguation, 'ja');
+        this._setTextContent(node, disambiguation, this._language);
         return node;
     }
 
@@ -519,7 +529,7 @@ export class DisplayGenerator {
     _createKanjiLink(character) {
         const node = document.createElement('a');
         node.className = 'headword-kanji-link';
-        this._setTextContent(node, character, 'ja');
+        this._setTextContent(node, character, this._language);
         return node;
     }
 
@@ -540,7 +550,7 @@ export class DisplayGenerator {
      */
     _createKanjiReading(reading) {
         const node = this._instantiate('kanji-reading');
-        this._setTextContent(node, reading, 'ja');
+        this._setTextContent(node, reading, this._language);
         return node;
     }
 
@@ -743,7 +753,7 @@ export class DisplayGenerator {
 
         n = this._querySelector(node, '.pronunciation-text-container');
 
-        n.lang = 'ja';
+        n.lang = this._language;
         n.appendChild(createPronunciationText(morae, position, nasalPositions, devoicePositions));
 
         n = this._querySelector(node, '.pronunciation-graph-container');
@@ -762,14 +772,14 @@ export class DisplayGenerator {
         for (const term of exclusiveTerms) {
             const node = this._instantiate(templateName);
             node.dataset.type = 'term';
-            this._setTextContent(node, term, 'ja');
+            this._setTextContent(node, term, this._language);
             container.appendChild(node);
         }
 
         for (const exclusiveReading of exclusiveReadings) {
             const node = this._instantiate(templateName);
             node.dataset.type = 'reading';
-            this._setTextContent(node, exclusiveReading, 'ja');
+            this._setTextContent(node, exclusiveReading, this._language);
             container.appendChild(node);
         }
 
@@ -826,8 +836,8 @@ export class DisplayGenerator {
         const frequencyValueList = this._querySelector(node, '.frequency-value-list');
 
         this._setTextContent(tagLabel, dictionary);
-        this._setTextContent(disambiguationTerm, term, 'ja');
-        this._setTextContent(disambiguationReading, (reading !== null ? reading : ''), 'ja');
+        this._setTextContent(disambiguationTerm, term, this._language);
+        this._setTextContent(disambiguationReading, (reading !== null ? reading : ''), this._language);
         this._populateFrequencyValueList(frequencyValueList, values);
 
         node.dataset.term = term;
@@ -892,7 +902,7 @@ export class DisplayGenerator {
                     node2.title = frequencyString;
                 }
             }
-            this._setTextContent(node2, text, 'ja');
+            this._setTextContent(node2, text, this._language);
             node.appendChild(node2);
 
             fullFrequency += text;
@@ -961,7 +971,7 @@ export class DisplayGenerator {
      * @param {(element: HTMLElement, text: string) => void} addText
      */
     _appendFurigana(container, term, reading, addText) {
-        container.lang = 'ja';
+        container.lang = this._language;
         const segments = distributeFurigana(term, reading);
         for (const {text, reading: furigana} of segments) {
             if (furigana) {
diff --git a/ext/js/display/display.js b/ext/js/display/display.js
index 6b73f19b..988aa0ae 100644
--- a/ext/js/display/display.js
+++ b/ext/js/display/display.js
@@ -418,6 +418,7 @@ export class Display extends EventDispatcher {
         this._setTheme(options);
         this._hotkeyHelpController.setOptions(options);
         this._displayGenerator.updateHotkeys();
+        this._displayGenerator.updateLanguage(options.general.language);
         this._hotkeyHelpController.setupNode(document.documentElement);
         this._elementOverflowController.setOptions(options);
 
diff --git a/ext/js/display/query-parser.js b/ext/js/display/query-parser.js
index f6c26ce7..ed10dab4 100644
--- a/ext/js/display/query-parser.js
+++ b/ext/js/display/query-parser.js
@@ -122,6 +122,8 @@ export class QueryParser extends EventDispatcher {
         if (selectedParserChanged && this._parseResults.length > 0) {
             this._renderParseResult();
         }
+
+        this._queryParser.lang = language;
     }
 
     /**
diff --git a/ext/js/display/search-display-controller.js b/ext/js/display/search-display-controller.js
index 90504beb..815c51c9 100644
--- a/ext/js/display/search-display-controller.js
+++ b/ext/js/display/search-display-controller.js
@@ -183,6 +183,7 @@ export class SearchDisplayController {
         this._clipboardMonitorEnabled = options.clipboard.enableSearchPageMonitor;
         this._updateClipboardMonitorEnabled();
         this._updateWanakanaCheckbox(options);
+        this._queryInput.lang = options.general.language;
         await this._updateProfileSelect();
     }