Add standalone reading (#1448)

* Add option

* Update display

* Hide redundant readings

* Improve label and description

8 files changed, 79 insertions, 9 deletions

diff --git a/ext/css/display.css b/ext/css/display.css
index 02e33ad9..7c5be5f0 100644
--- a/ext/css/display.css
+++ b/ext/css/display.css
@@ -25,6 +25,8 @@
     --disambiguation-separator: ', ';
     --disambiguation-reading-separator: ':';
 
+    --expression-separator: '\3001';
+
     /* Layout */
     --font-size-no-units: 14;
     --font-size: calc(1px * var(--font-size-no-units));
@@ -32,6 +34,9 @@
     --query-parser-font-size: calc(1em * var(--query-parser-font-size-no-units));
     --expression-font-size-no-units: 2;
     --expression-font-size: calc(1em * var(--expression-font-size-no-units));
+    --expression-reading-font-size-scale: 0.75;
+    --expression-reading-font-size: calc(var(--expression-reading-font-size-scale) * var(--expression-font-size));
+    --expression-reading-space: 0.5em;
     --h2-font-size-no-units: 1.25;
     --h2-font-size: calc(1em * var(--h2-font-size-no-units));
 
@@ -790,18 +795,41 @@ button.action-button[data-icon=source-term]::before {
 }
 .term-expression-text-container {
     display: inline-block;
+    margin-left: calc(-1 * var(--expression-reading-space));
+}
+.term-expression-text-outer {
+    display: inline-block;
+    position: relative;
+    margin-left: var(--expression-reading-space);
+}
+.term-expression-reading-outer {
+    display: none;
+    position: relative;
+    margin-left: var(--expression-reading-space);
 }
 .term-expression-text {
     color: var(--kanji-text-color);
     font-size: var(--expression-font-size);
-    display: inline-block;
-    position: relative;
+}
+.term-expression-reading {
+    color: var(--kanji-text-color);
+    font-size: var(--expression-reading-font-size);
+}
+.term-expression-list>.term-expression:not(:last-of-type)>.term-expression-text-container>.term-expression-text-outer::after {
+    content: var(--expression-separator);
+    font-size: var(--expression-font-size);
+}
+.term-expression-list>.term-expression:not(:last-of-type)>.term-expression-text-container>.term-expression-reading-outer::after {
+    content: var(--expression-separator);
+    font-size: var(--expression-reading-font-size);
 }
 .entry[data-expression-multi=true] .term-expression[data-frequency=popular] .term-expression-text,
+.entry[data-expression-multi=true] .term-expression[data-frequency=popular] .term-expression-reading,
 .entry[data-expression-multi=true] .term-expression[data-frequency=popular] .kanji-link {
     color: var(--kanji-popular-text-color);
 }
 .entry[data-expression-multi=true] .term-expression[data-frequency=rare] .term-expression-text,
+.entry[data-expression-multi=true] .term-expression[data-frequency=rare] .term-expression-reading,
 .entry[data-expression-multi=true] .term-expression[data-frequency=rare] .kanji-link {
     color: var(--kanji-rare-text-color);
 }
@@ -842,9 +870,6 @@ button.action-button[data-icon=source-term]::before {
 .term-expression-details>.frequencies {
     display: none;
 }
-.term-expression-list>.term-expression:not(:last-of-type)>.term-expression-text-container>.term-expression-text::after {
-    content: '\3001';
-}
 .term-details {
     display: inline;
 }
@@ -854,6 +879,25 @@ button.action-button[data-icon=source-term]::before {
 .entry[data-expression-multi=true] .term-details {
     display: block;
 }
+:root[data-term-display-mode=ruby-and-reading] .term-expression-text-outer::after,
+:root[data-term-display-mode=term-and-reading] .term-expression-text-outer::after {
+    display: none;
+}
+:root[data-term-display-mode=ruby-and-reading] .term-expression-reading-outer,
+:root[data-term-display-mode=term-and-reading] .term-expression-reading-outer {
+    display: inline-block;
+}
+:root[data-term-display-mode=ruby-and-reading] .term-expression[data-reading-is-same=true] .term-expression-text-outer::after,
+:root[data-term-display-mode=term-and-reading] .term-expression[data-reading-is-same=true] .term-expression-text-outer::after {
+    display: inline-block;
+}
+:root[data-term-display-mode=ruby-and-reading] .term-expression[data-reading-is-same=true] .term-expression-reading-outer,
+:root[data-term-display-mode=term-and-reading] .term-expression[data-reading-is-same=true] .term-expression-reading-outer {
+    display: none;
+}
+:root[data-term-display-mode=term-and-reading] .term-expression-text>ruby>rt {
+    display: none;
+}
 
 
 /* Entry indicator */
diff --git a/ext/data/schemas/options-schema.json b/ext/data/schemas/options-schema.json
index 6d6c8536..efeb1dc3 100644
--- a/ext/data/schemas/options-schema.json
+++ b/ext/data/schemas/options-schema.json
@@ -276,6 +276,11 @@
                                         "type": "string",
                                         "enum": ["tags", "tags-grouped", "split-tags", "split-tags-grouped", "inline-list", "list"],
                                         "default": "split-tags-grouped"
+                                    },
+                                    "termDisplayMode": {
+                                        "type": "string",
+                                        "enum": ["ruby", "ruby-and-reading", "term-and-reading"],
+                                        "default": "ruby"
                                     }
                                 }
                             },
diff --git a/ext/display-templates.html b/ext/display-templates.html
index d188cfd6..f7523c87 100644
--- a/ext/display-templates.html
+++ b/ext/display-templates.html
@@ -35,9 +35,13 @@
     <div class="debug-info"><a class="debug-log-link">Log debug info to console</a></div>
 </div></template>
 <template id="term-expression-template" data-remove-whitespace-text="true"><div class="term-expression">
-    <div class="term-expression-text-container">
-        <span class="term-expression-text source-text">
+    <div class="term-expression-text-container" lang="ja">
+        <span class="term-expression-text-outer source-text">
             <span class="term-expression-current-indicator"></span>
+            <span class="term-expression-text"></span>
+        </span>
+        <span class="term-expression-reading-outer">
+            <span class="term-expression-reading"></span>
         </span>
     </div>
     <div class="term-expression-details">
diff --git a/ext/js/data/options-util.js b/ext/js/data/options-util.js
index d7f09135..c31ae680 100644
--- a/ext/js/data/options-util.js
+++ b/ext/js/data/options-util.js
@@ -741,8 +741,10 @@ class OptionsUtil {
     _updateVersion9(options) {
         // Version 9 changes:
         //  Added general.frequencyDisplayMode.
+        //  Added general.termDisplayMode.
         for (const profile of options.profiles) {
             profile.options.general.frequencyDisplayMode = 'split-tags-grouped';
+            profile.options.general.termDisplayMode = 'ruby';
         }
         return options;
     }
diff --git a/ext/js/display/display-generator.js b/ext/js/display/display-generator.js
index b904c16e..221cb772 100644
--- a/ext/js/display/display-generator.js
+++ b/ext/js/display/display-generator.js
@@ -243,7 +243,7 @@ class DisplayGenerator {
         node.dataset.readingIsSame = `${!reading || reading === expression}`;
         node.dataset.frequency = termFrequency;
 
-        expressionContainer.lang = 'ja';
+        this._setTextContent(node.querySelector('.term-expression-reading'), reading.length > 0 ? reading : expression);
 
         this._appendFurigana(expressionContainer, furiganaSegments, this._appendKanjiLinks.bind(this));
         this._appendMultiple(tagContainer, this._createTag.bind(this), termTags);
diff --git a/ext/js/display/display.js b/ext/js/display/display.js
index be402ec3..f5673737 100644
--- a/ext/js/display/display.js
+++ b/ext/js/display/display.js
@@ -813,6 +813,7 @@ class Display extends EventDispatcher {
         data.glossaryLayoutMode = `${options.general.glossaryLayoutMode}`;
         data.compactTags = `${options.general.compactTags}`;
         data.frequencyDisplayMode = `${options.general.frequencyDisplayMode}`;
+        data.termDisplayMode = `${options.general.termDisplayMode}`;
         data.enableSearchTags = `${options.scanning.enableSearchTags}`;
         data.showPitchAccentDownstepNotation = `${options.general.showPitchAccentDownstepNotation}`;
         data.showPitchAccentPositionNotation = `${options.general.showPitchAccentPositionNotation}`;
diff --git a/ext/settings.html b/ext/settings.html
index 3c77b164..1c4b5034 100644
--- a/ext/settings.html
+++ b/ext/settings.html
@@ -679,6 +679,19 @@
         </div></div>
         <div class="settings-item advanced-only"><div class="settings-item-inner">
             <div class="settings-item-left">
+                <div class="settings-item-label">Term display style</div>
+                <div class="settings-item-description">Change how terms and their readings are displayed.</div>
+            </div>
+            <div class="settings-item-right">
+                <select data-setting="general.termDisplayMode">
+                    <option value="ruby">Term furigana</option>
+                    <option value="ruby-and-reading">Term furigana and reading</option>
+                    <option value="term-and-reading">Raw term and reading</option>
+                </select>
+            </div>
+        </div></div>
+        <div class="settings-item advanced-only"><div class="settings-item-inner">
+            <div class="settings-item-left">
                 <div class="settings-item-label">Frequency display style</div>
                 <div class="settings-item-description">Change how frequency information is presented.</div>
             </div>
diff --git a/test/test-options-util.js b/test/test-options-util.js
index cfb5bd95..49ab8c9e 100644
--- a/test/test-options-util.js
+++ b/test/test-options-util.js
@@ -295,7 +295,8 @@ function createProfileOptionsUpdatedTestData1() {
             popupCurrentIndicatorMode: 'triangle',
             popupActionBarVisibility: 'auto',
             popupActionBarLocation: 'top',
-            frequencyDisplayMode: 'split-tags-grouped'
+            frequencyDisplayMode: 'split-tags-grouped',
+            termDisplayMode: 'ruby'
         },
         audio: {
             enabled: true,