Thursday, February 23, 2017

HTML5 - MathML

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.

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 will produce following result −

Using MathML Characters

Consider, following is the markup which makes use of the characters &InvisibleTimes; −
<!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 x2 + 4x + 4 = 0, then use Firefox 3.5 or higher version.
This will produce following result −

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 will produce following result −
This would produce following result. If you are not able to see proper result, then use Fire fox 3.5 or higher version.
MathML
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)