There is a rendering issue in Firefox when a MathML, ex,<mi> element contains an <a> tag around plain text. In this case, the italic style applied to <mi> is lost.
Steps to reproduce:
- Add a formula using MathML with an <a> tag inside the <mi> element (add qid to formula). Example from https://w.wiki/d7M:
<math xmlns="http://www.w3.org/1998/Math/MathML" class="mwe-math-element mwe-math-element-inline"> <mrow data-mjx-texclass="ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi><a href="https://en.wikipedia.org/wiki/Energy" title="energy">E</a></mi> <mo stretchy="false">=</mo> <mi><a href="https://en.wikipedia.org/wiki/Mass" title="mass">m</a></mi> <msup> <mi><a href="https://en.wikipedia.org/wiki/Speed_of_light" title="speed of light in vacuum">c</a></mi> <mrow data-mjx-texclass="ORD"><mn>2</mn></mrow> </msup> </mstyle> </mrow> </math>
- View page in Firefox.
Expected behavior:
Variables (E, m, c) are italicized as per mathematical convention.
Actual behavior:
When <a> is inside <mi>, Firefox displays the characters in upright font instead of italic.
Proposed fix:
Instead of putting <a> inside <mi>, wrap <a> around <mi> so that the MathML element styling is preserved.
Desired output example:
<math xmlns="http://www.w3.org/1998/Math/MathML" class="mwe-math-element mwe-math-element-inline"> <mrow data-mjx-texclass="ORD"> <mstyle displaystyle="true" scriptlevel="0"> <a href="https://en.wikipedia.org/wiki/Energy" title="energy"><mi>E</mi></a> <mo stretchy="false">=</mo> <a href="https://en.wikipedia.org/wiki/Mass" title="mass"><mi>m</mi></a> <msup> <a href="https://en.wikipedia.org/wiki/Speed_of_light" title="speed of light in vacuum"><mi>c</mi></a> <mrow data-mjx-texclass="ORD"><mn>2</mn></mrow> </msup> </mstyle> </mrow> </math>
Environment:
- Browser: Firefox (all recent versions)
- This works correctly in Chrome (italics preserved), so this is Firefox-specific behavior.
Notes:
- MathJax will need a small modification in its link-generation step.