宜通过修改需要缩放的元素字体大小和行间距等实现 DataviewJS 原文缩略图

起因是我想将 DataviewJS 汇总的原文缩至 50% 大小,形成类似缩略图的效果,少占一些高度。

尝试了 transform: scale(0.5);height: 50%;top: 0;.getBoundingClientRect() 等 CSS 和 JS 方式,元素在单元格的位置始终有问题。

托人询问 CS 专业学生,得 transform-origin: top; 补充,又自行配合 overflow: visible;,勉强实现横版,然切换到 Minimal 伪卡片视图(竖版)仍有位置问题。

数十分钟前忽然想到只需将需要缩放的元素字体大小和行间距调整到 50% 即可,顺利实现。

image

已更新到 DataviewJS 的传参与复用

从开始至完成写作已近 16 h,分享经验,警钟长鸣。


也许会有更合理的方式实现吗?

我知道 html2canvas 库可以将 div 转换为 svg,但应该是需要下载,
不能通过 const { API } = await import('url') 的方式在线导入。

遍历节点通过 canvas 像素绘制遇到 <img> 的话似乎处理也比较复杂。