aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--ext/css/display.css54
-rw-r--r--ext/data/schemas/options-schema.json5
-rw-r--r--ext/display-templates.html8
-rw-r--r--ext/js/data/options-util.js2
-rw-r--r--ext/js/display/display-generator.js2
-rw-r--r--ext/js/display/display.js1
-rw-r--r--ext/settings.html13
-rw-r--r--test/test-options-util.js3
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,