关于 "Give footnotes the boot" 的思考
🎵 ラスト・ステップ - 山下達郎
在看 Cytrogen 的 想法在乙巳开冬迭代 时（文章推荐一看），看到了 Jake Archibald 的 Give footnotes the boot。
Jake 的看法是别用脚注，原因是：
- 它干扰读者的阅读，当碰到脚注的时候，就需要做选择，是分心看看脚注？还是继续阅读？
- 脚注的默认交互不好，一般脚注都在页面底部，阅读脚注会导致页面来回滚动
- 脚注的数字没什么意义
- 脚注的数字往往都很小，不容易点击
Jake 对此的 建议 是（以下建议的例子文章中都有，你可以去原文看看）：
如果只是一个简短的旁注，可以考虑用括号包裹，直接写在旁边（这种情况用脚注确实不合适，点击一看就几个字，不写或者用括号内联会更好）
他也对比了括号和弹出式（使用 Popover API）两种方式。
括号的旁注读者一眼就能看到，不感兴趣可以快速扫过；
弹出式，则要求读者做决策，是好奇地点开看看，还是略过。
如果内容稍微比较长，可以用一个 注释块 ('note' section)
注释块突然出现在正文之间，且和正文样式不同，某种程度上我觉得也会打断读者的阅读，只是相比脚注而言，可以更容易地知道内容，选择跳过。
- 如果内容很多，可以考虑用 <details> 折叠内容
Lea Verou 的评论补充了如何选择合适的呈现方式
评论中 Lea Verou 认为上面的方法对于脚注1而言还是太「显眼」了：
脚注的目的是为更感兴趣的读者提供额外内容。你列出的所有替代方案 ⸺ 括号、内联注释，甚至折叠的内联注释 ⸺ 对于目前脚注所用的大多数情况来说，都显得过于「显眼」。
她也给出了一个更具体的使用依据：
我认为这完全取决于 (a) 你认为读者对补充内容感兴趣的可能性有多大，以及 (b) 补充内容的长度。
例如：
- 50% 以上的可能性且内容简短？→ 括号
- 50% 以上的可能性且内容中等或较长？→ 注释块 (note block)
- 20-50% 的可能性且内容中等或较长？→ 折叠注释块 (collapsed note block)
- 可能性 < 20% 且内容为短或中等长度？→ 脚注 (footnote)
这些阈值可能需要进一步完善，但希望大体思路是清晰的。
Jake 也不太喜欢旁注，因为：
- 旁注只有在屏幕比较宽的时候才生效
- 读者可能不容易找到对应的旁注
- 旁注可能左右分布，读者的实现需要左右看，再回到正文，让他感到恼火
你为什么要为那些对你的内容不感兴趣的人优化阅读体验？如果内容真的那么无关紧要，就不要把它放在文章里 ⸺ 那样甚至更不具干扰性！但是，如果你有有趣的内容要说，就在上下文中说出来。如果它确实是可选的，那就让读者在意识到它不适合他们时，能够轻松跳过。跳过不那么相关的内容是阅读的正常部分。我们不需要过度设计它。
Jake 的这段话我还是蛮认同的，在使用脚注时，要思考是否真的需要，以及如何呈现更好。
最开始我不知道脚注的存在，所以基本不会使用它，也可能当时不太会用。
后来我发现在 org-mode 里使用脚注挺方便的，就开始使用脚注，这个时候就是 手里拿着锤子，看什么都是钉子，我开始大量使用脚注。
我倒不觉得脚注很干扰（可能作为作者，我希望读者点开看），它就一个小小的数字，看的快可能都没留意到有脚注。更大的问题是，查看脚注会导致在页面中来回滚动，交互非常不好。
我看到有的博客会使用旁注，它直接就在正文附近显示补充信息，我觉得阅读体验还不错。最终我参考 Sacha Chua 的实现，让 LLM 帮我实现了 旁注。但旁注的问题是，它只能在屏幕足够宽的时候才能看，在手机上查看依然是个问题。
再后来从 極客死亡計劃 发现了 littlefoot.js，它很好地解决了查看脚注的问题（尽管需要新增一个第三方 JS 依赖），它可以让你点击脚注，在脚注附近直接弹出内容显示，解决了手机上查看脚注的问题。
最后还需要优化一下 打印时的样式，把脚注包含在打印的内容中。
我也继续在优化 littlefoot 和旁注的样式，你可以在 CHANGELOG 里查看相关变更。
Jake 的文章让我意识到了一些问题：
- 脚注/旁注应该不要太抢眼，干扰读者阅读正文
- 不是什么都适合放在脚注里，有的简短的内容或许可以直接写在边上的括号里，或者干脆别写
反观我的设计，我让 littlefoot 的脚注变得很明显，我其实是更希望读者对它感兴趣，然后点开看看的，但可能它太显眼了，或许会给读者造成困扰。但我打算继续保留我的设计，只是我可能会减少它的使用，考虑更合适的呈现，例如注释块。
至于旁注，我也中了 Jake 说的问题，左右排布，需要读者来回移动眼睛，可能确实会抢读者注意力，造成一些困扰。左右排布主要是我想利用两侧的空间，都放在一边可能会显得拥挤。旁注我也尝试降低了透明度，尽可能降低它对正文的干扰。(不过看着还是很明显，对吧。)
有的旁注实现也是单边的，作者会将正文往左靠，压缩左边的空间，右边留出更多的空间呈现旁注。
关于旁注，Gwern Branwen 写了一篇非常详尽的文章：Sidenotes In Web Design，推荐一看。
旁注的另一个问题是，容易迷失，找不到它关联正文的位置，我目前的做法是当读者悬浮在旁注的数字时，我会同时高亮正文和旁注的数字；如果你悬浮在正文的数字上，则会高亮旁注的数字，从而方便读者对应。但这可能还是不够明显，在这点上我觉得 Gwern 的实现 很不错，他通过很明显的边框来提示读者， 或许后面我也会借鉴一下 我也做了个类似的效果。
总的来说，我对于博客目前的脚注和旁注设计还是挺满意的。脚注和旁注对我而言，没有 Jake 说的干扰性那么强，我甚至觉得它们会让文章多一些趣味。但确实也要考虑和正文的相关性、呈现方式，最终都是为了提供一个更好的阅读体验。
在这篇文章里我也尝试了 Jake 文章中的建议，如果你有什么想法，我也很想知道，欢迎发邮件和我交流 :)
脚注:
脚注，重点在于「注」而不是「脚」。「注」作为补充内容，不宜喧宾夺主，导致读者分散阅读的注意力。
网上对脚注的讨论通常归结为两点：它们是「脚」，也是「注」。所有人都认同，「脚」是个问题。在文中放置毫无意义的小符号，迫使读者滚动到文档末尾才能理解内容，这种做法确实愚蠢。但关键在于，现实中没人真这么做。除非网页文档是直接从印刷品转换而来，否则其中的任何「脚注」都会经过设计，力求在概念上将注释内容与原文位置保持关联。可能是跳转到底部的链接，可能是侧边栏展示，可能是点击后内联显示，也可能以弹出框呈现 ⸺ 但无论如何，读者获取「脚注」内容时，都不需要中断原有的阅读注意力流。
A (limited) defence of footnotes by Stuart Langridge
