开启accessibility explorer时数学表达式括号周边间距异常问题
问题描述
启用accessibility explorer(无障碍探索)功能时,数学公式渲染会出现间距异常:字符f、M以及函数名cos和后续括号之间会出现多余的大间距。
按照数学排版的可读性规范,这类函数名、单字符变量和紧跟的括号属于同一个数学对象,间距必须保持紧凑:例如M(x)是完整的函数调用/带参变量形式,如果渲染为M (x),很容易被读者误认为是两个独立元素相乘。
- 当前异常渲染效果:

- 预期正常渲染效果:

复现流程
- 进入对应公式调试编辑页面
- 分别将accessibility explorer属性设为
false和true,对比公式渲染差异:属性设为false时间距完全正常,设为true即出现前述间距问题。
核心需求:在保留accessibility explorer无障碍功能的前提下,修复公式排版间距异常。
修复方法
这个是MathJax v3版本启用explorer无障碍组件后的默认样式问题:组件为了扩大可交互元素的点击/选中热区,给语义单元格默认加了全向内边距,其中水平方向的内边距就造成了函数和括号之间的视觉空隙。不需要修改核心渲染逻辑,直接通过自定义CSS覆盖默认样式即可修复,完全不会影响屏幕阅读器识别、键盘导航等无障碍功能的正常使用:
/* 移除无障碍模块带来的多余水平间距,保留垂直方向交互热区 */ .mjx-explorer-cell { padding-left: 0 !important; padding-right: 0 !important; }
如果不需要保留垂直方向的交互热区,也可以直接把全向内边距设为0,渲染效果和关闭explorer组件时完全一致。
配置完成后清空页面缓存重新渲染公式,就能在启用accessibility explorer的前提下,得到符合数学排版规范的紧凑间距效果。
内容的提问来源于stack exchange,提问作者Henok Tesfaye
相关产品推荐
相关产品推荐

