移动端MathML矩阵括号渲染异常问题求助

问题分析 #

移动端MathML渲染引擎对手动添加的<mo fence="true">括号元素的高度适配支持不完善，无法根据内部矩阵的高度自动拉伸括号，导致显示异常；而桌面端渲染引擎的处理逻辑更完善，所以能正常显示。

解决方案 #

推荐两种可行的修复方式：

方式1：使用<mfenced>标签（更简洁的原生方案）

<mfenced>是MathML专门用于包裹内容并添加括号的标签，会自动根据内部内容高度适配括号大小，兼容性更好。修改后的代码如下：

<math display="block" class="tml-display" style="display:block math;">
  <mfenced open="[" close="]">
    <mtable columnalign="center center">
      <mtr>
        <mtd style="padding-left:0em;">
          <mn>1</mn>
        </mtd>
        <mtd style="padding-right:0em;">
          <mn>1</mn>
        </mtd>
      </mtr>
      <mtr>
        <mtd style="padding-left:0em;">
          <mn>1</mn>
        </mtd>
        <mtd style="padding-right:0em;">
          <mn>1</mn>
        </mtd>
      </mtr>
    </mtable>
  </mfenced>
</math>

方式2：给手动添加的<mo>标签加上stretchy="true"属性

明确告诉渲染引擎需要拉伸括号以适配内部内容高度，修改后的代码如下：

<math display="block" class="tml-display" style="display:block math;">
  <mrow>
    <mo fence="true" form="prefix" stretchy="true">[</mo>
    <mtable columnalign="center center">
      <mtr>
        <mtd style="padding-left:0em;">
          <mn>1</mn>
        </mtd>
        <mtd style="padding-right:0em;">
          <mn>1</mn>
        </mtd>
      </mtr>
      <mtr>
        <mtd style="padding-left:0em;">
          <mn>1</mn>
        </mtd>
        <mtd style="padding-right:0em;">
          <mn>1</mn>
        </mtd>
      </mtr>
    </mtable>
    <mo fence="true" form="postfix" stretchy="true">]</mo>
  </mrow>
</math>

说明 #

两种方式都能解决移动端括号显示异常的问题，其中<mfenced>的写法更符合MathML的语义化规范，推荐优先使用；如果需要保留手动添加括号的结构，添加stretchy="true"属性即可。

内容的提问来源于stack exchange，提问作者astle dsa