Search code examples
javascripthtmlmathmathjaxsinglepage

Why does MathML codes appear different on one-single HTML file, but it worked on Jsfiddle? MathJar for one-single HTML?

I copied the following MathML code from MathJax and pasted it offline as a one-single HTML file. When I previewed the page, it appeared different from the original MathJax version. This is the HTML file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
"http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Maths</title>
</head>
<body>
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
  <msup>
    <mrow>
      <mo>(</mo>
      <munderover>
        <mo>&#x2211;<!-- ∑ --></mo>
        <mrow class="MJX-TeXAtom-ORD">
          <mi>k</mi>
          <mo>=</mo>
          <mn>1</mn>
        </mrow>
        <mi>n</mi>
      </munderover>
      <msub>
        <mi>a</mi>
        <mi>k</mi>
      </msub>
      <msub>
        <mi>b</mi>
        <mi>k</mi>
      </msub>
      <mo>)</mo>
    </mrow>
    <mrow class="MJX-TeXAtom-ORD">
      <mspace width="negativethinmathspace" />
      <mspace width="negativethinmathspace" />
      <mn>2</mn>
    </mrow>
  </msup>
  <mo>&#x2264;<!-- ≤ --></mo>
  <mrow>
    <mo>(</mo>
    <munderover>
      <mo>&#x2211;<!-- ∑ --></mo>
      <mrow class="MJX-TeXAtom-ORD">
        <mi>k</mi>
        <mo>=</mo>
        <mn>1</mn>
      </mrow>
      <mi>n</mi>
    </munderover>
    <msubsup>
      <mi>a</mi>
      <mi>k</mi>
      <mn>2</mn>
    </msubsup>
    <mo>)</mo>
  </mrow>
  <mrow>
    <mo>(</mo>
    <munderover>
      <mo>&#x2211;<!-- ∑ --></mo>
      <mrow class="MJX-TeXAtom-ORD">
        <mi>k</mi>
        <mo>=</mo>
        <mn>1</mn>
      </mrow>
      <mi>n</mi>
    </munderover>
    <msubsup>
      <mi>b</mi>
      <mi>k</mi>
      <mn>2</mn>
    </msubsup>
    <mo>)</mo>
  </mrow>
</math>
</body>
</html>

Here is how it renders:

Browser snapshot with unrendered MathML

I tested on Jsifiddle and it worked very well. I don't understand why. Check: http://jsfiddle.net/05cqx9qy/

How can I fix this? Is it possible to use MathML offline in a single-file HTML document?

I also tested in Firefox and in Safari, it still appeared different. On Jsfiddle, in all the browser, it worked very well. How can it work only on Jsfiddle and not on the own browsers?

I want to use the MathJax Javascript program and extensions for my HTML file, but it includes many Javascript files, and I don't know if I can unify all the MathJax Javascript files into one and paste everything for my offline single-file HTML document. I think it won't work as one single HTML file. I want my HTML file to be one file and to be independent of folders, images (I convert to base64) and files.

Solution

  • The reason why the HTML will render differently is because native MathML support in browser engines is limited to Gecko/Firefox (good) and WebKit/Safari (ok). MathJax would allow you to use MathML across browsers but your sample HTML does not load MathJax anywhere.

    As for single-file builds, there is no official way but if you restrict functionality a little, MathJax can be wrapped into a single JavaScript file; it currently requires a bit of MathJax knowledge but this experiment might give you ideas. A single-file build can only work if you restrict yourself to SVG output since the HTML-CSS output will need fonts.