Fix image render area (#1696)

* Fix images not being fully rendered when sizeUnits is not em * Fix incorrect scaling of images using em sizeUnits * Make tests happy * Set style width and height to 100% to render correctly in anki * Update tests
yomidevs · Dec 25, 2024 · 585854d · 585854d
1 parent db15394
commit 585854d
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 21 deletions.
diff --git a/ext/js/display/structured-content-generator.js b/ext/js/display/structured-content-generator.js
@@ -116,6 +116,7 @@ export class StructuredContentGenerator {
 
         if (typeof border === 'string') { imageContainer.style.border = border; }
         if (typeof borderRadius === 'string') { imageContainer.style.borderRadius = borderRadius; }
+        imageContainer.style.width = `${usedWidth}em`;
         if (typeof title === 'string') {
             imageContainer.title = title;
         }
@@ -124,17 +125,13 @@ export class StructuredContentGenerator {
             const image = this._contentManager instanceof DisplayContentManager ?
                 /** @type {HTMLCanvasElement} */ (this._createElement('canvas', 'gloss-image')) :
                 /** @type {HTMLImageElement} */ (this._createElement('img', 'gloss-image'));
-            if (sizeUnits === 'em' && (hasPreferredWidth || hasPreferredHeight)) {
-                const emSize = 14; // We could Number.parseFloat(getComputedStyle(document.documentElement).fontSize); here for more accuracy but it would cause a layout and be extremely slow; possible improvement would be to calculate and cache the value
-                const scaleFactor = 2 * window.devicePixelRatio;
-                image.style.width = `${usedWidth}em`;
-                image.style.height = `${usedWidth * invAspectRatio}em`;
-                image.width = usedWidth * emSize * scaleFactor;
-            } else {
-                image.width = usedWidth;
-            }
+            image.width = width;
             image.height = image.width * invAspectRatio;
 
+            // Anki will not render images correctly without specifying to use 100% width and height
+            image.style.width = '100%';
+            image.style.height = '100%';
+
             imageContainer.appendChild(image);
 
             if (this._contentManager instanceof DisplayContentManager) {