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 = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
-    <foreignObject x="0" y="0" width="100%" height="100%">${xhtml}</foreignObject>
-  </svg>`;
+    const vOffset = 48;
+    const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="720" height="240" viewBox="0 0 720 240">
+        <style>
+            .card { fill: #ffffff; stroke: #e5e7eb; stroke-width: 1.2; rx: 10; ry: 10; }
+            .headword {
+                font-family: "Noto Sans Kannada", "Noto Sans", sans-serif;
+                font-size: 28px;
+                font-weight: 700;
+                fill: #111827;
+            }
+            .pron {
+                font-family: "Noto Sans", sans-serif;
+                font-size: 15px;
+                fill: #6b7280;
+            }
+            .pos {
+                font-family: "Noto Sans", sans-serif;
+                font-size: 15px;
+                font-weight: 600;
+                fill: #374151;
+            }
+            .def {
+                font-family: "Noto Sans", sans-serif;
+                font-size: 16px;
+                fill: #111827;
+            }
+            .num {
+                font-family: "Noto Sans", sans-serif;
+                font-size: 16px;
+                fill: #6b7280;
+            }
+        </style>
+
+        <!-- Card background -->
+        <rect x="8" y="8" width="704" height="224" rx="10" ry="10" class="card"/>
+
+        <!-- Content -->
+        <g transform="translate(32,36)">
+            <!-- Headword -->
+            <text class="headword" x="0" y="0">${word}</text>
+
+            <!-- Pronunciation -->
+            <text class="pron" x="0" y="30">${phonetic}</text>
+
+            <!-- POS -->
+            <text class="pos" x="0" y="72">${types}</text>
+
+            <!-- Definition 1 -->
+            ${defs.map((def, idx) => `
+                <text class="num" x="0" y="${112 + idx * vOffset}">${idx + 1}.</text>
+                <text class="def" x="24" y="${112 + idx * vOffset}">${def}</text>
+            `)}
+        </g>
+    </svg>
+    `;
 
     const svgBlob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
     const url = URL.createObjectURL(svgBlob);