【分享】写了个CSS样式:文档边注(sidenote)的自动适应模块 + 四种边注样式可供选择

直接上 github 仓库的 README 文件链接:


以下碎碎念:

原本我只是想找一个 CSS 样式来实现悬浮在文档正文侧边的注释(边注),当时在网上搜到的代码可以总结为三类实现方式:

  • 一种是将 callout 块给 hack 成侧边悬浮块
  • 一种是将 code block 给 hack 成侧边悬浮块
  • 还有一种是将脚注(footnote)给 hack 成侧边悬浮块

三类我都不太满意,用 code block 的最终会导致用一种莫名其妙的 language 名称污染笔记的结果,换了别人来看这 .md 文件就会一头雾水,用 footnote 的在实时预览模式下效果很棒,但是在阅读模式下直接失效,用 callout 块算是相当可行的做法,但是注释浮块只能和文本段落的第一行对齐,不能和正文引用一一对应,跟我心目中“边注”应有的效果有点差距。

于是我重新搜索边注应当展示成什么效果最美观,就搜到了 Tufte CSS 这种排版风格,实现方式是最淳朴的 <span class=xxxx></span>,当场就毛了,它用 HTML 标签这甚至是 markdown 广泛支持的原生语法,语义非常明确,而不是拿别的语法来 hack 。唯一缺点是 HTML 标签内不能渲染 markdown 语法(仅在阅读模式可以),但如果是纯文字边注那就没事了。

但是接着又遇到一个问题,Tufte 的样式规定边注的宽度是正文宽度的 50%。如果照搬到 obsidian 里,在打开“缩减栏宽”的情况下,左侧栏、右侧栏哪怕只要展开一个,都会导致边注悬浮块超出可见区域外。如果说改用更小的宽度,该用多少数值,选择困难症又发作了。

最后狠下心来,我全都要,就写了这个 Sidenote Auto-Adjust Module 边注自动适应模块,自动根据可见区域的尺寸决定边注悬浮块用多少宽度合适,保证边注完整可见。分成三档,如果空间充足就 50%,随着窗口缩小就切换到第二档是 50% 的 75%,窗口再缩小就切换到第三档是 50% 的 50%。此时边注已经很窄了,再收窄就不美观了,所以如果窗口再缩小,我就引入一种“侵入式”排版,类似于“文字环绕图片”的外观。

原本我只是将这种自动宽度功能用于 Tufte <span> 式边注,后来觉得 callout 式也并非没有可取之处,就又加了个将 callout hack 成 Tufte 风格的语法。之后又觉得保留 callout 原本背景颜色的风格也挺好看,就又加了个保留 callout 便利贴(stickynote)风格外观的语法。整了那么多风格之后,又觉得风格外观部分和自动宽度部分可以 refactor 开,于是就变成这样了,模块独立出来,可以配合任何其他外观风格的边注 CSS 来用。

用的时候可以将模块 CSS 和边注 CSS 两个文件一起放入 snippets 文件夹并启用,也可以将两个文件内容拼成一个文件来启用(如果你不在意我这里的语法关键字跟其他人写的边注 CSS 语法关键字冲突的话)。

此外还针对 Minimal 主题(及其 wide 类、max 类)做了适配,还设计了 leftsided / rightsided 类来特化需求,还写了 template 方便快速插入,就不细说了。

1 个赞

可以给张效果图吗,毕竟不知道好不好看

由于适配了太多 case,我得另找个时间才能将各种场景下的展示效果都截图orz ,不过你就想象将纯文字或将普通 callout 平移到左右两侧就行了。我没有在外观风格上做什么大改动,就是纯文字(透明背景)或普通 callout (颜色背景)的原样。我的工作主要集中在自动适应模块上,得要我另找时间录个 gif 来展示自动切换效果……

1 个赞

我已经开始尝试在你的GitHub仓库下载并使用这个模块了,效果真的很棒!感谢你的分享,期待你未来更多的CSS技巧和模块!