MathJax Rendering HTML input fields in MathML

Question

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

<input id="txtBox" type="text" size="1" style="text-align: center">

Within mathML equations. When I was originally creating and testing them locally on Firefox everything looked fine (natively renders the content). However, now that I've uploaded it to our site, which uses mathjax 2.01 to render the content I get 'Unknown node type: input' errors everywhere an input box should be. I currently have the boxes wrapped in

 <annotation> 

tags as described in another post here however I'm still receiving the same error.

<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" /></input>
    </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" /></input>
  </annotation-xml>
 </semantics>
</mstyle>
</math>
</script>

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.