blog

Home / DeveloperSection / Blogs / MathML in HTML5

MathML in HTML5

AVADHESH PATEL4728 08-Oct-2012

Scalable Vector Graphics (SVG) and MathML (Mathematical Markup Language) are XML applications that are widely used in scientific contexts. SVG is used to draw vector graphics, and is frequently found in visualization libraries such as ProtoVis. MathML is used to describe the presentation and meaning of mathematical formula. They are very easy to work with in a programmatic sense, because they are XML-based and therefore just text, and yet they are capable of rendering beautiful information in supporting web browsers.

In the beginning of the process, HTML5 was not extensible, and to this day it remains opposed to the whole namespace idea. But SVG and MathML are highly popular and useful XML applications that deserve a place within the HTML5 spec. And so shall it be: <svg> and <math> are the opening volleys in inserting SVG and MathML into your HTML5 document tree. Any elements that are children of the SVG and MathML specs are valid and functional child elements of the <svg> and <math> elements respectively. No need to declare a namespace.

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.

Presentation MathML

 Presentation MathML focuses on the display of an equation, and has about 30 elements. The elements' names all begin with m. A Presentation MathML expression is built up out of tokens that are combined using higher-level elements, which control their layout (there are also about 50 attributes, which mainly control fine details).

 Token elements generally only contain characters (no other elements). They include:

 <mi>x</mi> – identifiers;

 <mo>+</mo> – operators;

 <mn>2</mn> – numbers.

 <mtext>non zero</mtext> – text.

 Note however that these token elements may be used as extension points, allowing markup in host languages. MathML in HTML5 allows most inline HTML markup in mtext, and

 <mtext><b>non</b> zero</mtext>

 is conforming, with the HTML markup being used within the MathML to mark up the embedded text (making the first word bold in this example). 

These are combined using layout elements that generally contain only
elements. They include:

 <mrow> – a horizontal row of items;

 <msup>, <munderover> , and others – superscripts, limits over and under operators like sums, etc;

 <mfrac> – fractions;

 <msqrt> and <mroot> – roots;

 <mfenced> - surrounding content with fences, such as parentheses.

 As usual in HTML and XML, many entities are available for specifying special symbols by name, such as &pi; and &RightArrow;. An interesting feature of MathML is that entities also exist to express normally-invisible operators, such as &InvisibleTimes; for implicit multiplication.

Thus, the expression requires two layout elements: one to create the overall horizontal row and one for the superscripted exponent. Including only the layout elements and the (not yet marked up) bare tokens, the structure looks like this:

<mrow>
      a &InvisibleTimes; <msup>x 2</msup>
      + b &InvisibleTimes; x
      + c
</mrow>

However, the individual tokens also have to be identified as identifiers (mi), operators (mo), or numbers (mn). Adding the token markup, the full form ends up as:

<mrow> 
      <mi>a</mi> <mo>&InvisibleTimes;</mo> <msup><mi>x</mi><mn>2</mn></msup>
      <mo>+</mo><mi>b</mi><mo>&InvisibleTimes;</mo><mi>x</mi>
      <mo>+</mo><mi>c</mi>
</mrow>

A valid MathML document typically consists of the XML declaration, DOCTYPE declaration, and document element. The document body then contains MathML expressions which appear in <math> elements as needed in the document. Often, MathML will be embedded in more general documents, such as HTML, DocBook, or other XML schemas. A complete document that consists of just the MathML example above is shown here:

<?xml version="1.0" encoding="UTF-8"?>
  <!DOCTYPE math PUBLIC "-//W3C//DTD MathML 2.0//EN"
           "http://www.w3.org/Math/DTD/mathml2/mathml2.dtd">
  <math xmlns="http://www.w3.org/1998/Math/MathML">
    <mrow>
      <mi>a</mi>
      <mo>&InvisibleTimes;</mo>
      <msup>
        <mi>x</mi>
        <mn>2</mn>
      </msup>
      <mo>+</mo>
      <mi>b</mi>
      <mo>&InvisibleTimes; </mo>
      <mi>x</mi>
      <mo>+</mo>
      <mi>c</mi>
    </mrow>
  </math>

Output:

ax2+bx+c

 


Updated 18-Sep-2014
Avadhesh Kumar Patel District Project Manager - Aligarh 14 months work experience in Panchayati Raj Department Sector as District Project Manager & 12 months work experience in IT Sector as Software Engineer. :-)

Leave Comment

Comments

Liked By