Mozilla Readability项目中的MathJax公式保留技术解析

背景介绍

Mozilla Readability是一个用于提取网页正文内容的JavaScript库，它能智能地识别并提取网页中的主要阅读内容，同时去除广告、导航栏等干扰元素。在处理包含数学公式的网页时，特别是使用MathJax渲染的数学公式，Readability的默认处理方式可能会导致公式显示异常。

问题本质

MathJax v3生成的数学公式通常包含三类特殊标签：

1. <mjx-container>：公式的整体容器，负责处理尺寸和对齐
2. <mjx-math>：包含实际渲染的数学符号
3. <mjx-assistive-mml>：包含MathML格式的公式表示，用于辅助功能

Readability在处理时会遇到两个关键问题：

1. 由于<mjx-math>标签带有aria-hidden="true"属性，会被Readability视为隐藏内容而移除
2. <mjx-container>标签可能因为包含"menu"类名而被误判为不相关内容

技术原理深度解析

可见性判断机制

Readability通过_isProbablyVisible()函数判断元素是否可见，该函数会检查以下属性：

• display: none样式
• visibility: hidden样式
• aria-hidden="true"属性
• 极小的尺寸(1x1像素)

由于MathJax的<mjx-math>标签带有aria-hidden="true"属性，这原本是为了避免屏幕阅读器重复读取公式内容(因为辅助标签中已有MathML表示)，但却导致Readability将其移除。

候选内容选择机制

Readability使用正则表达式匹配来判断哪些元素可能是正文内容。默认配置中：

• unlikelyCandidates正则会匹配包含"menu"等关键词的类名
• 由于MathJax的默认类名中包含"CtxtMenu"，导致容器被误判

解决方案分析

经过技术讨论，最终确认最优解决方案是：

1. 保留MathML核心：只需保留<math>标签即可，现代浏览器(2023年后)都已原生支持MathML渲染
2. 移除冗余容器：<mjx-container>和<mjx-math>在去除样式后实际上不会显示，可以安全移除
3. 辅助标签处理：<mjx-assistive-mml>中的<math>标签在去除clip:rect样式后会正常显示

实现建议

对于需要在Readability中保留数学公式的开发者，建议采用以下方法之一：

1. 预处理DOM：在使用Readability前，提取所有<math>标签并暂时存储，处理后再恢复
2. 修改配置：调整Readability的可见性判断逻辑，为MathJax相关标签添加例外
3. 后处理内容：对Readability的输出进行二次处理，补充可能丢失的公式

技术启示

这一案例展示了内容提取工具在处理特殊内容时面临的挑战，特别是当：

• 内容使用非标准HTML标签
• 出于可访问性考虑使用了非常规属性
• 视觉呈现依赖特定CSS样式

开发者需要理解工具的内部机制，才能针对特定场景做出适当调整，确保关键内容得以保留。同时，这也反映了现代Web内容复杂性的增加，要求工具具备更强的适应能力。