From b569012853432619e8930bef4f5e6a0dc9e2ac8f Mon Sep 17 00:00:00 2001 From: Jason Ojisan Date: Fri, 27 Dec 2024 11:35:06 -0500 Subject: [PATCH] Mostly fix monochrome svg rendering color and styling * Mostly fix monochrome svg rendering color * Update tests * Update anki css and overrides * Update tests * Fix drop shadow not rendering on firefox * Fix anki css * Update tests * Use remove-property instead of overwriting property * Add shadow settings var and use second shadow * Add workaround note * Update structured content json NThlY2JlYmViOTFiNjNjOWRkMDBlNmU1MmIwZTI1MDNmN2Q0MzExYQo= --- dev/data/structured-content-overrides.css | 10 ++++++ ext/css/structured-content.css | 16 ++++++--- ext/data/structured-content-style.json | 34 +++++++++++++------ .../display/structured-content-generator.js | 5 +++ test/data/anki-note-builder-test-results.json | 24 ++++++------- 5 files changed, 62 insertions(+), 27 deletions(-) diff --git a/dev/data/structured-content-overrides.css b/dev/data/structured-content-overrides.css index a23807e45..87cbf38b7 100644 --- a/dev/data/structured-content-overrides.css +++ b/dev/data/structured-content-overrides.css @@ -64,3 +64,13 @@ .gloss-sc-summary { /* remove-rule */ } +.gloss-image-background { + background-color: currentColor; + /* remove-property display */ +} +.gloss-image-link:not([data-appearance=monochrome]) .gloss-image-background { + display: none; +} +.gloss-image-link[data-appearance=monochrome] .gloss-image { + opacity: 0; +} diff --git a/ext/css/structured-content.css b/ext/css/structured-content.css index 0902680c8..500d99b9b 100644 --- a/ext/css/structured-content.css +++ b/ext/css/structured-content.css @@ -19,6 +19,7 @@ /* Glossary images */ .gloss-image-container { display: inline-block; + white-space: nowrap; max-width: 100%; max-height: 100vh; position: relative; @@ -85,6 +86,7 @@ mask-mode: alpha; mask-size: contain; mask-image: var(--image); + display: none; } .gloss-image { display: inline-block; @@ -92,7 +94,13 @@ object-fit: contain; border: none; outline: none; +} +.gloss-image-link[data-has-aspect-ratio=true] .gloss-image { + position: absolute; + left: 0; + top: 0; width: 100%; + height: 100%; } .gloss-image-link[data-image-rendering=pixelated] .gloss-image, .gloss-image-link[data-image-rendering=pixelated] .gloss-image-background { @@ -137,10 +145,10 @@ } .gloss-image-link[data-appearance=monochrome] .gloss-image { - filter: grayscale(1); -} -.gloss-image-link:not([data-appearance=monochrome]) .gloss-image-background { - display: none; + /* Workaround for coloring monochrome gloss images due to issues with masking using a canvas without loading extra media */ + /* drop-shadow with 0.01px blur is at minimum required for Firefox to render the shadow when used on a canvas */ + --shadow-settings: 0 0 0.01px var(--text-color); + filter: grayscale(1) opacity(0.5) drop-shadow(var(--shadow-settings)) drop-shadow(var(--shadow-settings)) saturate(1000%) brightness(1000%); } .gloss-image-link[data-size-units=em] .gloss-image-container { diff --git a/ext/data/structured-content-style.json b/ext/data/structured-content-style.json index f6fdedf8a..be30dc496 100644 --- a/ext/data/structured-content-style.json +++ b/ext/data/structured-content-style.json @@ -3,6 +3,7 @@ "selectors": [".gloss-image-container"], "styles": [ ["display", "inline-block"], + ["white-space", "nowrap"], ["max-width", "100%"], ["max-height", "100vh"], ["position", "relative"], @@ -66,7 +67,6 @@ ["top", "0"], ["width", "100%"], ["height", "100%"], - ["background-color", "var(--text-color)"], ["-webkit-mask-repeat", "no-repeat"], ["-webkit-mask-position", "center center"], ["-webkit-mask-mode", "alpha"], @@ -76,7 +76,8 @@ ["mask-position", "center center"], ["mask-mode", "alpha"], ["mask-size", "contain"], - ["mask-image", "var(--image)"] + ["mask-image", "var(--image)"], + ["background-color", "currentColor"] ] }, { @@ -86,8 +87,17 @@ ["vertical-align", "top"], ["object-fit", "contain"], ["border", "none"], - ["outline", "none"], - ["width", "100%"] + ["outline", "none"] + ] + }, + { + "selectors": [".gloss-image-link[data-has-aspect-ratio=true] .gloss-image"], + "styles": [ + ["position", "absolute"], + ["left", "0"], + ["top", "0"], + ["width", "100%"], + ["height", "100%"] ] }, { @@ -164,13 +174,9 @@ { "selectors": [".gloss-image-link[data-appearance=monochrome] .gloss-image"], "styles": [ - ["filter", "grayscale(1)"] - ] - }, - { - "selectors": [".gloss-image-link:not([data-appearance=monochrome]) .gloss-image-background"], - "styles": [ - ["display", "none"] + ["--shadow-settings", "0 0 0.01px var(--text-color)"], + ["filter", "grayscale(1) opacity(0.5) drop-shadow(var(--shadow-settings)) drop-shadow(var(--shadow-settings)) saturate(1000%) brightness(1000%)"], + ["opacity", "0"] ] }, { @@ -329,5 +335,11 @@ ["border-width", "1px"], ["border-color", "currentColor"] ] + }, + { + "selectors": [".gloss-image-link:not([data-appearance=monochrome]) .gloss-image-background"], + "styles": [ + ["display", "none"] + ] } ] diff --git a/ext/js/display/structured-content-generator.js b/ext/js/display/structured-content-generator.js index 406b97571..ab9294fdc 100644 --- a/ext/js/display/structured-content-generator.js +++ b/ext/js/display/structured-content-generator.js @@ -98,6 +98,9 @@ export class StructuredContentGenerator { const imageContainer = this._createElement('span', 'gloss-image-container'); node.appendChild(imageContainer); + const aspectRatioSizer = this._createElement('span', 'gloss-image-sizer'); + imageContainer.appendChild(aspectRatioSizer); + const imageBackground = this._createElement('span', 'gloss-image-background'); imageContainer.appendChild(imageBackground); @@ -120,6 +123,8 @@ export class StructuredContentGenerator { node.dataset.sizeUnits = sizeUnits; } + aspectRatioSizer.style.paddingTop = `${invAspectRatio * 100}%`; + if (typeof border === 'string') { imageContainer.style.border = border; } if (typeof borderRadius === 'string') { imageContainer.style.borderRadius = borderRadius; } imageContainer.style.width = `${usedWidth}em`; diff --git a/test/data/anki-note-builder-test-results.json b/test/data/anki-note-builder-test-results.json index 9927f262e..edaac7e3a 100644 --- a/test/data/anki-note-builder-test-results.json +++ b/test/data/anki-note-builder-test-results.json @@ -863,12 +863,12 @@ "frequency-average-occurrence": "0", "furigana": "画像がぞう", "furigana-plain": "画像[がぞう]", - "glossary": "
(n, termsDictAlias)
", - "glossary-brief": "
", - "glossary-no-dictionary": "
(n)
", - "glossary-first": "
(n, termsDictAlias)
", - "glossary-first-brief": "
", - "glossary-first-no-dictionary": "
(n)
", + "glossary": "
(n, termsDictAlias)
", + "glossary-brief": "
", + "glossary-no-dictionary": "
(n)
", + "glossary-first": "
(n, termsDictAlias)
", + "glossary-first-brief": "
", + "glossary-first-no-dictionary": "
(n)
", "part-of-speech": "Noun", "pitch-accents": "", "pitch-accent-graphs": "", @@ -1570,12 +1570,12 @@ "frequency-average-occurrence": "0", "furigana": "画像がぞう", "furigana-plain": "画像[がぞう]", - "glossary": "
(n, termsDictAlias)
", - "glossary-brief": "
", - "glossary-no-dictionary": "
(n)
", - "glossary-first": "
(n, termsDictAlias)
", - "glossary-first-brief": "
", - "glossary-first-no-dictionary": "
(n)
", + "glossary": "
(n, termsDictAlias)
", + "glossary-brief": "
", + "glossary-no-dictionary": "
(n)
", + "glossary-first": "
(n, termsDictAlias)
", + "glossary-first-brief": "
", + "glossary-first-no-dictionary": "
(n)
", "part-of-speech": "Noun", "pitch-accents": "", "pitch-accent-graphs": "",