MathJax Rendering HTML input fields in MathML

Question

I\'m attempting to include html input fields such as:

Wit

Answer 1

The MathML3.0 specification doesn't provide for HTML elements embedded directly in the MathML. HTML5 extended the definition to allow HTML tags within token elements in MathML, like <mtext>, for example. MathJax, however, was developed before HTML5 was complete, and it follows the MathML3.0 specification, so HTML tags are not allowed in general.

It is possible, however, to use the <semantics> and <annotation-xml> elements to include HTML within MathML. Note that <annotation> and <annotation-xml> can only appear as children of <semantics>, so you need both. Also, the body of an <annotation> tag is supposed to be plain text, not HTML tags, so to include HTML, you must use <annotation-xml> not <annotation>. Finally, you need to provide the encoding attribute for the <annotation-xml> tag, and the contents of the annotation needs an xmlns attribute to make sure that it is parsed in the popper namespace.

Here is an example that works with MathJax as well as native MathML in Firefox:

<script type="math/mml">
<math>
  <mstyle displaystyle="true">
    <msup>
      <mi>x</mi>
      <semantics>
        <annotation-xml encoding="application/xhtml+xml">
          <input xmlns="http://www.w3.org/1999/xhtml" style="text-align:right" type="text" size="2" name="n" />
        </annotation-xml>
      </semantics>
    </msup>
    <mo>+</mo>
    <semantics>
      <annotation-xml encoding="application/xhtml+xml">
        <input xmlns="http://www.w3.org/1999/xhtml" type="text" size="2" name="b" />
      </annotation-xml>
    </semantics>
  </mstyle>
</math>
</script>

We do hope to improve the situation in a future version of MathJax, but right now this is the only alternative. I hope that works for you.