Saturday, 11 October 2014

HTML5 - MathML Tutorial

The HTML syntax of HTML5 allows for MathML elements to be used inside a document using <math>...</math> tags.
Most of the web browsers can display MathML tags. If your browser does not support MathML, then I would suggest you to use latest version of Firefox.
You can check W3 Specification for MathML at MathML 2.0 Specification.

MathML Examples:

Following is a valid HTML5 document with MathML:

<!doctype html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>Pythagorean theorem</title>
  </head>
  <body>
    <math xmlns="http://www.w3.org/1998/Math/MathML">
      <mrow>
        <msup><mi>a</mi><mn>2</mn></msup>
        <mo>+</mo>
        <msup><mi>b</mi><mn>2</mn></msup>
        <mo>=</mo>
        <msup><mi>c</mi><mn>2</mn></msup>
      </mrow>
    </math>
  </body>
</html>

This would produce following result:

a^{2} + b^{2} = c^{2}

To learn above concept - Do Online Practice using Firefox 3.7 or higher version.

Using MathML Characters:

Consider, following is the markup which makes use of the characters ⁢:

<!doctype html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>MathML Examples</title>
  </head>
  <body>
    <math xmlns="http://www.w3.org/1998/Math/MathML">
       <mrow>
          <mrow>
             <msup>
                <mi>x</mi>
                <mn>2</mn>
             </msup>
             <mo>+</mo>
             <mrow>
                <mn>4</mn>
                <mo>⁢</mo>
                <mi>x</mi>
             </mrow>
             <mo>+</mo>
             <mn>4</mn>
          </mrow>
             <mo>=</mo>
             <mn>0</mn>
        </mrow>
   </math>
</body>
</html>

This would produce following result. If you are not able to see proper result like x² + 4x + 4 = 0, then use Firefox 3.5 or higer version.

x² + 4x + 4 = 0

To learn above concept - Do Online Practice using Firefox 3.7 or higher version.

Matrix Presentation Examples:

Consider the following example which would be used to represent a simple 2x2 matrix:

<!doctype html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>MathML Examples</title>
  </head>
  <body>
    <math xmlns="http://www.w3.org/1998/Math/MathML">
       <mrow>
          <mi>A</mi>
          <mo>=</mo>
          <mfenced open="[" close="]">
             <mtable>
                <mtr>
                   <mtd><mi>x</mi></mtd>
                   <mtd><mi>y</mi></mtd>
                </mtr>
                <mtr>
                   <mtd><mi>z</mi></mtd>
                   <mtd><mi>w</mi></mtd>
                </mtr>
             </mtable>
         </mfenced>
      </mrow>
   </math>
</body>
</html>

This would produce following result. If you are not able to see proper result, then use Firefox 3.5 or higer version.
MathML

ALL IN ALL TUTORIALS POINT

Sponsored sites

Saturday, 11 October 2014

HTML5 - MathML Tutorial

MathML Examples:

Using MathML Characters:

Matrix Presentation Examples:

No comments:

Post a Comment