MathML三围栏结构浏览器失效？中间竖线无法随内容增高

在你提供的可伸缩括号MathML结构中：

<math displaystyle="true">
    <mi>y</mi>
    <mo>=</mo>
    <mrow>
       <mo>⟨</mo>
       <mrow>
         <mfrac><mi>a</mi><mi>b</mi></mfrac>
       </mrow>
       <mo>|</mo>
       <mrow><mi>x</mi></mrow>
       <mo>⟩</mo>
    </mrow>
</math>

中间的竖线围栏在Firefox和Chrome中不随内容增高，这不属于MathML规范的bug，而是使用方式的问题。

原因分析 #

MathML中，只有部分括号类符号（如⟨、⟩、(、)等）默认开启了stretchy="true"属性，会随内容高度自动伸缩；而普通竖线|默认不具备这个属性，所以只会显示固定高度。

解决方法 #

给竖线围栏添加stretchy="true"属性，同时可搭配symmetric="true"让它垂直居中对齐，修改后的代码如下：

<math displaystyle="true">
    <mi>y</mi>
    <mo>=</mo>
    <mrow>
       <mo>⟨</mo>
       <mrow>
         <mfrac><mi>a</mi><mi>b</mi></mfrac>
       </mrow>
       <mo stretchy="true" symmetric="true">|</mo>
       <mrow><mi>x</mi></mrow>
       <mo>⟩</mo>
    </mrow>
</math>

类比TeX的处理逻辑 #

类似TeX中braket*宏的作用，就是自动为围栏符号添加伸缩逻辑；而MathML需要显式声明伸缩属性，才能让浏览器触发对应的伸缩行为。

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