Mostly fix monochrome svg rendering color and styling (#1700)

* 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
yomidevs · Dec 27, 2024 · 58ecbeb · 58ecbeb
1 parent 3fcbb92
commit 58ecbeb
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 27 deletions.
diff --git 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
@@ -19,6 +19,7 @@
 /* Glossary images */
 .gloss-image-container {
     display: inline-block;
+    white-space: nowrap;
     max-width: 100%;
     max-height: 100vh;
     position: relative;
@@ -85,14 +86,21 @@
     mask-mode: alpha;
     mask-size: contain;
     mask-image: var(--image);
+    display: none;
 }
 .gloss-image {
     display: inline-block;
     vertical-align: top;
     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
@@ -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
@@ -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`;