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 @@
Log debug info to console