Monday, 6 February 2017

HTML5 MATHML ( MATHEMATICAL MARKUP LANGUAGE)

MathML is an application of XML for describing mathematical notations and capturing structure in the content.

Syntax - <math xmlns=http://www.w3.org/1998/MathML>---</math>


Features of MathML
1. Linking
2. Directionality
3. Line Breaking.
4. Including Images
5. Elementary math layouts
6. MathML is a part of HTML5


MathML Tags
MathML mainly focus on displaying of mathematical equations. Every math elements start with m.

1. <mi> X </mi> - Identifiers
2. <mo> + </mo> - Operators
3. <mn> 2 </mn> - Numbers
4. <mtext> Non zero </mtext> - Text
5. <mrow> - a horizontal row of item
6. <mfrac> - Fractions.


Elements of MathML


1. <msup> - The MathML <msup> element is used to attach a superscript to an expression.
<!DOCTYPE html>
<html lang="en-us">
<head>
          <meta charset="UTF-8"/>
</head>
<body>     
          <math xmlns="http://www.w3.org/1998/Math/MathML">
                   <msup>
                             <mi>X</mi>
                             <mn>2</mn>
                   </msup>
          </math>
</body>

</html>




2. <msub> - The MathML <msub> element is used to attach a subscript to an expression
<!DOCTYPE html>
<html lang="en-us">
<head>
          <meta charset="UTF-8"/>
          <title>MathMl</title>         
</head>
<body>     
          <math xmlns="http://www.w3.org/1998/Math/MathML">
                   <msub>
                             <mi>X</mi>
                             <mn>2</mn>
                   </msub>
          </math>
</body>
</html>




3. <msubsup> - This element is used to display a subscript and superscript together.
<!DOCTYPE html>
<html lang="en-us">
<head>
          <meta charset="UTF-8"/>
          <title>MathMl</title>         
</head>
<body>     
          <math xmlns="http://www.w3.org/1998/Math/MathML">
                   <msubsup>
                             <mo>&#x222B;<!-- Integral --> </mo>
                             <mn>0</mn>
                             <mn>1</mn>
                   </msubsup>
          </math>
</body>
</html>





4. <mroot> - This element is used to display roots.
<!DOCTYPE html>
<html lang="en-us">
<head>
          <meta charset="UTF-8"/>
          <title>MathML</title>    
</head>
<body>    
          <math xmlns="http://www.w3.org/1998/Math/MathML">
                   <mroot>
                             <mi>x</mi>
                             <mn>2</mn>
                   </mroot>
          </math>
</body>
</html>




5. <msqrt> - This element is used to display square roots.
<!DOCTYPE html>
<html lang="en-us">
<head>
          <meta charset="UTF-8"/>
          <title>MathML</title>    
</head>
<body>    
          <math xmlns="http://www.w3.org/1998/Math/MathML">
                   <msqrt>
                             <mi>x</mi>
                   </msqrt>
          </math>
</body>
</html>




6. <menclose> - This element renders its content inside an enclosing notation specified by the notation attribute. Notation attribute supports the following values – box, roundedbox, circle, left, right, top, bottom, updiagonalstrike, downdiagonalstrike, verticalstrike, horizontalstrike etc.
<!DOCTYPE html>
<html lang="en-us">
<head>
          <meta charset="UTF-8"/>
          <title>MathML</title>    
</head>
<body>    
          <math xmlns="http://www.w3.org/1998/Math/MathML">
                   <menclose notation="box">
                   <mi>x</mi>
                   <mi>+</mi>
                   <mi>y</mi>
                   </menclose>
          </math>
</body>
</html>




7. <mfrac> - This element is used to display fractions.
<!DOCTYPE html>
<html lang="en-us">
<head>
          <meta charset="UTF-8"/>
          <title>MathML</title>    
</head>
<body>    
          <math xmlns="http://www.w3.org/1998/Math/MathML">
                   <mfrac bevelled="true">
                   <mfrac>
                   <mi>a</mi>
                   <mi>b</mi>
                   </mfrac>
                   <mfrac>
                   <mi>c</mi>
                   <mi>d</mi>
                   </mfrac>
                   </mfrac>
          </math>
</body>
</html>

No comments:

Post a Comment