# Revision 385077 of Basics

• Revision slug: Mozilla/MathML_Project/Basics
• Revision title: Basics
• Revision id: 385077
• Created:
• Creator: fscholz
• Is current revision? Yes
• Comment
Tags:

## MathML Basics

This document illustrates some basic MathML constructions. It is tailored to display correctly with just the Symbol font. You can view its source. However, MathML documents tend to be verbose and you might get lost trying to locate a MathML fragment with the usual view source. This demo has been made to illustrate the following aspects. You can right-click on any math fragment of interest throughout this document. The context menu won't show up. Rather, the math fragment will zoom, and if you right-click a second time, you will see the MathML WYSIWYG markup of the fragment, and if you right-click again a third time, the fragment will revert to its initial state. This tri-state mode is aimed at limiting conflicts with other agents that compete for the mouse.

With MathML, one can build sets such as (go on, right-click any of these equations to experiment the zoom) $\left\{0,1,2,3,4\right\}$ or $\left\{⌊\frac{a}{b}⌋|{a}^{2}+{b}^{2}\le 3\right\}$, write calculus $\frac{dy}{dx}=\frac{1}{{y}^{2}}$, form rather complicated expressions $\underset{n\to N}{lim}{\left(1+\frac{1}{n}\right)}^{n}-{e}^{N}$, $k=\frac{\frac{{\partial }^{2}z}{\partial {x}^{2}}\frac{{\partial }^{2}z}{\partial {y}^{2}}-{\left(\frac{{\partial }^{2}z}{\partial x\partial y}\right)}^{2}}{{\left(1+{\left(\frac{\partial z}{\partial x}\right)}^{2}+{\left(\frac{\partial z}{\partial y}\right)}^{2}\right)}^{2}}$, write vector equations $Y = a ⁢ X + b$, etc.

Notice how the mathematics appear in the main flow of text and respond as you resize the window. You can also make displayed equations, such as the following ones:

$x → maps to y = f n ⁡ ( x ) = ( 1 + 1 x n ) n$ $∫ a b f ( x ) d x = b - a 6 [ f ( a ) + 4 f ( a + b 2 ) + f ( b ) ] - ( b - a ) 5 4 ! 5 ! f ( 4 ) ( η ) , a ≤ η ≤ b$ $| x | = { - x if x < 0 x otherwise$ You can also typeset 2D mathematical constructs such as matrices. The following example shows the i-th step of the multiplication of a matrix A by a vector x (notice how ${a}_{i1},...,{a}_{in},{x}_{1}$ are on the same baseline, other alignments are possible): $i-th row [ a11 a12 a13 ... a1n : : : ... : ai1 ai2 ai3 ... ain : : : : an1 an2 an3 ... a n n ] [ x1 x2 x3 : xn ]$

In Mozilla, MathML runs inside the main browser. So it responds to other browser operations such as the zoom (try View -> Text Zoom), and you can do links $a 2 + b 2 = c 2$, apply stylistic effects ${a}^{2}+{b}^{2}={c}^{2}$ , or use color ${a}^{2}+{b}^{2}\colorbox[rgb]{1,1,0}{=}{c}^{2}$ in very strange ways $p(x) q(x) = a0 + a1x + a2 x2 + ... + an-1 xn-1 b0 + b1x + b2 x2 + ... + bn-1 xn-1 .$

You can also do other weird and risky things which are not portable, bongo warns, such as mixing MathML with other markups

## MathML and Javascript

### HTML Content

```<p>
And you can turn to JavaScript and the DOM for dynamic operations.
</p>

<div style="text-align:center">
Fill the gaps in this matrix with resizable input fields.
</div>
<math class="inputmath" display="block">
<mrow>
<mi>A</mi>
<mo>=</mo>
<mo>[</mo>
<mtable>
<mtr>
<mtd><mn>1</mn></mtd>
<mtd>
<mtext><input id="input12" value="?" size="1"/></mtext>
</mtd>
</mtr>
<mtr>
<mtd>
<mtext><input id="input21" value="?" size="1"/></mtext>
</mtd>
<mtd><mn>4</mn></mtd>
</mtr>
</mtable>
<mo>]</mo>
</mrow>
[/itex]
<div style="text-align:center">
Left size:
<a class="control" href="javascript:incrementInput('input21', 1);" title="increase input">+</a>
<a class="control" href="javascript:incrementInput('input21',-1);" title="decrease input">-</a>

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

Right size:
<a class="control" href="javascript:incrementInput('input12', 1);" title="increase input">+</a>
<a class="control" href="javascript:incrementInput('input12',-1);" title="decrease input">-</a>
<br/>
(click these control buttons to see their effects.)
</div>

<p>
Each entry of the following matrix represents
[itex]
<msup><mrow><mo>(</mo><mi>x</mi><mo>+</mo><mi>y</mi><mo>)</mo></mrow><mi>n</mi></msup>
[/itex] for some <i>n</i>.
When you left-click any individual entry, it should toggle between its expanded and
unexpanded forms. You can also <a href="javascript:unexpand();">unexpand all</a> or
<a href="javascript:expand();">expand all</a>.
</p>

<div>
<math display="block">
<mtable>
<mtr>
<mtd>
<mtable align="axis" columnalign="left left left">
<mtr>
<mtd>
<maction id="a11" actiontype="toggle" selection="2">
<msup>
<mrow>
<mo>(</mo>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
<mo>)</mo>
</mrow>
<mn>0</mn>
</msup>
<mn>1</mn>
</maction>
</mtd>
<mtd>
<maction id="a12" actiontype="toggle" selection="2">
<msup>
<mrow>
<mo>(</mo>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
<mo>)</mo>
</mrow>
<mn>1</mn>
</msup>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
</maction>
</mtd>
<mtd>
<maction id="a13" actiontype="toggle" selection="2">
<msup>
<mrow>
<mo>(</mo>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
<mo>)</mo>
</mrow>
<mn>2</mn>
</msup>
<mrow>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<mrow>
<mn>2</mn>
<mo>&InvisibleTimes;</mo>
<mi>x</mi>
<mo>&InvisibleTimes;</mo>
<mi>y</mi>
</mrow>
<mo>+</mo>
<msup>
<mi>y</mi>
<mn>2</mn>
</msup>
</mrow>
</maction>
</mtd>
</mtr>
<mtr>
<mtd>
<maction id="a21" actiontype="toggle" selection="2">
<msup>
<mrow>
<mo>(</mo>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
<mo>)</mo>
</mrow>
<mn>1</mn>
</msup>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
</maction>
</mtd>
<mtd>
<maction id="a22" actiontype="toggle" selection="2">
<msup>
<mrow>
<mo>(</mo>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
<mo>)</mo>
</mrow>
<mn>2</mn>
</msup>
<mrow>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<mrow>
<mn>2</mn>
<mo>&InvisibleTimes;</mo>
<mi>x</mi>
<mo>&InvisibleTimes;</mo>
<mi>y</mi>
</mrow>
<mo>+</mo>
<msup>
<mi>y</mi>
<mn>2</mn>
</msup>
</mrow>
</maction>
</mtd>
<mtd>
<maction id="a23" actiontype="toggle" selection="2">
<msup>
<mrow>
<mo>(</mo>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
<mo>)</mo>
</mrow>
<mn>3</mn>
</msup>
<mrow>
<msup>
<mi>x</mi>
<mn>3</mn>
</msup>
<mo>+</mo>
<mrow>
<mn>3</mn>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>&InvisibleTimes;</mo>
<mi>y</mi>
</mrow>
<mo>+</mo>
<mrow>
<mn>3</mn>
<mo>&InvisibleTimes;</mo>
<mi>x</mi>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>y</mi>
<mn>2</mn>
</msup>
</mrow>
<mo>+</mo>
<msup>
<mi>y</mi>
<mn>3</mn>
</msup>
</mrow>
</maction>
</mtd>
</mtr>
<mtr>
<mtd>
<maction id="a31" actiontype="toggle" selection="2">
<msup>
<mrow>
<mo>(</mo>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
<mo>)</mo>
</mrow>
<mn>2</mn>
</msup>
<mrow>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<mrow>
<mn>2</mn>
<mo>&InvisibleTimes;</mo>
<mi>x</mi>
<mo>&InvisibleTimes;</mo>
<mi>y</mi>
</mrow>
<mo>+</mo>
<msup>
<mi>y</mi>
<mn>2</mn>
</msup>
</mrow>
</maction>
</mtd>
<mtd>
<maction id="a32" actiontype="toggle" selection="2">
<msup>
<mrow>
<mo>(</mo>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
<mo>)</mo>
</mrow>
<mn>3</mn>
</msup>
<mrow>
<msup>
<mi>x</mi>
<mn>3</mn>
</msup>
<mo>+</mo>
<mrow>
<mn>3</mn>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>&InvisibleTimes;</mo>
<mi>y</mi>
</mrow>
<mo>+</mo>
<mrow>
<mn>3</mn>
<mo>&InvisibleTimes;</mo>
<mi>x</mi>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>y</mi>
<mn>2</mn>
</msup>
</mrow>
<mo>+</mo>
<msup>
<mi>y</mi>
<mn>3</mn>
</msup>
</mrow>
</maction>
</mtd>
<mtd>
<maction id="a33" actiontype="toggle" selection="2">
<msup>
<mrow>
<mo>(</mo>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
<mo>)</mo>
</mrow>
<mn>4</mn>
</msup>
<mrow>
<msup>
<mi>x</mi>
<mn>4</mn>
</msup>
<mo>+</mo>
<mrow>
<mn>4</mn>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>x</mi>
<mn>3</mn>
</msup>
<mo>&InvisibleTimes;</mo>
<mi>y</mi>
</mrow>
<mo>+</mo>
<mrow>
<mn>6</mn>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>y</mi>
<mn>2</mn>
</msup>
</mrow>
<mo>+</mo>
<mrow>
<mn>4</mn>
<mo>&InvisibleTimes;</mo>
<mi>x</mi>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>y</mi>
<mn>3</mn>
</msup>
</mrow>
<mo>+</mo>
<msup>
<mi>y</mi>
<mn>4</mn>
</msup>
</mrow>
</maction>
</mtd>
</mtr>
<mtr>
<mtd>
<maction id="a41" actiontype="toggle" selection="2">
<msup>
<mrow>
<mo>(</mo>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
<mo>)</mo>
</mrow>
<mn>3</mn>
</msup>
<mrow>
<msup>
<mi>x</mi>
<mn>3</mn>
</msup>
<mo>+</mo>
<mrow>
<mn>3</mn>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>&InvisibleTimes;</mo>
<mi>y</mi>
</mrow>
<mo>+</mo>
<mrow>
<mn>3</mn>
<mo>&InvisibleTimes;</mo>
<mi>x</mi>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>y</mi>
<mn>2</mn>
</msup>
</mrow>
<mo>+</mo>
<msup>
<mi>y</mi>
<mn>3</mn>
</msup>
</mrow>
</maction>
</mtd>
<mtd>
<maction id="a42" actiontype="toggle" selection="2">
<msup>
<mrow>
<mo>(</mo>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
<mo>)</mo>
</mrow>
<mn>4</mn>
</msup>
<mrow>
<msup>
<mi>x</mi>
<mn>4</mn>
</msup>
<mo>+</mo>
<mrow>
<mn>4</mn>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>x</mi>
<mn>3</mn>
</msup>
<mo>&InvisibleTimes;</mo>
<mi>y</mi>
</mrow>
<mo>+</mo>
<mrow>
<mn>6</mn>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>y</mi>
<mn>2</mn>
</msup>
</mrow>
<mo>+</mo>
<mrow>
<mn>4</mn>
<mo>&InvisibleTimes;</mo>
<mi>x</mi>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>y</mi>
<mn>3</mn>
</msup>
</mrow>
<mo>+</mo>
<msup>
<mi>y</mi>
<mn>4</mn>
</msup>
</mrow>
</maction>
</mtd>
<mtd>
<maction id="a43" actiontype="toggle" selection="2">
<msup>
<mrow>
<mo>(</mo>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
<mo>)</mo>
</mrow>
<mn>5</mn>
</msup>
<mrow>
<msup>
<mi>x</mi>
<mn>5</mn>
</msup>
<mo>+</mo>
<mrow>
<mn>5</mn>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>x</mi>
<mn>4</mn>
</msup>
<mo>&InvisibleTimes;</mo>
<mi>y</mi>
</mrow>
<mo>+</mo>
<mrow>
<mn>10</mn>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>x</mi>
<mn>3</mn>
</msup>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>y</mi>
<mn>2</mn>
</msup>
</mrow>
<mo>+</mo>
<mrow>
<mn>10</mn>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>y</mi>
<mn>3</mn>
</msup>
</mrow>
<mo>+</mo>
<mrow>
<mn>5</mn>
<mo>&InvisibleTimes;</mo>
<mi>x</mi>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>y</mi>
<mn>4</mn>
</msup>
</mrow>
<mo>+</mo>
<msup>
<mi>y</mi>
<mn>5</mn>
</msup>
</mrow>
</maction>
</mtd>
</mtr>
</mtable>
</mtd>
</mtr>
</mtable>
[/itex]
</div>

```

### CSS Content

```.control {
text-decoration: none;
font-weight: bold;
font-size: 200%;
}
input {
color: red;
}
[class="inputmath"] {
border: 1px dotted;
}
```

### JavaScript Content

```function setSelection(id,value) {
document.getElementById(id).setAttribute("selection",value);
}
function expand()
{
setSelection("a11","2");  setSelection("a12","2");  setSelection("a13","2");
setSelection("a21","2");  setSelection("a22","2");  setSelection("a23","2");
setSelection("a31","2");  setSelection("a32","2");  setSelection("a33","2");
setSelection("a41","2");  setSelection("a42","2");  setSelection("a43","2");
}
function unexpand()
{
setSelection("a11","1");  setSelection("a12","1");  setSelection("a13","1");
setSelection("a21","1");  setSelection("a22","1");  setSelection("a23","1");
setSelection("a31","1");  setSelection("a32","1");  setSelection("a33","1");
setSelection("a41","1");  setSelection("a42","1");  setSelection("a43","1");
}

function incrementInput(inputID, increment)
{
var inputElement = document.getElementById(inputID);
var size = parseInt(inputElement.size) + increment;
if (size <= 0)
size = 1
inputElement.size = size;
}```

{{ EmbedLiveSample('MathML_and_Javascript', '100%', '400px') }}

And there could be more...

## MathML Button

### HTML Content

```<div style="text-align: center">
<button style="white-space: normal;">
<span style="color: brown;">

For example, <b>click</b> this MathML continued fraction<br/>
inside this HTML button<br />
</span>
[itex]
<mrow>
<mfrac>
<mi>&pi;</mi>
<mn>4</mn>
</mfrac>
<mo>=</mo>
<mfrac numalign="left">
<mstyle scriptlevel="0">
<mn>1</mn>
</mstyle>
<mstyle scriptlevel="0">
<mrow>
<mn>2</mn>
<mo>+</mo>
<mfrac numalign="left">
<mstyle scriptlevel="0">
<msup><mn>1</mn><mn>2</mn></msup>
</mstyle>
<mstyle scriptlevel="0">
<mrow>
<mn>2</mn>
<mo>+</mo>
<mfrac numalign="left">
<mstyle scriptlevel="0">
<msup><mn>3</mn><mn>2</mn></msup>
</mstyle>
<mstyle scriptlevel="0">
<mrow>
<mn>2</mn>
<mo>+</mo>
<mfrac numalign="left">
<mstyle scriptlevel="0">
<msup><mn>5</mn><mn>2</mn></msup>
</mstyle>
<mstyle scriptlevel="0">
<mrow>
<mn>2</mn>
<mo>+</mo>
<mfrac numalign="left">
<mstyle scriptlevel="0">
<msup><mn>7</mn><mn>2</mn></msup>
</mstyle>
<mstyle scriptlevel="0">
<mn>2</mn><mo>+</mo><mo mathvariant="bold">...</mo>
</mstyle>
</mfrac>
</mrow>
</mstyle>
</mfrac>
</mrow>
</mstyle>
</mfrac>
</mrow>
</mstyle>
</mfrac>
</mrow>
</mstyle>
</mfrac>
</mrow>
[/itex]
</button>
</div>
```

{{ EmbedLiveSample('MathML_Button', '100%', '300px') }}

For more information about MathML in Mozilla, see the MathML Project Page. There are links to more samples, screenshots and instructions on how to download fonts for various platforms. These fonts are required to view other examples beyond the basic constructions illustrated here.

## MathML Background Image

### HTML Content

```<div class="background"></div>
<math display="block">
<mrow>
<msub>
<mi>Z</mi>
<mi>&alpha;</mi>
</msub>
<mrow>
<mo>(</mo>
<mi>f</mi>
<mo>)</mo>
</mrow>
<mo>=</mo>

<mfrac>
<mn>1</mn>
<mrow>
<mn>2</mn>
<mi>i</mi>
<mo>&ThinSpace;</mo>
<mi>cos</mi>
<mo>(</mo>
<mfrac>
<mrow>
<mi>&alpha;</mi>
<mi>&pi;</mi>
</mrow>
<mn>2</mn>
</mfrac>
<mo>)</mo>
</mrow>
</mfrac>

<mrow>
<msub>
<mo>&int;</mo>
<mi>C</mi>
</msub>
<mfrac>
<mrow>
<mi>f</mi>
<mo stretchy='false'>(</mo>
<mi>i</mi>
<mi>z</mi>
<mo stretchy='false'>)</mo>
<msup>
<mrow>
<mo>(</mo>
<mo>-</mo>
<mi>z</mi>
<mo>)</mo>
</mrow>
<mi>&alpha;</mi>
</msup>
</mrow>
<mrow>
<msup>
<mi>e</mi>
<mrow>
<mn>2</mn>
<mi>&pi;</mi>
<mi>z</mi>
</mrow>
</msup>
<mo>-</mo>
<mn>1</mn>
</mrow>
</mfrac>
</mrow>
<mi>d</mi>
<mi>z</mi>
</mrow>
[/itex]```

### CSS Content

```[class="background"] {
background-image: url(http://www.mozilla.org/images/mozilla-banner.gif);
opacity: 0.2;
position: absolute;
left: 0;
width: 100%;
height: 58px;
}
```

{{ EmbedLiveSample('MathML_Background_Image', '100%', '300px') }}

## Revision Source

```<h2 id="MathML_Basics">MathML Basics</h2>
<p>This document illustrates some basic MathML constructions. It is tailored to display correctly with just the Symbol font. You can view its source. However, MathML documents tend to be verbose and you might get lost trying to locate a MathML fragment with the usual view source. This demo has been made to illustrate the following aspects. You can right-click on any math fragment of interest throughout this document. The context menu won't show up. Rather, the math fragment will zoom, and if you right-click a second time, you will see the MathML WYSIWYG markup of the fragment, and if you right-click again a third time, the fragment will revert to its initial state. This tri-state mode is aimed at limiting conflicts with other agents that compete for the mouse.</p>
<p>With MathML, one can build sets such as (go on, right-click any of these equations to experiment the zoom) [itex] <mrow> <mo>{</mo> <mrow> <mn>0</mn> <mo>,</mo> <mn>1</mn> <mo>,</mo> <mn>2</mn> <mo>,</mo> <mn>3</mn> <mo>,</mo> <mn>4</mn> </mrow> <mo>}</mo> </mrow> [/itex] or [itex] <mrow> <mo>{</mo> <mrow> <mrow> <mo>⌊</mo> <mfrac> <mi>a</mi> <mi>b</mi> </mfrac> <mo>⌋</mo> </mrow> <mo fence="true" stretchy="true">|</mo> <mrow> <mrow> <msup> <mi>a</mi> <mn>2</mn> </msup> <mo>+</mo> <msup> <mi>b</mi> <mn>2</mn> </msup> </mrow> <mo>≤</mo> <mn>3</mn> </mrow> </mrow> <mo>}</mo> </mrow> [/itex], write calculus [itex] <mrow> <mfrac> <mrow> <mi>d</mi> <mi>y</mi> </mrow> <mrow> <mi>d</mi> <mi>x</mi> </mrow> </mfrac> <mo>=</mo> <mfrac> <mn>1</mn> <msup> <mi>y</mi> <mn>2</mn> </msup> </mfrac> </mrow> [/itex], form rather complicated expressions [itex] <mrow> <mrow> <munder> <mo form="prefix" movablelimits="false">lim</mo> <mrow> <mi>n</mi> <mo>→</mo> <mi>N</mi> </mrow> </munder> <msup> <mrow> <mo>(</mo> <mrow> <mn>1</mn> <mo>+</mo> <mfrac> <mn>1</mn> <mi>n</mi> </mfrac> </mrow> <mo>)</mo> </mrow> <mi>n</mi> </msup> </mrow> <mo>−</mo> <msup> <mi>e</mi> <mi>N</mi> </msup> </mrow> [/itex], [itex] <mrow> <mi>k</mi> <mo>=</mo> <mfrac> <mrow> <mfrac> <mrow> <msup> <mo>∂</mo> <mn>2</mn> </msup> <mi>z</mi> </mrow> <mrow> <mo>∂</mo> <msup> <mi>x</mi> <mn>2</mn> </msup> </mrow> </mfrac> <mfrac> <mrow> <msup> <mo>∂</mo> <mn>2</mn> </msup> <mi>z</mi> </mrow> <mrow> <mo>∂</mo> <msup> <mi>y</mi> <mn>2</mn> </msup> </mrow> </mfrac> <mo>-</mo> <msup> <mrow> <mo>(</mo> <mfrac> <mrow> <msup> <mo>∂</mo> <mn>2</mn> </msup> <mi>z</mi> </mrow> <mrow> <mo>∂</mo> <mi>x</mi> <mo>∂</mo> <mi>y</mi> </mrow> </mfrac> <mo>)</mo> </mrow> <mn>2</mn> </msup> </mrow> <mrow> <msup> <mrow> <mo>(</mo> <mn>1</mn> <mo>+</mo> <msup> <mrow> <mo>(</mo> <mfrac> <mrow> <mo>∂</mo> <mi>z</mi> </mrow> <mrow> <mo>∂</mo> <mi>x</mi> </mrow> </mfrac> <mo>)</mo> </mrow> <mn>2</mn> </msup> <mo>+</mo> <msup> <mrow> <mo>(</mo> <mfrac> <mrow> <mo>∂</mo> <mi>z</mi> </mrow> <mrow> <mo>∂</mo> <mi>y</mi> </mrow> </mfrac> <mo>)</mo> </mrow> <mn>2</mn> </msup> <mo>)</mo> </mrow> <mn>2</mn> </msup> </mrow> </mfrac> </mrow> [/itex], write vector equations <math mathvariant="bold"> <mrow> <mi>Y</mi> <mo>=</mo> <mrow> <mrow> <mi>a</mi> <mo>⁢</mo> <mi>X</mi> </mrow> <mo>+</mo> <mi>b</mi> </mrow> </mrow> [/itex], etc.</p>
<p>Notice how the mathematics appear in the main flow of text and respond as you resize the window. You can also make displayed equations, such as the following ones:</p>
<p><math display="block"> <mrow> <mrow> <mi>x</mi> <mover> <mo>→</mo> <mtext>maps to</mtext> </mover> <mi>y</mi> <mo>=</mo> <msub> <mi>f</mi> <mi>n</mi> </msub> <mo>⁡</mo> <mrow> <mo>(</mo> <mi>x</mi> <mo>)</mo> </mrow> </mrow> <mo>=</mo> <msup> <mrow> <mo>(</mo> <mrow> <mn>1</mn> <mo>+</mo> <mfrac> <mn>1</mn> <msup> <mi>x</mi> <mi>n</mi> </msup> </mfrac> </mrow> <mo>)</mo> </mrow> <mi>n</mi> </msup> </mrow> [/itex] <math display="block"> <mrow> <msubsup> <mo>∫</mo> <mi>a</mi> <mi>b</mi> </msubsup> <mi>f</mi> <mrow> <mo>(</mo> <mi>x</mi> <mo>)</mo> </mrow> <mi>d</mi> <mi>x</mi> </mrow> <mrow> <mo>=</mo> <mfrac> <mrow> <mi>b</mi> <mo>-</mo> <mi>a</mi> </mrow> <mn>6</mn> </mfrac> <mrow> <mo>[</mo> <mi>f</mi> <mrow> <mo>(</mo> <mi>a</mi> <mo>)</mo> </mrow> <mo>+</mo> <mn>4</mn> <mi>f</mi> <mrow> <mo>(</mo> <mfrac> <mrow> <mi>a</mi> <mo>+</mo> <mi>b</mi> </mrow> <mn>2</mn> </mfrac> <mo>)</mo> </mrow> <mo>+</mo> <mi>f</mi> <mrow> <mo>(</mo> <mi>b</mi> <mo>)</mo> </mrow> <mo>]</mo> </mrow> <mo>-</mo> <mfrac> <msup> <mrow> <mo>(</mo> <mi>b</mi> <mo>-</mo> <mi>a</mi> <mo>)</mo> </mrow> <mn>5</mn> </msup> <mrow> <mn>4</mn> <mo>!</mo> <mn>5</mn> <mo>!</mo> </mrow> </mfrac> <msup> <mi>f</mi> <mrow> <mo>(</mo> <mn>4</mn> <mo>)</mo> </mrow> </msup> <mrow> <mo>(</mo> <mi>η</mi> <mo>)</mo> </mrow> <mo>,</mo> <mspace width="1em"></mspace> <mi>a</mi> <mo>≤</mo> <mi>η</mi> <mo>≤</mo> <mi>b</mi> </mrow> [/itex] <math display="block"> <mrow> <mrow> <mo>|</mo> <mi>x</mi> <mo>|</mo> </mrow> <mo>=</mo> <mo>{</mo> <mtable> <mtr> <mtd columnalign="right"> <mrow> <mo>-</mo> <mi>x</mi> </mrow> </mtd> <mtd columnalign="left"> <mtext>if</mtext> <mspace width="thinmathspace"></mspace><mi>x</mi> <mo>&lt;</mo> <mn>0</mn> </mtd> </mtr> <mtr> <mtd columnalign="right"> <mi>x</mi> </mtd> <mtd columnalign="left"> <mtext> otherwise</mtext> </mtd> </mtr> </mtable> </mrow> [/itex] You can also typeset 2D mathematical constructs such as matrices. The following example shows the <i>i</i>-th step of the multiplication of a matrix <i>A</i> by a vector <i>x</i> (notice how [itex] <msub> <mi>a</mi><mrow><mi>i</mi><mn>1</mn></mrow> </msub> <mo>,</mo> <mo>...</mo> <mo>,</mo> <msub> <mi>a</mi><mrow><mi>i</mi><mi>n</mi></mrow> </msub> <mo>,</mo> <msub><mi>x</mi><mn>1</mn></msub> [/itex] are on the same baseline, other alignments are possible): <math display="block"> <mrow> <mi>i</mi><mtext>-th row</mtext> <mrow> <mo>[</mo> <mtable align="baseline3" rowlines="none solid solid none"> <mtr> <mtd> <msub> <mi>a</mi><mrow><mn>1</mn><mn>1</mn></mrow> </msub> </mtd> <mtd> <msub> <mi>a</mi><mrow><mn>1</mn><mn>2</mn></mrow> </msub> </mtd> <mtd> <msub> <mi>a</mi><mrow><mn>1</mn><mn>3</mn></mrow> </msub> </mtd> <mtd> <mo>...</mo> </mtd> <mtd> <msub> <mi>a</mi><mrow><mn>1</mn><mi>n</mi></mrow> </msub> </mtd> </mtr> <mtr> <mtd> <mo>:</mo> </mtd> <mtd> <mo>:</mo> </mtd> <mtd> <mo>:</mo> </mtd> <mtd> <mo>...</mo> </mtd> <mtd> <mo>:</mo> </mtd> </mtr> <mtr> <mtd> <msub> <mi>a</mi><mrow><mi>i</mi><mn>1</mn></mrow> </msub> </mtd> <mtd> <msub> <mi>a</mi><mrow><mi>i</mi><mn>2</mn></mrow> </msub> </mtd> <mtd> <msub> <mi>a</mi><mrow><mi>i</mi><mn>3</mn></mrow> </msub> </mtd> <mtd> <mo>...</mo> </mtd> <mtd> <msub> <mi>a</mi><mrow><mi>i</mi><mi>n</mi></mrow> </msub> </mtd> </mtr> <mtr> <mtd> <mo>:</mo> </mtd> <mtd> <mo>:</mo> </mtd> <mtd> <mo>:</mo> </mtd> <mtd> </mtd> <mtd> <mo>:</mo> </mtd> </mtr> <mtr> <mtd> <msub> <mi>a</mi><mrow><mi>n</mi><mn>1</mn></mrow> </msub> </mtd> <mtd> <msub> <mi>a</mi><mrow><mi>n</mi><mn>2</mn></mrow> </msub> </mtd> <mtd> <msub> <mi>a</mi><mrow><mi>n</mi><mn>3</mn></mrow> </msub> </mtd> <mtd> <mo>...</mo> </mtd> <mtd> <msub> <mi>a</mi> <mrow> <mi>n</mi> <mi>n</mi> </mrow> </msub> </mtd> </mtr> </mtable> <mo>]</mo> </mrow> <mrow> <mo symmetric="false">[</mo> <mtable align="baseline1"> <mtr> <mtd> <msub><mi>x</mi><mn>1</mn></msub> </mtd> </mtr> <mtr> <mtd> <msub><mi>x</mi><mn>2</mn></msub> </mtd> </mtr> <mtr> <mtd> <msub><mi>x</mi><mn>3</mn></msub> </mtd> </mtr> <mtr> <mtd> <mo>:</mo> </mtd> </mtr> <mtr> <mtd> <msub><mi>x</mi><mi>n</mi></msub> </mtd> </mtr> </mtable> <mo symmetric="false">]</mo> </mrow> </mrow> [/itex]</p>
<p>In Mozilla, MathML runs inside the main browser. So it responds to other browser operations such as the zoom (try View -&gt; Text Zoom), and you can do links <math href="http://en.wikipedia.org/wiki/Pythagorean_theorem"> <mrow> <mrow> <msup> <mi>a</mi> <mn>2</mn> </msup> <mo>+</mo> <msup> <mi>b</mi> <mn>2</mn> </msup> </mrow> <mo>=</mo> <msup> <mi>c</mi> <mn>2</mn> </msup> </mrow> [/itex], apply stylistic <span style="font-size: 2em; -moz-transform: rotate(-5deg)">effects [itex] <mrow> <mrow> <msup> <mi>a</mi> <mn>2</mn> </msup> <mrow> <mo>+</mo> </mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> </mrow> <mrow> <mo>=</mo> </mrow> <msup> <mi>c</mi> <mn>2</mn> </msup> </mrow> [/itex] </span>, or use color [itex] <mrow> <mrow> <msup mathcolor="red"> <mi>a</mi> <mn>2</mn> </msup> <mo>+</mo> <msup mathcolor="green"> <mi>b</mi> <mn>2</mn> </msup> </mrow> <mo mathbackground="yellow">=</mo> <msup mathcolor="purple"> <mi>c</mi> <mn>2</mn> </msup> </mrow> [/itex] in very strange ways <math display="block"> <mrow mathcolor="red"> <mfrac> <mrow> <mi>p</mi><mo>(</mo><mi>x</mi><mo>)</mo> </mrow> <mrow> <mi>q</mi><mo>(</mo><mi>x</mi><mo>)</mo> </mrow> </mfrac> <mo>=</mo> <mfrac> <mrow mathcolor="blue"> <msub><mi>a</mi><mn>0</mn></msub> <mo>+</mo> <msub><mi>a</mi><mn>1</mn></msub><mi>x</mi> <mo>+</mo> <msub><mi>a</mi><mn>2</mn></msub> <msup><mi>x</mi><mn>2</mn></msup> <mo>+</mo> <mo>...</mo> <mo>+</mo> <msub><mi>a</mi><mrow><mi>n</mi><mo>-</mo><mn>1</mn></mrow></msub> <msup><mi>x</mi><mrow><mi>n</mi><mo>-</mo><mn>1</mn></mrow></msup> </mrow> <mrow mathcolor="green"> <msub><mi>b</mi><mn>0</mn></msub> <mo>+</mo> <msub><mi>b</mi><mn>1</mn></msub><mi>x</mi> <mo>+</mo> <msub><mi>b</mi><mn>2</mn></msub> <msup><mi>x</mi><mn>2</mn></msup> <mo>+</mo> <mo>...</mo> <mo>+</mo> <msub><mi>b</mi><mrow><mi>n</mi><mo>-</mo><mn>1</mn></mrow></msub> <msup><mi>x</mi><mrow><mi>n</mi><mo>-</mo><mn>1</mn></mrow></msup> </mrow> </mfrac> <mo>.</mo> </mrow> [/itex]</p>
<p>You can also do other weird and risky things which are not portable, bongo warns, such as mixing MathML with other markups <math display="block"> <mrow> <mi>lizard</mi> <mo>+</mo> <mi>bongo</mi> <mo>=</mo> <mfrac> <mtext> <img alt="logo-star" height="200" src="http://www.mozilla.org/images/logo-star.gif" width="197" /> </mtext> <mrow> <mo>∫</mo> <munderover> <mtext> <img alt="mozilla-16" height="16" src="http://www.mozilla.org/images/mozilla-16.png" width="16" /> </mtext> <mi>a</mi> <mi>b</mi> </munderover> <mi>d</mi> <mi>x</mi> </mrow> </mfrac> <mo>+</mo> <mpadded depth="65px" height="72px" voffset="-65px" width="184px"> <mtext> <img alt="mathboard" height="137" src="https://developer.mozilla.org/@api/deki/files/4238/=mathboard.png" width="184" /> </mtext> </mpadded> </mrow> [/itex]</p>
<div style="display: none;">
<h2 id="MathML_and_Javascript" name="MathML_and_Javascript">MathML and Javascript</h2>
<h3 id="HTML_Content">HTML Content</h3>
<pre class="brush: html">
&lt;p&gt;
And you can turn to JavaScript and the DOM for dynamic operations.
&lt;/p&gt;

&lt;div style="text-align:center"&gt;
Fill the gaps in this matrix with resizable input fields.
&lt;/div&gt;
&lt;math class="inputmath" display="block"&gt;
&lt;mrow&gt;
&lt;mi&gt;A&lt;/mi&gt;
&lt;mo&gt;=&lt;/mo&gt;
&lt;mo&gt;[&lt;/mo&gt;
&lt;mtable&gt;
&lt;mtr&gt;
&lt;mtd&gt;&lt;mn&gt;1&lt;/mn&gt;&lt;/mtd&gt;
&lt;mtd&gt;
&lt;mtext&gt;&lt;input id="input12" value="?" size="1"/&gt;&lt;/mtext&gt;
&lt;/mtd&gt;
&lt;/mtr&gt;
&lt;mtr&gt;
&lt;mtd&gt;
&lt;mtext&gt;&lt;input id="input21" value="?" size="1"/&gt;&lt;/mtext&gt;
&lt;/mtd&gt;
&lt;mtd&gt;&lt;mn&gt;4&lt;/mn&gt;&lt;/mtd&gt;
&lt;/mtr&gt;
&lt;/mtable&gt;
&lt;mo&gt;]&lt;/mo&gt;
&lt;/mrow&gt;
&lt;/math&gt;
&lt;div style="text-align:center"&gt;
Left size:
&lt;a class="control" href="javascript:incrementInput('input21', 1);" title="increase input"&gt;+&lt;/a&gt;
&lt;a class="control" href="javascript:incrementInput('input21',-1);" title="decrease input"&gt;-&lt;/a&gt;

&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;

Right size:
&lt;a class="control" href="javascript:incrementInput('input12', 1);" title="increase input"&gt;+&lt;/a&gt;
&lt;a class="control" href="javascript:incrementInput('input12',-1);" title="decrease input"&gt;-&lt;/a&gt;
&lt;br/&gt;
(click these control buttons to see their effects.)
&lt;/div&gt;

&lt;p&gt;
Each entry of the following matrix represents
&lt;math&gt;
&lt;msup&gt;&lt;mrow&gt;&lt;mo&gt;(&lt;/mo&gt;&lt;mi&gt;x&lt;/mi&gt;&lt;mo&gt;+&lt;/mo&gt;&lt;mi&gt;y&lt;/mi&gt;&lt;mo&gt;)&lt;/mo&gt;&lt;/mrow&gt;&lt;mi&gt;n&lt;/mi&gt;&lt;/msup&gt;
&lt;/math&gt; for some &lt;i&gt;n&lt;/i&gt;.
When you left-click any individual entry, it should toggle between its expanded and
unexpanded forms. You can also &lt;a href="javascript:unexpand();"&gt;unexpand all&lt;/a&gt; or
&lt;a href="javascript:expand();"&gt;expand all&lt;/a&gt;.
&lt;/p&gt;

&lt;div&gt;
&lt;math display="block"&gt;
&lt;mtable&gt;
&lt;mtr&gt;
&lt;mtd&gt;
&lt;mtable align="axis" columnalign="left left left"&gt;
&lt;mtr&gt;
&lt;mtd&gt;
&lt;maction id="a11" actiontype="toggle" selection="2"&gt;
&lt;msup&gt;
&lt;mrow&gt;
&lt;mo&gt;(&lt;/mo&gt;
&lt;mrow&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;/mrow&gt;
&lt;mo&gt;)&lt;/mo&gt;
&lt;/mrow&gt;
&lt;mn&gt;0&lt;/mn&gt;
&lt;/msup&gt;
&lt;mn&gt;1&lt;/mn&gt;
&lt;/maction&gt;
&lt;/mtd&gt;
&lt;mtd&gt;
&lt;maction id="a12" actiontype="toggle" selection="2"&gt;
&lt;msup&gt;
&lt;mrow&gt;
&lt;mo&gt;(&lt;/mo&gt;
&lt;mrow&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;/mrow&gt;
&lt;mo&gt;)&lt;/mo&gt;
&lt;/mrow&gt;
&lt;mn&gt;1&lt;/mn&gt;
&lt;/msup&gt;
&lt;mrow&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;/mrow&gt;
&lt;/maction&gt;
&lt;/mtd&gt;
&lt;mtd&gt;
&lt;maction id="a13" actiontype="toggle" selection="2"&gt;
&lt;msup&gt;
&lt;mrow&gt;
&lt;mo&gt;(&lt;/mo&gt;
&lt;mrow&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;/mrow&gt;
&lt;mo&gt;)&lt;/mo&gt;
&lt;/mrow&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;/msup&gt;
&lt;mrow&gt;
&lt;msup&gt;
&lt;mi&gt;x&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;2&lt;/mn&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;/mrow&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;msup&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;/msup&gt;
&lt;/mrow&gt;
&lt;/maction&gt;
&lt;/mtd&gt;
&lt;/mtr&gt;
&lt;mtr&gt;
&lt;mtd&gt;
&lt;maction id="a21" actiontype="toggle" selection="2"&gt;
&lt;msup&gt;
&lt;mrow&gt;
&lt;mo&gt;(&lt;/mo&gt;
&lt;mrow&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;/mrow&gt;
&lt;mo&gt;)&lt;/mo&gt;
&lt;/mrow&gt;
&lt;mn&gt;1&lt;/mn&gt;
&lt;/msup&gt;
&lt;mrow&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;/mrow&gt;
&lt;/maction&gt;
&lt;/mtd&gt;
&lt;mtd&gt;
&lt;maction id="a22" actiontype="toggle" selection="2"&gt;
&lt;msup&gt;
&lt;mrow&gt;
&lt;mo&gt;(&lt;/mo&gt;
&lt;mrow&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;/mrow&gt;
&lt;mo&gt;)&lt;/mo&gt;
&lt;/mrow&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;/msup&gt;
&lt;mrow&gt;
&lt;msup&gt;
&lt;mi&gt;x&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;2&lt;/mn&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;/mrow&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;msup&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;/msup&gt;
&lt;/mrow&gt;
&lt;/maction&gt;
&lt;/mtd&gt;
&lt;mtd&gt;
&lt;maction id="a23" actiontype="toggle" selection="2"&gt;
&lt;msup&gt;
&lt;mrow&gt;
&lt;mo&gt;(&lt;/mo&gt;
&lt;mrow&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;/mrow&gt;
&lt;mo&gt;)&lt;/mo&gt;
&lt;/mrow&gt;
&lt;mn&gt;3&lt;/mn&gt;
&lt;/msup&gt;
&lt;mrow&gt;
&lt;msup&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mn&gt;3&lt;/mn&gt;
&lt;/msup&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mrow&gt;
&lt;mn&gt;3&lt;/mn&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;msup&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;/msup&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;/mrow&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mrow&gt;
&lt;mn&gt;3&lt;/mn&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;msup&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;/msup&gt;
&lt;/mrow&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;msup&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;mn&gt;3&lt;/mn&gt;
&lt;/msup&gt;
&lt;/mrow&gt;
&lt;/maction&gt;
&lt;/mtd&gt;
&lt;/mtr&gt;
&lt;mtr&gt;
&lt;mtd&gt;
&lt;maction id="a31" actiontype="toggle" selection="2"&gt;
&lt;msup&gt;
&lt;mrow&gt;
&lt;mo&gt;(&lt;/mo&gt;
&lt;mrow&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;/mrow&gt;
&lt;mo&gt;)&lt;/mo&gt;
&lt;/mrow&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;/msup&gt;
&lt;mrow&gt;
&lt;msup&gt;
&lt;mi&gt;x&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;2&lt;/mn&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;/mrow&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;msup&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;/msup&gt;
&lt;/mrow&gt;
&lt;/maction&gt;
&lt;/mtd&gt;
&lt;mtd&gt;
&lt;maction id="a32" actiontype="toggle" selection="2"&gt;
&lt;msup&gt;
&lt;mrow&gt;
&lt;mo&gt;(&lt;/mo&gt;
&lt;mrow&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;/mrow&gt;
&lt;mo&gt;)&lt;/mo&gt;
&lt;/mrow&gt;
&lt;mn&gt;3&lt;/mn&gt;
&lt;/msup&gt;
&lt;mrow&gt;
&lt;msup&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mn&gt;3&lt;/mn&gt;
&lt;/msup&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mrow&gt;
&lt;mn&gt;3&lt;/mn&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;msup&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;/msup&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;/mrow&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mrow&gt;
&lt;mn&gt;3&lt;/mn&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;msup&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;/msup&gt;
&lt;/mrow&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;msup&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;mn&gt;3&lt;/mn&gt;
&lt;/msup&gt;
&lt;/mrow&gt;
&lt;/maction&gt;
&lt;/mtd&gt;
&lt;mtd&gt;
&lt;maction id="a33" actiontype="toggle" selection="2"&gt;
&lt;msup&gt;
&lt;mrow&gt;
&lt;mo&gt;(&lt;/mo&gt;
&lt;mrow&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;/mrow&gt;
&lt;mo&gt;)&lt;/mo&gt;
&lt;/mrow&gt;
&lt;mn&gt;4&lt;/mn&gt;
&lt;/msup&gt;
&lt;mrow&gt;
&lt;msup&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mn&gt;4&lt;/mn&gt;
&lt;/msup&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mrow&gt;
&lt;mn&gt;4&lt;/mn&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;msup&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mn&gt;3&lt;/mn&gt;
&lt;/msup&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;/mrow&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mrow&gt;
&lt;mn&gt;6&lt;/mn&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;msup&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;/msup&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;msup&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;/msup&gt;
&lt;/mrow&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mrow&gt;
&lt;mn&gt;4&lt;/mn&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;msup&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;mn&gt;3&lt;/mn&gt;
&lt;/msup&gt;
&lt;/mrow&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;msup&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;mn&gt;4&lt;/mn&gt;
&lt;/msup&gt;
&lt;/mrow&gt;
&lt;/maction&gt;
&lt;/mtd&gt;
&lt;/mtr&gt;
&lt;mtr&gt;
&lt;mtd&gt;
&lt;maction id="a41" actiontype="toggle" selection="2"&gt;
&lt;msup&gt;
&lt;mrow&gt;
&lt;mo&gt;(&lt;/mo&gt;
&lt;mrow&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;/mrow&gt;
&lt;mo&gt;)&lt;/mo&gt;
&lt;/mrow&gt;
&lt;mn&gt;3&lt;/mn&gt;
&lt;/msup&gt;
&lt;mrow&gt;
&lt;msup&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mn&gt;3&lt;/mn&gt;
&lt;/msup&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mrow&gt;
&lt;mn&gt;3&lt;/mn&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;msup&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;/msup&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;/mrow&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mrow&gt;
&lt;mn&gt;3&lt;/mn&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;msup&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;/msup&gt;
&lt;/mrow&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;msup&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;mn&gt;3&lt;/mn&gt;
&lt;/msup&gt;
&lt;/mrow&gt;
&lt;/maction&gt;
&lt;/mtd&gt;
&lt;mtd&gt;
&lt;maction id="a42" actiontype="toggle" selection="2"&gt;
&lt;msup&gt;
&lt;mrow&gt;
&lt;mo&gt;(&lt;/mo&gt;
&lt;mrow&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;/mrow&gt;
&lt;mo&gt;)&lt;/mo&gt;
&lt;/mrow&gt;
&lt;mn&gt;4&lt;/mn&gt;
&lt;/msup&gt;
&lt;mrow&gt;
&lt;msup&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mn&gt;4&lt;/mn&gt;
&lt;/msup&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mrow&gt;
&lt;mn&gt;4&lt;/mn&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;msup&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mn&gt;3&lt;/mn&gt;
&lt;/msup&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;/mrow&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mrow&gt;
&lt;mn&gt;6&lt;/mn&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;msup&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;/msup&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;msup&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;/msup&gt;
&lt;/mrow&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mrow&gt;
&lt;mn&gt;4&lt;/mn&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;msup&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;mn&gt;3&lt;/mn&gt;
&lt;/msup&gt;
&lt;/mrow&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;msup&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;mn&gt;4&lt;/mn&gt;
&lt;/msup&gt;
&lt;/mrow&gt;
&lt;/maction&gt;
&lt;/mtd&gt;
&lt;mtd&gt;
&lt;maction id="a43" actiontype="toggle" selection="2"&gt;
&lt;msup&gt;
&lt;mrow&gt;
&lt;mo&gt;(&lt;/mo&gt;
&lt;mrow&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;/mrow&gt;
&lt;mo&gt;)&lt;/mo&gt;
&lt;/mrow&gt;
&lt;mn&gt;5&lt;/mn&gt;
&lt;/msup&gt;
&lt;mrow&gt;
&lt;msup&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mn&gt;5&lt;/mn&gt;
&lt;/msup&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mrow&gt;
&lt;mn&gt;5&lt;/mn&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;msup&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mn&gt;4&lt;/mn&gt;
&lt;/msup&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;/mrow&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mrow&gt;
&lt;mn&gt;10&lt;/mn&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;msup&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mn&gt;3&lt;/mn&gt;
&lt;/msup&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;msup&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;/msup&gt;
&lt;/mrow&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mrow&gt;
&lt;mn&gt;10&lt;/mn&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;msup&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;/msup&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;msup&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;mn&gt;3&lt;/mn&gt;
&lt;/msup&gt;
&lt;/mrow&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mrow&gt;
&lt;mn&gt;5&lt;/mn&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mo&gt;&amp;InvisibleTimes;&lt;/mo&gt;
&lt;msup&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;mn&gt;4&lt;/mn&gt;
&lt;/msup&gt;
&lt;/mrow&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;msup&gt;
&lt;mi&gt;y&lt;/mi&gt;
&lt;mn&gt;5&lt;/mn&gt;
&lt;/msup&gt;
&lt;/mrow&gt;
&lt;/maction&gt;
&lt;/mtd&gt;
&lt;/mtr&gt;
&lt;/mtable&gt;
&lt;/mtd&gt;
&lt;/mtr&gt;
&lt;/mtable&gt;
&lt;/math&gt;
&lt;/div&gt;

</pre>
<h3 id="CSS_Content">CSS Content</h3>
<pre class="brush: css">
.control {
text-decoration: none;
font-weight: bold;
font-size: 200%;
}
input {
color: red;
}
[class="inputmath"] {
border: 1px dotted;
}
</pre>
<h3 id="JavaScript_Content">JavaScript Content</h3>
<pre class="brush: js">
function setSelection(id,value) {
document.getElementById(id).setAttribute("selection",value);
}
function expand()
{
setSelection("a11","2");  setSelection("a12","2");  setSelection("a13","2");
setSelection("a21","2");  setSelection("a22","2");  setSelection("a23","2");
setSelection("a31","2");  setSelection("a32","2");  setSelection("a33","2");
setSelection("a41","2");  setSelection("a42","2");  setSelection("a43","2");
}
function unexpand()
{
setSelection("a11","1");  setSelection("a12","1");  setSelection("a13","1");
setSelection("a21","1");  setSelection("a22","1");  setSelection("a23","1");
setSelection("a31","1");  setSelection("a32","1");  setSelection("a33","1");
setSelection("a41","1");  setSelection("a42","1");  setSelection("a43","1");
}

function incrementInput(inputID, increment)
{
var inputElement = document.getElementById(inputID);
var size = parseInt(inputElement.size) + increment;
if (size &lt;= 0)
size = 1
inputElement.size = size;
}</pre>
</div>
<p>{{ EmbedLiveSample('MathML_and_Javascript', '100%', '400px') }}</p>
<p>And there could be more...</p>
<div style="display: none;">
<h2 id="MathML_Button" name="MathML_Button">MathML Button</h2>
<h3 id="HTML_Content">HTML Content</h3>
<pre class="brush: html">
&lt;div style="text-align: center"&gt;
&lt;button style="white-space: normal;"&gt;
&lt;span style="color: brown;"&gt;

For example, &lt;b&gt;click&lt;/b&gt; this MathML continued fraction&lt;br/&gt;
inside this HTML button&lt;br /&gt;
&lt;/span&gt;
&lt;math&gt;
&lt;mrow&gt;
&lt;mfrac&gt;
&lt;mi&gt;&amp;pi;&lt;/mi&gt;
&lt;mn&gt;4&lt;/mn&gt;
&lt;/mfrac&gt;
&lt;mo&gt;=&lt;/mo&gt;
&lt;mfrac numalign="left"&gt;
&lt;mstyle scriptlevel="0"&gt;
&lt;mn&gt;1&lt;/mn&gt;
&lt;/mstyle&gt;
&lt;mstyle scriptlevel="0"&gt;
&lt;mrow&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mfrac numalign="left"&gt;
&lt;mstyle scriptlevel="0"&gt;
&lt;msup&gt;&lt;mn&gt;1&lt;/mn&gt;&lt;mn&gt;2&lt;/mn&gt;&lt;/msup&gt;
&lt;/mstyle&gt;
&lt;mstyle scriptlevel="0"&gt;
&lt;mrow&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mfrac numalign="left"&gt;
&lt;mstyle scriptlevel="0"&gt;
&lt;msup&gt;&lt;mn&gt;3&lt;/mn&gt;&lt;mn&gt;2&lt;/mn&gt;&lt;/msup&gt;
&lt;/mstyle&gt;
&lt;mstyle scriptlevel="0"&gt;
&lt;mrow&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mfrac numalign="left"&gt;
&lt;mstyle scriptlevel="0"&gt;
&lt;msup&gt;&lt;mn&gt;5&lt;/mn&gt;&lt;mn&gt;2&lt;/mn&gt;&lt;/msup&gt;
&lt;/mstyle&gt;
&lt;mstyle scriptlevel="0"&gt;
&lt;mrow&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;mo&gt;+&lt;/mo&gt;
&lt;mfrac numalign="left"&gt;
&lt;mstyle scriptlevel="0"&gt;
&lt;msup&gt;&lt;mn&gt;7&lt;/mn&gt;&lt;mn&gt;2&lt;/mn&gt;&lt;/msup&gt;
&lt;/mstyle&gt;
&lt;mstyle scriptlevel="0"&gt;
&lt;mn&gt;2&lt;/mn&gt;&lt;mo&gt;+&lt;/mo&gt;&lt;mo mathvariant="bold"&gt;...&lt;/mo&gt;
&lt;/mstyle&gt;
&lt;/mfrac&gt;
&lt;/mrow&gt;
&lt;/mstyle&gt;
&lt;/mfrac&gt;
&lt;/mrow&gt;
&lt;/mstyle&gt;
&lt;/mfrac&gt;
&lt;/mrow&gt;
&lt;/mstyle&gt;
&lt;/mfrac&gt;
&lt;/mrow&gt;
&lt;/mstyle&gt;
&lt;/mfrac&gt;
&lt;/mrow&gt;
&lt;/math&gt;
&lt;/button&gt;
&lt;/div&gt;<span style="display: none;">
</span></pre>
</div>
<p>{{ EmbedLiveSample('MathML_Button', '100%', '300px') }}</p>
<p>For more information about MathML in Mozilla, see the <a href="http://www.mozilla.org/projects/mathml/">MathML Project Page</a>. There are links to more samples, <a href="http://www.mozilla.org/projects/mathml/screenshots/">screenshots</a> and instructions on how to <a href="http://www.mozilla.org/projects/mathml/fonts/">download fonts</a> for various platforms. These fonts are <i>required</i> to view other examples beyond the basic constructions illustrated here.</p>
<div style="display: none;">
<h2 id="MathML_Background_Image" name="MathML_Background_Image">MathML Background Image</h2>
<h3 id="HTML_Content">HTML Content</h3>
<pre class="brush: html">
&lt;div class="background"&gt;&lt;/div&gt;
&lt;math display="block"&gt;
&lt;mrow&gt;
&lt;msub&gt;
&lt;mi&gt;Z&lt;/mi&gt;
&lt;mi&gt;&amp;alpha;&lt;/mi&gt;
&lt;/msub&gt;
&lt;mrow&gt;
&lt;mo&gt;(&lt;/mo&gt;
&lt;mi&gt;f&lt;/mi&gt;
&lt;mo&gt;)&lt;/mo&gt;
&lt;/mrow&gt;
&lt;mo&gt;=&lt;/mo&gt;

&lt;mfrac&gt;
&lt;mn&gt;1&lt;/mn&gt;
&lt;mrow&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;mi&gt;i&lt;/mi&gt;
&lt;mo&gt;&amp;ThinSpace;&lt;/mo&gt;
&lt;mi&gt;cos&lt;/mi&gt;
&lt;mo&gt;(&lt;/mo&gt;
&lt;mfrac&gt;
&lt;mrow&gt;
&lt;mi&gt;&amp;alpha;&lt;/mi&gt;
&lt;mi&gt;&amp;pi;&lt;/mi&gt;
&lt;/mrow&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;/mfrac&gt;
&lt;mo&gt;)&lt;/mo&gt;
&lt;/mrow&gt;
&lt;/mfrac&gt;

&lt;mrow&gt;
&lt;msub&gt;
&lt;mo&gt;&amp;int;&lt;/mo&gt;
&lt;mi&gt;C&lt;/mi&gt;
&lt;/msub&gt;
&lt;mfrac&gt;
&lt;mrow&gt;
&lt;mi&gt;f&lt;/mi&gt;
&lt;mo stretchy='false'&gt;(&lt;/mo&gt;
&lt;mi&gt;i&lt;/mi&gt;
&lt;mi&gt;z&lt;/mi&gt;
&lt;mo stretchy='false'&gt;)&lt;/mo&gt;
&lt;msup&gt;
&lt;mrow&gt;
&lt;mo&gt;(&lt;/mo&gt;
&lt;mo&gt;-&lt;/mo&gt;
&lt;mi&gt;z&lt;/mi&gt;
&lt;mo&gt;)&lt;/mo&gt;
&lt;/mrow&gt;
&lt;mi&gt;&amp;alpha;&lt;/mi&gt;
&lt;/msup&gt;
&lt;/mrow&gt;
&lt;mrow&gt;
&lt;msup&gt;
&lt;mi&gt;e&lt;/mi&gt;
&lt;mrow&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;mi&gt;&amp;pi;&lt;/mi&gt;
&lt;mi&gt;z&lt;/mi&gt;
&lt;/mrow&gt;
&lt;/msup&gt;
&lt;mo&gt;-&lt;/mo&gt;
&lt;mn&gt;1&lt;/mn&gt;
&lt;/mrow&gt;
&lt;/mfrac&gt;
&lt;/mrow&gt;
&lt;mi&gt;d&lt;/mi&gt;
&lt;mi&gt;z&lt;/mi&gt;
&lt;/mrow&gt;
&lt;/math&gt;</pre>
<h3 id="CSS_Content">CSS Content</h3>
<pre class="brush: css">
[class="background"] {
background-image: url(http://www.mozilla.org/images/mozilla-banner.gif);
opacity: 0.2;
position: absolute;
left: 0;
width: 100%;
height: 58px;
}
</pre>
</div>
<p>{{ EmbedLiveSample('MathML_Background_Image', '100%', '300px') }}</p>```