4

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>
Glynbeard
  • 1,389
  • 2
  • 19
  • 31
  • If more information related to the problem is required, I can provide some pictures etc. as necessary. I'm still unable to fix this problem as of right now and seeking assistance. – Glynbeard Jan 17 '14 at 15:46

1 Answers1

5

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.

Davide Cervone
  • 11,211
  • 1
  • 28
  • 48
  • Thanks for your assistance! It is working perfectly in Firefox and even Internet explorer, however, it gives me the following error in chrome: Error parsing MathML: error on line 1 at column 378: Opening and ending tag mismatch: input line 0 and annotation-xml Is there any way to fix this as well? I don't believe there is actually a mismatch occurring. – Glynbeard Jan 17 '14 at 20:53
  • It's probably due to the self-closing `` tag. Try making it `` and see if that helps. – Davide Cervone Jan 17 '14 at 20:57
  • Hmm I tried that and am still receiving the same error in chrome only. Is there anything else I can try? If I could just get it working in chrome as well I'd be good to go! Thanks again for your assistance thus far. – Glynbeard Jan 17 '14 at 21:08
  • 1
    Are you always using MathJax, or in Firefox do you just use native MathML without MathJax? Also, is your HTML file created by a program you are working on? Try putting `` around the `...` and see if that helps. I suspect that Chrome is removing the `` before MathJax processes the page, and this will prevent that. – Davide Cervone Jan 17 '14 at 21:15
  • Okay I tried that, the code I`m testing with now is the (now slightly modified) code you gave me. I`ve edited this code into my original post so you can see what I am working with. I still see a similar error however. The version of chrome I`m currently using this on is: 33.0.1750.29 beta-m. If that helps at all. – Glynbeard Jan 17 '14 at 21:27
  • I'll have to look into it. Will get back to you as soon as I have a chance. – Davide Cervone Jan 17 '14 at 22:19
  • 1
    OK, the example works for me in Chrome 32, but you have to change the `/>` to `>` before the `` or remove the ``. You *do* need to have the ` – Davide Cervone Jan 18 '14 at 00:49
  • Awesome, thanks for your help! I'm home for the weekend so I won't be able to test until Monday, so I'll reply then when I have it working. – Glynbeard Jan 18 '14 at 04:13
  • Everything is working perfectly now that I made those changes. Thanks again! – Glynbeard Jan 20 '14 at 19:39