From 94a5c9efde64b6cb34dadca402cffab476a0dbd0 Mon Sep 17 00:00:00 2001 From: kuuuube Date: Tue, 24 Dec 2024 18:30:13 -0500 Subject: [PATCH 1/5] Fix images not being fully rendered when sizeUnits is not em --- ext/js/display/structured-content-generator.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ext/js/display/structured-content-generator.js b/ext/js/display/structured-content-generator.js index fd9a8d534..4833da78c 100644 --- 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; } @@ -131,7 +132,7 @@ export class StructuredContentGenerator { image.style.height = `${usedWidth * invAspectRatio}em`; image.width = usedWidth * emSize * scaleFactor; } else { - image.width = usedWidth; + image.width = width; } image.height = image.width * invAspectRatio; From be22e85247939117997eb4e616403bf99d05afbe Mon Sep 17 00:00:00 2001 From: kuuuube Date: Tue, 24 Dec 2024 18:33:54 -0500 Subject: [PATCH 2/5] Fix incorrect scaling of images using em sizeUnits --- ext/js/display/structured-content-generator.js | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/ext/js/display/structured-content-generator.js b/ext/js/display/structured-content-generator.js index 4833da78c..72344ec45 100644 --- a/ext/js/display/structured-content-generator.js +++ b/ext/js/display/structured-content-generator.js @@ -125,15 +125,7 @@ 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 = width; - } + image.width = width; image.height = image.width * invAspectRatio; imageContainer.appendChild(image); From 07581c71e536a791cebf51fc798ac9dc1c20bab7 Mon Sep 17 00:00:00 2001 From: kuuuube Date: Tue, 24 Dec 2024 18:51:59 -0500 Subject: [PATCH 3/5] Make tests happy --- test/data/anki-note-builder-test-results.json | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/test/data/anki-note-builder-test-results.json b/test/data/anki-note-builder-test-results.json index 86e64ed13..364777d23 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)
  • gazou definition 1
", - "glossary-brief": "
  • gazou definition 1
", - "glossary-no-dictionary": "
(n)
  • gazou definition 1
", - "glossary-first": "
(n, termsDictAlias)
  • gazou definition 1
", - "glossary-first-brief": "
  • gazou definition 1
", - "glossary-first-no-dictionary": "
(n)
  • gazou definition 1
", + "glossary": "
(n, termsDictAlias)
  • gazou definition 1
", + "glossary-brief": "
  • gazou definition 1
", + "glossary-no-dictionary": "
(n)
  • gazou definition 1
", + "glossary-first": "
(n, termsDictAlias)
  • gazou definition 1
", + "glossary-first-brief": "
  • gazou definition 1
", + "glossary-first-no-dictionary": "
(n)
  • gazou definition 1
", "part-of-speech": "Noun", "pitch-accents": "", "pitch-accent-graphs": "", @@ -1570,12 +1570,12 @@ "frequency-average-occurrence": "0", "furigana": "画像がぞう", "furigana-plain": "画像[がぞう]", - "glossary": "
(n, termsDictAlias)
  • gazou definition 1
", - "glossary-brief": "
  • gazou definition 1
", - "glossary-no-dictionary": "
(n)
  • gazou definition 1
", - "glossary-first": "
(n, termsDictAlias)
  • gazou definition 1
", - "glossary-first-brief": "
  • gazou definition 1
", - "glossary-first-no-dictionary": "
(n)
  • gazou definition 1
", + "glossary": "
(n, termsDictAlias)
  • gazou definition 1
", + "glossary-brief": "
  • gazou definition 1
", + "glossary-no-dictionary": "
(n)
  • gazou definition 1
", + "glossary-first": "
(n, termsDictAlias)
  • gazou definition 1
", + "glossary-first-brief": "
  • gazou definition 1
", + "glossary-first-no-dictionary": "
(n)
  • gazou definition 1
", "part-of-speech": "Noun", "pitch-accents": "", "pitch-accent-graphs": "", From 9d4b74e9423183bf7c4f785d060130d456965834 Mon Sep 17 00:00:00 2001 From: kuuuube Date: Tue, 24 Dec 2024 19:56:21 -0500 Subject: [PATCH 4/5] Set style width and height to 100% to render correctly in anki --- ext/js/display/structured-content-generator.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/ext/js/display/structured-content-generator.js b/ext/js/display/structured-content-generator.js index 72344ec45..6cdc981bd 100644 --- a/ext/js/display/structured-content-generator.js +++ b/ext/js/display/structured-content-generator.js @@ -128,6 +128,10 @@ export class StructuredContentGenerator { 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) { From b8ba1b779e436e1f17ef57429a76d0f47d643cc2 Mon Sep 17 00:00:00 2001 From: kuuuube Date: Tue, 24 Dec 2024 19:59:26 -0500 Subject: [PATCH 5/5] Update tests --- test/data/anki-note-builder-test-results.json | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/test/data/anki-note-builder-test-results.json b/test/data/anki-note-builder-test-results.json index 364777d23..5aacb9eeb 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)
  • gazou definition 1
", - "glossary-brief": "
  • gazou definition 1
", - "glossary-no-dictionary": "
(n)
  • gazou definition 1
", - "glossary-first": "
(n, termsDictAlias)
  • gazou definition 1
", - "glossary-first-brief": "
  • gazou definition 1
", - "glossary-first-no-dictionary": "
(n)
  • gazou definition 1
", + "glossary": "
(n, termsDictAlias)
  • gazou definition 1
", + "glossary-brief": "
  • gazou definition 1
", + "glossary-no-dictionary": "
(n)
  • gazou definition 1
", + "glossary-first": "
(n, termsDictAlias)
  • gazou definition 1
", + "glossary-first-brief": "
  • gazou definition 1
", + "glossary-first-no-dictionary": "
(n)
  • gazou definition 1
", "part-of-speech": "Noun", "pitch-accents": "", "pitch-accent-graphs": "", @@ -1570,12 +1570,12 @@ "frequency-average-occurrence": "0", "furigana": "画像がぞう", "furigana-plain": "画像[がぞう]", - "glossary": "
(n, termsDictAlias)
  • gazou definition 1
", - "glossary-brief": "
  • gazou definition 1
", - "glossary-no-dictionary": "
(n)
  • gazou definition 1
", - "glossary-first": "
(n, termsDictAlias)
  • gazou definition 1
", - "glossary-first-brief": "
  • gazou definition 1
", - "glossary-first-no-dictionary": "
(n)
  • gazou definition 1
", + "glossary": "
(n, termsDictAlias)
  • gazou definition 1
", + "glossary-brief": "
  • gazou definition 1
", + "glossary-no-dictionary": "
(n)
  • gazou definition 1
", + "glossary-first": "
(n, termsDictAlias)
  • gazou definition 1
", + "glossary-first-brief": "
  • gazou definition 1
", + "glossary-first-no-dictionary": "
(n)
  • gazou definition 1
", "part-of-speech": "Noun", "pitch-accents": "", "pitch-accent-graphs": "",