From 83221c31324d2d248d3c613f1142961f5b1c4c3d Mon Sep 17 00:00:00 2001 From: Aditya Date: Tue, 2 Dec 2025 23:45:55 +0530 Subject: [PATCH 1/4] fix: logic to construct SVG --- static/share.js | 63 +++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 59 insertions(+), 4 deletions(-) diff --git a/static/share.js b/static/share.js index 7591233..359aa7d 100644 --- a/static/share.js +++ b/static/share.js @@ -25,11 +25,66 @@ async function screenshotDOM(el, opts = {}) { if (background !== 'transparent') clone.style.background = background; if (!clone.getAttribute('xmlns')) clone.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml'); + const word = el.querySelector("h3").textContent.trim(); + const phonetic = el.querySelector(".pronun").textContent.trim(); + const [types, ...defs] = [...el.querySelectorAll("ol.defs li")].map(node => node.textContent.trim()); - const xhtml = new XMLSerializer().serializeToString(clone); - const svg = ` - ${xhtml} - `; + const vOffset = 48; + const svg = ` + + + + + + + + + + ${word} + + + ${phonetic} + + + ${types} + + + ${defs.map((def, idx) => ` + ${idx + 1}. + ${def} + `)} + + + `; const svgBlob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' }); const url = URL.createObjectURL(svgBlob); -- 2.49.1 From 98b36572aaeed6606517e214fe89b89e997fb486 Mon Sep 17 00:00:00 2001 From: Aditya Date: Wed, 3 Dec 2025 01:05:05 +0530 Subject: [PATCH 2/4] chore: fix alignment and styling --- static/share.js | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/static/share.js b/static/share.js index 359aa7d..c066b26 100644 --- a/static/share.js +++ b/static/share.js @@ -29,42 +29,42 @@ async function screenshotDOM(el, opts = {}) { const phonetic = el.querySelector(".pronun").textContent.trim(); const [types, ...defs] = [...el.querySelectorAll("ol.defs li")].map(node => node.textContent.trim()); - const vOffset = 48; + const vOffset = 25; const svg = ` - + - + @@ -72,15 +72,15 @@ async function screenshotDOM(el, opts = {}) { ${word} - ${phonetic} + ${phonetic} - ${types} + ${types} ${defs.map((def, idx) => ` - ${idx + 1}. - ${def} + ${idx + 1}. + ${def} `)} -- 2.49.1 From 4fbc3bd7d24c7abad9255ad31941ff0ec589bb61 Mon Sep 17 00:00:00 2001 From: Aditya Date: Thu, 4 Dec 2025 21:56:55 +0530 Subject: [PATCH 3/4] update: make changes to support text wrapping in multi line defs --- static/share.js | 57 +++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 53 insertions(+), 4 deletions(-) diff --git a/static/share.js b/static/share.js index c066b26..0854f0f 100644 --- a/static/share.js +++ b/static/share.js @@ -29,6 +29,54 @@ async function screenshotDOM(el, opts = {}) { const phonetic = el.querySelector(".pronun").textContent.trim(); const [types, ...defs] = [...el.querySelectorAll("ol.defs li")].map(node => node.textContent.trim()); + function charsPerLine(text, maxWidth) { + const fontSize = Math.round(width * 0.025); + const canvas = document.createElement("canvas"); + const ctx = canvas.getContext("2d"); + ctx.font = `${fontSize}px Helvetica Neue, Segoe UI, Helvetica, sans-serif`; + + return Math.floor(maxWidth / (ctx.measureText(text).width / text.length)); + } + + const renderDefs = (defs, x, y) => { + let yOffset = y; + const offset = 20; + const maxLength = charsPerLine(defs[0], width - 60); + + return defs.map((def, idx) => { + if (idx > 0) { + yOffset += vOffset; + } + + let part = ''; + const parts = []; + const words = def.split(' '); + + for (const word of words) { + if ((part + ' ' + word).trim().length <= maxLength) { + part = (part + ' ' + word).trim(); + } else { + if (part) parts.push(part); + part = word; + } + } + + if (part) parts.push(part); + + return ` + ${idx + 1}. + + ${parts.map((part, idx) => { + if (idx > 0) { + yOffset += offset; + } + return `${part}` + }).join('')} + + `; + }).join(''); + } + const vOffset = 25; const svg = ` @@ -61,6 +109,10 @@ async function screenshotDOM(el, opts = {}) { font-size: ${Math.round(width * 0.025)}px; fill: #6b7280; } + + text { + white-space: pre-wrap; + } @@ -78,10 +130,7 @@ async function screenshotDOM(el, opts = {}) { ${types} - ${defs.map((def, idx) => ` - ${idx + 1}. - ${def} - `)} + ${renderDefs(defs, 24, 75)} `; -- 2.49.1 From a8d586eb4aed6c7cf6c35e3a2000e6c645cba6b5 Mon Sep 17 00:00:00 2001 From: Aditya Date: Thu, 4 Dec 2025 22:31:57 +0530 Subject: [PATCH 4/4] update: apply font family to all elements --- static/share.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/static/share.js b/static/share.js index 0854f0f..e3df474 100644 --- a/static/share.js +++ b/static/share.js @@ -83,35 +83,30 @@ async function screenshotDOM(el, opts = {}) { -- 2.49.1