Test of Quadratic Equation, Math ML Embedded HTML 5

Back to MathML Tutorial

Browser Requirements

Quadratic Equation

There's a square root with a fraction inside it. If you don't see a square root symbol, the test has failed.

x= b± b 2 4ac 2a MathType@MTEF@5@5@+=faaagCart1ev2aqaKnaaaaWenf2ys9wBH5garuqvUL2yVrwzGmvETj2BSnharmWu51MyVXgaruavP1wzZbqefeKCPfgBGuLBPn2BKvginnfaruWqVvNCPvMCaebbnrfifHhDYfgasaacH8srps0lbbf9q8WrFfeuY=ribbf9v8qqaqFr0xc9pk0xbba9q8WqFfea0=yr0RYxir=Jbba9q8aq0=yq=He9q8qqQ8frFve9Fve9Ff0dc9Gqpi0dmeaabaqaciGacaGaamqaeaqbamaagaaakeaacaWG4bGaeyypa0ZaaSaaaeaacqGHsislcaWGIbGaeyySae7aaOaaaeaacaWGIbWaaWbaaSqabeaacaaIYaaaaOGaeyOeI0IaaGinaiaadggacaWGJbaaleqaaaGcbaGaaGOmaiaadggaaaaaaa@46A0@

Summation Equation

Δ= i=1 N w i ( x i x ¯ ) 2

Header Code

Vanilla HTML 5 with MathML works fine in Safari 5.1 and Firefox (Mac/Win), but you need to add a MathML spec for Internet Explorer 9 into the HEAD. The spec is <html xmlns:m="http://www.w3.org/1998/Math/MathML" lang="en-US">

<!DOCTYPE HTML>
<html xmlns:m="http://www.w3.org/1998/Math/MathML" lang="en-US"> <!--IE 9 Support -->
<head>

CSS Formatting

You can adjust size and font display via CSS. The target can be the math tag or any other MathML tag. See sample code below which bumps up the font size.

math {font-size: 1.5em}

Body

Once the header is set, you can insert standard MathML (no "m namescape" Microsoft variant tags needed). See sample below. As long as the MathML is enclosed in <math> and </math> tags, the browsers can generally render it.

Speaking of generating MathML, I rarely do that from scratch, but use an equation editor like MathType or MathMagic, both of which import/export MathML, LaTex and other popular equation formats.

Sample MathML (Quadratic Equation)

<math>
<semantics>
<mrow>
   <mi>x</mi><mo>=</mo>
   <mfrac>
   <mrow>
      <mo>&#x2212;</mo><mi>b</mi><mo>&#x00B1;</mo>
     <msqrt>
      <mrow>
         <msup>
           <mi>b</mi>
           <mn>2</mn>
         </msup>
      <mo>&#x2212;</mo><mn>4</mn><mi>a</mi><mi>c</mi>
      </mrow>
     </msqrt>

      </mrow>
      <mrow>
         <mn>2</mn><mi>a</mi>
      </mrow>
    </mfrac>

</mrow>
</semantics>
</math>