为什么 SO HTML 结构会破坏浏览器的“阅读器模式”？

Question

背景

浏览器“阅读器模式”重新格式化网页，使其根据个人用户的需求（间距、对比度、字体等）更易于访问/阅读。

虽然每个浏览器实现的阅读器模式都不同，但总的来说，它们都是文章风格的网站，如 Medium、纽约时报、Lifehacker 等。

问题/问题

但是在 StackOverflow 上，阅读器模式几乎都以各种方式中断，通常只显示问题和/或第一个答案；其他内容根本没有。

具体来说，SO/SE 页面的 HTML 结构是什么混淆了浏览器阅读器模式？

换句话说，如何更改页面的 HTML 结构以允许浏览器阅读器模式正确解析和显示所有问题/答案内容？

到目前为止的进展

通过比较各种浏览器，*移动和桌面，阅读器模式使用某种简单的启发式方法来确定要显示的内容，例如“仅显示文本最多的元素，并隐藏所有其他内容”。或者，“仅显示文本最多的元素，但更靠近页面顶部的元素显示权重。”

* 目前已_{尝试过（移动和桌面）：Firefox、Safari 和 Chrome（请注意，Chrome 仅在移动设备上具有本机功能，并将其称为“简化视图”）。在 Firefox 和 Safari 上访问阅读器模式在 URL 栏中；如果支持，Chrome 中的访问位于屏幕底部。}

但也有可能对元素标签/类/id 进行一些扫描，以寻找重要内容的语义指示。

通过在浏览器 DevTools 中摸索，我注意到似乎有两个包装器<div>包含所有问答内容，而各个问题和答案也都有自己的<div>. 这令我感到困惑，因为通常这是第一个问题，并说得到展示，而我希望一个第一个答案或其他-或为读者检测包装和显示的所有内容。

虽然所有浏览器都以不同的方式实现这一点，因为它们都可以毫无问题地处理文章风格的网站，删除非内容元素，我正在寻找对 SO/SE 页面的结构或语义的调整，这同样会引起浏览器阅读器模式来捕获所有内容。

无障碍

SE 最近扩大了所有 SE/SO 站点的行距以促进可访问性（例如，对于有阅读障碍的读者）。我在这里的问题是我在meta 上的帖子的技术姐妹问题，其中我建议 SE 站点更好地支持读者视图。（请注意，我不赞成或反对格式更改；我只是想研究一种通过阅读器模式支持用户确定的格式。）我希望这个问题将作为该帖子的技术调查推论，并会产生一些关于可以进行哪些修改以支持浏览器阅读器模式的可操作信息。

Answer 1

这是 FireFox 阅读器视图的源代码，我们可以使用它来最好地猜测 Stack Overflow 为何无法正常工作。我想类似的标准用于其他读者视图实现。

读者视图使用的与 Stack Overflow 冲突的标准

关于为什么 Stack Overflow 不适用于阅读器视图的一些问题。

它使用旨在从页面中删除评论的标准。

有一些标准，例如文本长度（300 多个字符作为可能的候选最大点）、逗号和类名的使用，所有这些都旨在删除看起来像注释的节点。

由于阅读器模式旨在阅读博客文章，这显然是有利的，但在 Stack Overflow 上，这可能会删除页面的大部分作为候选人，因为他们有很多低分节点（我的意思是......谁在评论中使用逗号无论如何？他们使用您的字符数中有价值的字符！呵呵）。

阅读器视图不使用语义作为指标

这个让我感到惊讶，但它在做出决定时并不寻找诸如<main>、<article>等的语义元素。

这对 Stack Overflow 没有帮助，因为他们也不使用它们，但我会立即想到如何解决这个问题。

类名无济于事 Stack Overflow

然而，他们确实会寻找指示项目是否可能相关的类名。

否定类（我认为包括部分匹配，例如“评论”的“主要评论”）如下（这可能导致节点从可能的候选列表中删除）：-

unlikelyCandidates: /-ad-|ai2html|banner|breadcrumbs|combx|comment|community|cover-wrap|disqus|extra|footer|gdpr|header|legends|menu|related|remark|replies|rss|shoutbox|sidebar|skyscraper|social|sponsor|supplemental|ad-break|agegate|pagination|pager|popup|yom-remote/i,

在该列表中是“评论”和“分享”，因此某个部分的评论可能得分很低（因为他们在每条评论上都有“评论”类），而实际答案部分也可能得分很差，因为“共享编辑跟随关闭标志”部分包含“共享”类。

Stack Overflow 可以更改这些类名，这可能会提高在阅读器视图中呈现整页的机会，但它是一种黑客行为，可能不是很健壮！

评论和简短的回答是杀手

正如我提到的元素中文本的长度和逗号的使用是确定元素是否是页面上“主要文本”的候选者的标准。

Stack Overflow 上的评论、简短回答等总是会与这种评分机制发生冲突，因此这给 Stack Overflow 带来了一个主要问题，即无法对读者视图兼容性做任何​​事情。

考虑到这一点......

解决办法是什么？

就使网站与读者视图兼容而言，这不是您应该全力追求的事情，它会导致错误的决定。

试图调整 Stack Overflow 以满足读者视图的标准最多只会导致黑客入侵，最坏的情况是引入可访问性问题！

这里的问题是问答网站在读者视图中表现不佳。在阅读器视图上尝试 Quora，它也不起作用。

为了说明我对此的思考方式，可以将最初的问题更改为“FireFox 可以对其读者视图做什么以使其与问答网站兼容”，然后就他们用来制定标准的讨论展开讨论要显示什么内容，因为问题在于它们的实现而不是 Stack Overflow / Quora（不是 Stack Overflow / Quora 等无论如何都是完美的！）。

相反，我可以想到一些解决方案，这些解决方案将允许我相信您正在使用阅读器视图的辅助功能：-

自己修

由于这一切似乎都源于行高的变化，您可以创建一个插件或书签来修复页面上的所有样式。

由于可读性源代码可用，您可以轻松调整源代码以考虑 Stack Overflow 的特定设计（给 +200 分的额外权重，<div id="mainbar"因为这是我们要显示的容器）。

然后只需使用修改后的可读性脚本调整书签以指向您自己的服务器，瞧，工作解决方案。

如果您决定这样做与社区分享，它可以为您赢得一些不错的声誉，并且在简历/您的社交媒体资料等上看起来很棒。

获取堆栈溢出来修复它！

更好的选择是让 Stack Overflow 实现可访问性设置。Stack Overflow 应该努力成为该领域的领导者，我相信对可访问性功能的要求会受到欢迎并最终添加到开发路线图中。

询问辅助功能设置屏幕或下拉菜单。一个好的起点是用户界面选项组件。. 单击“+ 显示首选项”，您将看到可以调整站点上的大量内容。

通过这种方式，您可以固定行高（这似乎是此操作的原始起点，因为您可以使用它来根据自己的喜好调整设计）。然后他们还可以实现类似于阅读器视图的简化视图（“聚焦模式”）。

作为这种方法的另一个好处，编辑器仍然可用，您可以以易于阅读的格式查看输出。

这似乎是最好的解决方案，并且在像 SO 这样的站点上的复杂性方面处于技术限制/设计考虑的低端。

读者观点标准系统的最终讽刺

在撰写本文时，如果您在 FireFox 中以阅读器视图模式查看此页面，您将看到问题标题，然后将我的答案视为正文。您的整个问题正文将从页面中删除。我认为这恰好完美地总结了问题！