Capturing screenshots of DOM elements containing KateX formulas, the output image lacks proper font styling in the formulas. #344
Description
To reduce the package size, I dynamically inserted the KateX stylesheet into the head via an external CDN link. However, snapDOM did not recognize the fonts during the screenshot process, even though I had set embedFonts: true.
✅ Case1: using import 'katex/dist/katex.min.css'
*The image below was captured and rendered by snapDOM.
❌ Case2: using dynamic inject CSS
*It is evident that the formula below is not rendered accurately, lacking specific font styles.
Reproduction
- Install snapDOM and KateX
- Dynamically inject KateX's CSS styles
Click to Expand
import { snapdom } from '@zumer/snapdom';
import katex from 'katex';
// This works:
// import 'katex/dist/katex.min.css';
// But this not:
document.head.appendChild(
Object.assign(document.createElement('link'), {
rel: 'stylesheet',
href: 'https://registry.npmmirror.com/katex/0.16.25/files/dist/katex.min.css',
})
);
const app = document.querySelector<HTMLDivElement>('#app')!;
katex.render('c = \\pm\\sqrt{a^2 + b^2}', app, {
throwOnError: false,
});
const buffer = await snapdom(app, {
embedFonts: true,
});
const blob = await buffer.toBlob();
const url = URL.createObjectURL(blob);
document.body.appendChild(
Object.assign(document.createElement('img'), {
src: url,
})
);Enviroment
System:
OS: Linux 5.0 undefined
CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 0 Bytes / 0 Bytes
Shell: 1.0 - /bin/jsh
npmPackages:
@zumer/snapdom: ^2.0.1 => 2.0.1
katex: ^0.16.25 => 0.16.25
typescript: ~5.9.3 => 5.9.3
vite: ^7.2.4 => 7.2.6