MathML In Action

MathML in Action

Are you seeing nifty equations throughout this page? No? Too bad. Here is a screenshot of what you are missing. Download a MathML-enabled Mozilla build to remedy this sad situation.

You already have a MathML-enabled build but what you see on the screenshot is not what you get? In that case you are probably missing some crucial MathML fonts.

Now that you are well-equipped, you should be able to see this inline equation with varying accents: $\hat{x}+\widehat{xy}+\widehat{xyz}.$ Next to it is this tiny formula, $det\left|\genfrac{}{}{0ex}{}{a}{c}\genfrac{}{}{0ex}{}{b}{d}\right|=ad-bc,$ which can also be typeset in displaystyle as $$det\left|\begin{array}{cc}a& b\\ c& d\end{array}\right|=ad-bc.$$

Mathematical typesetting is picky. MathML in Mozilla aims at complying with the MathML specification so that What You See Is What You Markup, or to put it another way What You See Is What You Made, or in short "WYSIWYM". The difference between these two is in the markup! $${(...{({(a_0+a_1)}^{n_1}+a_2)}^{n_2}+...+a_p)}^{n_p}$$ $${(...{({(a_0+a_1)}^{n_1}+a_2)}^{n_2}+...+a_p)}^{n_p}$$

The roots of this bold equation $y^3+py+q=0$ are also bold $$y=\sqrt[3]{-\frac{q}{2}+\sqrt[2]{\frac{q^2}{4}+\frac{p^3}{27}}}+\sqrt[3]{-\frac{q}{2}-\sqrt[2]{\frac{q^2}{4}+\frac{p^3}{27}}}.$$

As for the roots of the equation $a{x}^2+bx+c=0,$ click anywhere in the yellow area to zoom-in/zoom-out:

    <p>
      <math display="block">
        <mstyle id="zoomableMath" mathbackground="yellow">
          <mrow>
            <mi>x</mi>
            <mo>=</mo>
            <mfrac>
              <mrow>
                <mrow>
                  <mo>-</mo>
                  <mi>b</mi>
                </mrow>
                <mo>&#xB1;</mo>
                <msqrt>
                  <mrow>
                    <msup>
                      <mi>b</mi>
                      <mn>2</mn>
                    </msup>
                    <mo>-</mo>
                    <mrow>
                      <mn>4</mn>
                      <mi>a</mi>
                      <mi>c</mi>
                    </mrow>
                  </mrow>
                </msqrt>
              </mrow>
              <mrow>
                <mn>2</mn>
                <mi>a</mi>
              </mrow>
            </mfrac>
          </mrow>
        </mstyle>
      </math>
    </p>

      function zoomToggle()
      {
      if (this.hasAttribute("mathsize")) {
      this.removeAttribute("mathsize");
      } else {
      this.setAttribute("mathsize", "200%");
      }
      }

      function load()
      {
      document.getElementById("zoomableMath").
      addEventListener("click", zoomToggle, false);
      }

      window.addEventListener("load", load, false);

Consider an interesting markup like this $$\{\begin{array}{c}{u}_t+{f\left(u\right)}_x=0\\ u(0,x)=\{\begin{array}{cc}{u}^{-}& \text{if }x<0\\ u^{+}& \text{if }x>0\end{array}\end{array}$$ or other complex markups like these $${\widehat{\mathrm{Ell}}}_Y(Z;z,\tau ):={\int }_Y\left(\prod _l\frac{\left(\frac{y_l}{2\pi \mathrm{i}}\right)\theta (\frac{y_l}{2\pi \mathrm{i}}-z){\theta }^{\prime }(0)}{\theta (-z)\theta \left(\frac{y_l}{2\pi \mathrm{i}}\right)}\right)\times \left(\prod _k\frac{\theta (\frac{e_k}{2\pi \mathrm{i}}-({\alpha }_k+1)z)\theta (-z)}{\theta (\frac{e_k}{2\pi \mathrm{i}}-z)\theta (-({\alpha }_k+1)z)}\right)$$ $$\pi (n)=\sum _{m=2}^n\lfloor {\left(\sum _{k=1}^{m-1}\lfloor (m/k)/\lceil m/k\rceil \rfloor \right)}^{-1}\rfloor$$ $${\Vert \varphi \Vert }_{W_s^k({\Omega }_g)}\stackrel{\scriptscriptstyle\mathrm{def}}{=}{\left(\sum _{\left|\alpha \right|\leqq k}{‖\frac{{\partial }^{\alpha }\varphi }{\partial {\xi }^{\alpha }}‖}_{L^s({\Omega }_g)}^s\right)}^{1/s}$$

For more examples, refer to links on the MathML Project page, and if you are building your own Mozilla binary, see the directory mozilla/layout/mathml/tests.

Now, what next? As you try out MathML in Mozilla, what to do with those few things that appear to you not to work as per the MathML spec? Or what about those things that just seem itchy, and that you wish could be done just a little better? Or what about those things that were working before and are not working anymore (a.k.a. regressions)? In either case, head over to Bugzilla to report the discrepancies. Bugzilla has a big memory for these things, and besides, how would your problems be fixed if they are not reported?!

Getting involved is part of your contribution towards enriching Gecko with an elegant standards-compliant MathML renderer. Your feedback can be manifested by putting MathML content on the web, reporting bugs in Bugzilla, and, if you can help with code, inspecting/improving the current code, and/or picking up an item in the ToDo list.