MathML In Action

  • Revision slug: Mozilla_MathML_Project/Start
  • Revision title: MathML In Action
  • Revision id: 333217
  • Created:
  • Creator: fred.wang
  • Is current revision? No
  • Comment

Revision Content

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: x ^ + xy ^ + xyz ^ . Next to it is this tiny formula, det | a c b d | = a d - b c , which can also be typeset in displaystyle as det | a b c d | = a d - b c .

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 + p y + q = 0 are also bold y = - q 2 + q 2 4 + p 3 27 2 3 + - q 2 - q 2 4 + p 3 27 2 3 .

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

Zoomable Math

HTML Content

    <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>

JavaScript Content

      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);

{{ EmbedLiveSample('Zoomable_Math') }}

Consider an interesting markup like this { u t + f ( u ) x = 0 u ( 0 , x ) = { u - if  x < 0 u + if  x > 0 or other complex markups like these Ell ^ Y ( Z ; z , τ ) := Y ( l ( y l 2 π i ) θ ( y l 2 π i - z ) θ ( 0 ) θ ( - z ) θ ( y l 2 π i ) ) × ( k θ ( e k 2 π i - ( α k + 1 ) z ) θ ( - z ) θ ( e k 2 π i - z ) θ ( - ( α k + 1 ) z ) ) π ( n ) = m = 2 n ( k = 1 m - 1 ( m / k ) / m / k ) - 1 ϕ W s k ( Ω g ) ( | α | k α ϕ ξ α L s ( Ω g ) s ) 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.

 

Revision Source

<h2 id="MathML_in_Action" style="text-align: center;">MathML in Action</h2>
<p>Are you seeing nifty equations throughout this page? No? Too bad. Here is a <a href="https://developer.mozilla.org/@api/deki/files/5690/=start.png">screenshot</a> of what you are missing. <a href="./">Download</a> a MathML-enabled Mozilla build to remedy this sad situation.</p>
<p>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 <a href="fonts/">MathML fonts</a>.</p>
<p>Now that you are well-equipped, you should be able to see this inline equation with varying accents: <math> <mrow> <mover> <mi>x</mi> <mo>^</mo> </mover> <mo>+</mo> <mover> <mrow><mi>x</mi><mo>⁢</mo><mi>y</mi></mrow> <mo>^</mo> </mover> <mo>+</mo> <mover> <mrow><mi>x</mi><mo>⁢</mo><mi>y</mi><mo>⁢</mo><mi>z</mi></mrow> <mo>^</mo> </mover> <mo>.</mo> </mrow> </math> Next to it is this tiny formula, <math> <mrow> <mo>det</mo> <mo lspace="0" rspace="0" symmetric="false">|</mo> <mfrac linethickness="0"> <mi>a</mi> <mi>c</mi> </mfrac> <mfrac linethickness="0"> <mi>b</mi> <mi>d</mi> </mfrac> <mo lspace="0" rspace="0" symmetric="false">|</mo> <mo>=</mo> <mi>a</mi> <mi>d</mi> <mo>-</mo> <mi>b</mi> <mi>c</mi> <mo>,</mo> </mrow> </math> which can also be typeset in displaystyle as <math display="block"> <mrow> <mo>det</mo> <mo>|</mo> <mtable> <mtr> <mtd> <mi>a</mi> </mtd> <mtd> <mi>b</mi> </mtd> </mtr> <mtr> <mtd> <mi>c</mi> </mtd> <mtd> <mi>d</mi> </mtd> </mtr> </mtable> <mo>|</mo> <mo>=</mo> <mi>a</mi> <mi>d</mi> <mo>-</mo> <mi>b</mi> <mi>c</mi> <mo>.</mo> </mrow> </math></p>
<p>Mathematical typesetting is picky. <a href="./">MathML in Mozilla</a> aims at complying with the <a href="http://www.w3.org/Math/">MathML specification</a> so that <i>What You See Is What You Markup</i>, or to put it another way <i>What You See Is What You Made</i>, or in short "WYSIWYM". The difference between these two is in the markup! <math display="block"> <msup> <mrow> <mo minsize="3" symmetric="false">(</mo> <mo>...</mo> <msup> <mrow> <mo minsize="2" symmetric="false">(</mo> <msup> <mrow> <mo symmetric="false">(</mo> <msub> <mi>a</mi> <mn>0</mn> </msub> <mo>+</mo> <msub> <mi>a</mi> <mn>1</mn> </msub> <mo symmetric="false">)</mo> </mrow> <msub> <mi>n</mi> <mn>1</mn> </msub> </msup> <mo>+</mo> <msub> <mi>a</mi> <mn>2</mn> </msub> <mo minsize="2" symmetric="false">)</mo> </mrow> <msub> <mi>n</mi> <mn>2</mn> </msub> </msup> <mo>+</mo> <mo>...</mo> <mo>+</mo> <msub> <mi>a</mi> <mi>p</mi> </msub> <mo minsize="3" symmetric="false">)</mo> </mrow> <msub> <mi>n</mi> <mi>p</mi> </msub> </msup> </math> <math display="block"> <msup> <mrow> <mo>(</mo> <mo>...</mo> <msup> <mrow> <mo>(</mo> <msup> <mrow> <mo>(</mo> <msub> <mi>a</mi> <mn>0</mn> </msub> <mo>+</mo> <msub> <mi>a</mi> <mn>1</mn> </msub> <mo>)</mo> </mrow> <msub> <mi>n</mi> <mn>1</mn> </msub> </msup> <mo>+</mo> <msub> <mi>a</mi> <mn>2</mn> </msub> <mo>)</mo> </mrow> <msub> <mi>n</mi> <mn>2</mn> </msub> </msup> <mo>+</mo> <mo>...</mo> <mo>+</mo> <msub> <mi>a</mi> <mi>p</mi> </msub> <mo>)</mo> </mrow> <msub> <mi>n</mi> <mi>p</mi> </msub> </msup> </math></p>
<p>The roots of this bold equation <math> <mstyle mathvariant="bold"> <msup> <mi>y</mi> <mn>3</mn> </msup> <mo>+</mo> <mi>p</mi> <mi>y</mi> <mo>+</mo> <mi>q</mi> <mo>=</mo> <mn>0</mn> </mstyle> </math> are also bold <math display="block"> <mstyle mathvariant="bold"> <mi>y</mi> <mo>=</mo> <mroot> <mrow> <mo>-</mo> <mfrac> <mi>q</mi> <mn>2</mn> </mfrac> <mo>+</mo> <mroot> <mrow> <mfrac> <msup> <mi>q</mi> <mn>2</mn> </msup> <mn>4</mn> </mfrac> <mo>+</mo> <mfrac> <msup> <mi>p</mi> <mn>3</mn> </msup> <mn>27</mn> </mfrac> </mrow> <mn>2</mn> </mroot> </mrow> <mn>3</mn> </mroot> <mo>+</mo> <mroot> <mrow> <mo>-</mo> <mfrac> <mi>q</mi> <mn>2</mn> </mfrac> <mo>-</mo> <mroot> <mrow> <mfrac> <msup> <mi>q</mi> <mn>2</mn> </msup> <mn>4</mn> </mfrac> <mo>+</mo> <mfrac> <msup> <mi>p</mi> <mn>3</mn> </msup> <mn>27</mn> </mfrac> </mrow> <mn>2</mn> </mroot> </mrow> <mn>3</mn> </mroot> <mo>.</mo> </mstyle> </math></p>
<p>As for the roots of the equation <math> <mrow> <mi>a</mi> <msup> <mi>x</mi> <mn>2</mn> </msup> <mo>+</mo> <mi>b</mi> <mi>x</mi> <mo>+</mo> <mi>c</mi> <mo>=</mo> <mn>0</mn> <mo>,</mo> </mrow> </math> click anywhere in the yellow area to zoom-in/zoom-out:</p>
<div style="display: none;">
  <h2 id="Zoomable_Math" name="Zoomable_Math">Zoomable Math</h2>
  <h3 id="HTML_Content">HTML Content</h3>
  <pre class="brush: html">
    &lt;p&gt;
      &lt;math display="block"&gt;
        &lt;mstyle id="zoomableMath" mathbackground="yellow"&gt;
          &lt;mrow&gt;
            &lt;mi&gt;x&lt;/mi&gt;
            &lt;mo&gt;=&lt;/mo&gt;
            &lt;mfrac&gt;
              &lt;mrow&gt;
                &lt;mrow&gt;
                  &lt;mo&gt;-&lt;/mo&gt;
                  &lt;mi&gt;b&lt;/mi&gt;
                &lt;/mrow&gt;
                &lt;mo&gt;&amp;#xB1;&lt;/mo&gt;
                &lt;msqrt&gt;
                  &lt;mrow&gt;
                    &lt;msup&gt;
                      &lt;mi&gt;b&lt;/mi&gt;
                      &lt;mn&gt;2&lt;/mn&gt;
                    &lt;/msup&gt;
                    &lt;mo&gt;-&lt;/mo&gt;
                    &lt;mrow&gt;
                      &lt;mn&gt;4&lt;/mn&gt;
                      &lt;mi&gt;a&lt;/mi&gt;
                      &lt;mi&gt;c&lt;/mi&gt;
                    &lt;/mrow&gt;
                  &lt;/mrow&gt;
                &lt;/msqrt&gt;
              &lt;/mrow&gt;
              &lt;mrow&gt;
                &lt;mn&gt;2&lt;/mn&gt;
                &lt;mi&gt;a&lt;/mi&gt;
              &lt;/mrow&gt;
            &lt;/mfrac&gt;
          &lt;/mrow&gt;
        &lt;/mstyle&gt;
      &lt;/math&gt;
    &lt;/p&gt;

</pre>
  <h3 id="JavaScript_Content">JavaScript Content</h3>
  <pre class="brush: js">
      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);</pre>
</div>
<p style="text-align: center;">{{ EmbedLiveSample('Zoomable_Math') }}</p>
<p>Consider an interesting markup like this <math display="block"> <mrow> <mo>{</mo> <mtable> <mtr> <mtd> <mrow> <msub> <mi>u</mi> <mi>t</mi> </msub> <mo>+</mo> <msub> <mrow> <mi>f</mi> <mo>(</mo> <mi>u</mi> <mo>)</mo> </mrow> <mi>x</mi> </msub> <mo>=</mo> <mn>0</mn> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mi>u</mi> <mo stretchy="false">(</mo> <mn>0</mn> <mo>,</mo> <mi>x</mi> <mo stretchy="false">)</mo> <mo>=</mo> <mrow> <mo>{</mo> <mtable> <mtr> <mtd> <mrow> <msup> <mi>u</mi> <mo>-</mo> </msup> </mrow> </mtd> <mtd> <mrow> <mtext>if&nbsp;</mtext> <mi>x</mi> <mo>&lt;</mo> <mn>0</mn> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <msup> <mi>u</mi> <mo>+</mo> </msup> </mrow> </mtd> <mtd> <mrow> <mtext>if&nbsp;</mtext> <mi>x</mi> <mo>&gt;</mo> <mn>0</mn> </mrow> </mtd> </mtr> </mtable> </mrow> </mrow> </mtd> </mtr> </mtable> </mrow> </math> or other complex markups like these <math display="block"> <mrow> <msub> <mover> <mi>Ell</mi> <mo>^</mo> </mover> <mi>Y</mi> </msub> <mo stretchy="false">(</mo> <mi>Z</mi> <mo>;</mo> <mi>z</mi> <mo>,</mo> <mi>τ</mi> <mo stretchy="false">)</mo> <mo>:=</mo> <msub> <mo>∫</mo> <mi>Y</mi> </msub> <mo>(</mo> <munder> <mo>∏</mo> <mi>l</mi> </munder> <mfrac> <mrow> <mrow> <mo>(</mo> <mfrac> <msub> <mi>y</mi> <mi>l</mi> </msub> <mrow> <mn>2</mn> <mi>π</mi> <mi mathvariant="normal">i</mi> </mrow> </mfrac> <mo>)</mo> </mrow> <mrow> <mi>θ</mi> <mo>(</mo> <mfrac> <msub> <mi>y</mi> <mi>l</mi> </msub> <mrow> <mn>2</mn> <mi>π</mi> <mi mathvariant="normal">i</mi> </mrow> </mfrac> <mo>-</mo> <mi>z</mi> <mo>)</mo> </mrow> <msup> <mi>θ</mi> <mo>′</mo> </msup> <mo stretchy="false">(</mo> <mn>0</mn> <mo stretchy="false">)</mo> </mrow> <mrow> <mi>θ</mi> <mo stretchy="false">(</mo> <mo>-</mo> <mi>z</mi> <mo stretchy="false">)</mo> <mrow> <mi>θ</mi> <mo>(</mo> <mfrac> <msub> <mi>y</mi> <mi>l</mi> </msub> <mrow> <mn>2</mn> <mi>π</mi> <mi mathvariant="normal">i</mi> </mrow> </mfrac> <mo>)</mo> </mrow> </mrow> </mfrac> <mo>)</mo> <mo>×</mo> <mo>(</mo> <munder> <mo>∏</mo> <mi>k</mi> </munder> <mfrac> <mrow> <mrow> <mi>θ</mi> <mo>(</mo> <mfrac> <msub> <mi>e</mi> <mi>k</mi> </msub> <mrow> <mn>2</mn> <mi>π</mi> <mi mathvariant="normal">i</mi> </mrow> </mfrac> <mo>-</mo> <mo stretchy="false">(</mo> <msub> <mi>α</mi> <mi>k</mi> </msub> <mo>+</mo> <mn>1</mn> <mo stretchy="false">)</mo> <mi>z</mi> <mo>)</mo> </mrow> <mi>θ</mi> <mo stretchy="false">(</mo> <mo>-</mo> <mi>z</mi> <mo stretchy="false">)</mo> </mrow> <mrow> <mrow> <mi>θ</mi> <mo>(</mo> <mfrac> <msub> <mi>e</mi> <mi>k</mi> </msub> <mrow> <mn>2</mn> <mi>π</mi> <mi mathvariant="normal">i</mi> </mrow> </mfrac> <mo>-</mo> <mi>z</mi> <mo>)</mo> </mrow> <mi>θ</mi> <mo stretchy="false">(</mo> <mo>-</mo> <mo stretchy="false">(</mo> <msub> <mi>α</mi> <mi>k</mi> </msub> <mo>+</mo> <mn>1</mn> <mo stretchy="false">)</mo> <mi>z</mi> <mo stretchy="false">)</mo> </mrow> </mfrac> <mo>)</mo> </mrow> </math> <math display="block"> <mrow> <mi>π</mi> <mo stretchy="false">(</mo> <mi>n</mi> <mo stretchy="false">)</mo> <mo>=</mo> <munderover> <mo>∑</mo> <mrow> <mi>m</mi> <mo>=</mo> <mn>2</mn> </mrow> <mi>n</mi> </munderover> <mrow> <mo>⌊</mo> <msup> <mrow> <mo>(</mo> <mrow> <munderover> <mo>∑</mo> <mrow> <mi>k</mi> <mo>=</mo> <mn>1</mn> </mrow> <mrow> <mi>m</mi> <mo>-</mo> <mn>1</mn> </mrow> </munderover> <mrow> <mo minsize="1.5">⌊</mo> <mo>(</mo> <mi>m</mi> <mo>/</mo> <mi>k</mi> <mo>)</mo> <mo minsize="2">/</mo> <mo>⌈</mo> <mi>m</mi> <mo>/</mo> <mi>k</mi> <mo>⌉</mo> <mo minsize="1.5">⌋</mo> </mrow> </mrow> <mo>)</mo> </mrow> <mrow> <mo>-</mo> <mn>1</mn> </mrow> </msup> <mo>⌋</mo> </mrow> </mrow> </math> <math display="block"> <mrow> <msub> <mrow> <mo>‖</mo> <mi>ϕ</mi> <mo>‖</mo> </mrow> <mrow> <msubsup> <mi>W</mi> <mi>s</mi> <mi>k</mi> </msubsup> <mo stretchy="false">(</mo> <msub> <mi>Ω</mi> <mi>g</mi> </msub> <mo stretchy="false">)</mo> </mrow> </msub> <mo>≝</mo> <msup> <mrow> <mo>(</mo> <munder> <mo>∑</mo> <mrow> <mo>|</mo> <mi>α</mi> <mo>|</mo> <mo>≦</mo> <mi>k</mi> </mrow> </munder> <msubsup> <mfenced close="‖" open="‖"> <mfrac> <mrow> <msup> <mo>∂</mo> <mi>α</mi> </msup> <mi>ϕ</mi> </mrow> <mrow> <mo>∂</mo> <msup> <mi>ξ</mi> <mi>α</mi> </msup> </mrow> </mfrac> </mfenced> <mrow> <msup> <mi>L</mi> <mi>s</mi> </msup> <mo stretchy="false">(</mo> <msub> <mi>Ω</mi> <mi>g</mi> </msub> <mo stretchy="false">)</mo> </mrow> <mi>s</mi> </msubsup> <mo>)</mo> </mrow> <mrow> <mn>1</mn> <mo>/</mo> <mi>s</mi> </mrow> </msup> </mrow> </math></p>
<p>For more examples, refer to links on the <a href="./">MathML Project</a> page, and if you are <a href="build.html">building</a> your own Mozilla binary, see the directory <i>mozilla/layout/mathml/tests</i>.</p>
<p>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 <a href="../../quality/bug-writing-guidelines.html">Bugzilla</a> 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?!</p>
<p><a href="../../get-involved.html">Getting involved</a> is part of your contribution towards enriching <a href="../../newlayout/">Gecko</a> with an elegant standards-compliant MathML renderer. Your feedback can be manifested by <a href="authoring.html">putting MathML content on the web</a>, reporting bugs in <a href="../../quality/bug-writing-guidelines.html">Bugzilla</a>, and, if you can help with code, <a href="http://lxr.mozilla.org/seamonkey/source/layout/mathml/">inspecting/improving the current code</a>, and/or picking up an item in the <a href="update.html">ToDo</a> list.</p>
<div id="cke_pastebin" style="position: absolute; top: 1775.63px; width: 1px; height: 1px; overflow: hidden; left: -1000px;">
  &nbsp;</div>
Revert to this revision