Scribd
Upload
192 views10 pages

MathML With HTML5

Math ML is a markup language for representing mathematical notations that captures both structure and content. It is maintained by the W3C and allows adding math symbols and notations directly into HTML5 documents using Math ML elements. Examples show how to represent expressions like binomial theorem, quadratic formula, and matrices using Math ML tags.

Uploaded by

devendra
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
Download as docx, pdf, or txt
192 views10 pages

MathML With HTML5

Math ML is a markup language for representing mathematical notations that captures both structure and content. It is maintained by the W3C and allows adding math symbols and notations directly into HTML5 documents using Math ML elements. Examples show how to represent expressions like binomial theorem, quadratic formula, and matrices using Math ML tags.

Uploaded by

devendra
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1/ 10

 

HTML5 MathML

An Introduction to Mathematical Markup Language (Math ML)


Math ML Intro

1.Math ML (Mathematical Markup Language) is markup language for


representing mathematical notations, it captures both the structure and
content.

2.The Standards and specifications are maintained by World Wide Web


Consortium(W3C).

3.HTML5 allows you to add Mathematical signs, symbols, notations and


other materials directly onto HTML5 documents using the MATH ML
elements.

Advantages of Math ML

Encodeable: Encode all mathematical Notations capturing both the


structure and content of the material.

Convertible: Allows conversion from one mathematical format to


another. Can generate output formats for text displays, graphical
displays, speech synthesizers, print devices.

Flexible: Enables high degree of flexibility allowing you to pass


information for various kinds of applications and renders.

Cross Platform: Encoded data is legible to humans and can be used by


softwares and templates to process or generate data.
Browser Support for Math ML.

1.The Math ML is supported on latest versions of Firefox and Apple


Safari browser.

Compatible Browsers.

Apple Safari, Mozilla Firefox.

Math ML Specifications.

1. MathML uses XML mark for representing mathematical notations.It


is a XML application.

2. The MathML markup of two types Presentational Markup and


Content Markup.

Presentational Markup: Used to markup Mathematical Expressions and


the layout .

Content Markup: Used to markup the content and convey the additional
mathematical meaning with it.

Incorporating Math ML within your HTML5 document.

1. HTML5 enables you to add MathML elements directly into the


webpage.

2. The element <math> is the most top level element in MathML, all
MathML tags must be wrapped within this element.

3. Nesting one <math> element inside another is invalid.

HTML5: Use of MathML – A Better Way to Present Mathematical


Notation
Example 1
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"
xml:lang="en">
<head>
<title>Binomial Theorem</title>
</head>
<body>
<p>Binomial Theorem:</p>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<msup>
<mfenced>
<mrow>
<mi>a</mi>
<mo>+</mo>
<mi>b</mi>
</mrow>
</mfenced>
<mn>2</mn>
</msup>
<mo>=</mo>
<msup>
<mrow>
<mi>a</mi>
</mrow>
<mn>2</mn>
</msup>
<mo>+</mo>
<msup>
<mrow>
<mi>b</mi>
</mrow>
<mn>2</mn>
</msup>
<mo>+</mo>
<mrow>
<mn>2</mn>
<mi>a</mi>
<mi>b</mi>
</mrow>
</mrow>
</math>
</body>
</html>
This would produce the following output:

The above code contains some tags, which might be unknown to some
of us. So, let’s analyze those and put some light on those tags for better
understanding.

1. <mrow> : horizontal row of items


2. <msup>, <munderover> : superscripts, limits over and under
operators like sums, etc.
3. <mfrac> : mathematical fractions
4. <msqrt> and <mroot> : roots
5. <mfenced> : surrounding content with fences, such as parentheses.
6. <mi>x<mi> : mathematical identifiers
7. <mo>+</mo> : mathematical operators
8. <mn>2</mn> : mathematical numbers
9. <mtext>non zero</mtext> : mathematical text

Example 2
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"
xml:lang="en">
<head>
<title>Quadratic Formula</title>
</head>
<body>
<p>Quadratic Formula:</p>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mo form="prefix">-</mo>
<mi>b</mi>
<mo>±<!-- &amp;PlusMinus; --></mo>
<msqrt>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>-</mo>
<mn>4</mn>
<mi>a</mi>
<mi>c</mi>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mi>a</mi>
</mrow>
</mfrac>
</mrow>
</math>
</body>
</html>

This would produce the following output:


Example 3
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"
xml:lang="en">
<head>
<title>Matrix Example</title>
</head>
<body>
<p>Matrix Example:</p>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mfenced open="(" close=")">
<mtable>
<mtr>
<mtd><mi>1</mi></mtd>
<mtd><mi>5</mi></mtd>
<mtd><mi>3</mi></mtd>
</mtr>
<mtr>
<mtd><mi>8</mi></mtd>
<mtd><mi>2</mi></mtd>
<mtd><mi>6</mi></mtd>
</mtr>
<mtr>
<mtd><mi>7</mi></mtd>
<mtd><mi>9</mi></mtd>
<mtd><mi>0</mi></mtd>
</mtr>
</mtable>
</mfenced>
</mrow>
</math>
</body>
</html>

This would produce the following output:

The MathML <mtr> tag is used to create row of a table or the


matrices in HTML5. It is similar to <tr> of a table tag.
Syntax: 
 
<mtr attributes="value"> child elements </mtr>
Attributes: It accepts some attributes which are listed below: 
 
 class|id|style: This attribute is used to hold the styles of the child
elements.
 columnalign: This attribute holds the horizontal alignment of the
table cells. Possible values are left, right and center.
 href: This attribute is used to hold any hyperlink to a specified
URL.
 mathbackground: This attribute holds the value of the math
expressions background color.
 mathcolor: This attribute holds the color of the math expressions.
 rowalign: This attribute holds vertical alignment of the table
cells. Possible values are top, bottom and center.
The MathML <mtd> tag is used to create table data of a table or the
matrices in HTML5. It is similar to <td> of a table tag.
Syntax: 
 
<mtd attributes="value"> child elements </mtd>
Attributes: It accepts some attributes which are listed below: 
 
 class|id|style: This attribute is used to hold the styles of the child
elements.
 columnalign: This attribute holds the horizontal alignment of the
table cells. Possible values are left, right and center.
 href: This attribute is used to hold any hyperlink to a specified
URL.
 mathbackground: This attribute holds the value of the math
expressions background color.
 mathcolor: This attribute holds the color of the math expressions.
 rowalign: This attribute holds vertical alignment of the table
cells. Possible values are top, bottom and center.
 columnspan: This attribute holds the value that how many
columns does the cell extend.
 rowspan: This attribute holds the value that how many rows does
the cell extend.

The MathML <mtable> tag is used to create table or the matrices in


HTML5. This tag is similar to the normal HTML <table> tag. The
<table> has the <tr>, <td> and <td> tag, similarly it has the <mtr>,
<mtd> and <mtd> tag, that act as same as those. But we don’t use the
<table> and other sub tags to create the matrices. Here <mtable> is
useful to create matrices. Because the MathML is all about the
mathematical expression representation in HTML.
Syntax:  
<mtable attributes="value"> child elements </mtable>
Attributes: It accepts some attributes which are listed below:  
 align: This attribute holds the alignment of the tables. Possible
values are axis, baseline, bottom, center and top.
 class|id|style: This attribute is used to hold the styles of the child
elements.
 columnalign: This attribute holds the horizontal alignment of the
table cells. Possible values are left, right and center.
 columnlines: This attribute holds the border style value for the
column-lines. Possible values are none, solid and dashed.
 displaystyle: It is a Boolean value attribute that defines whether
more vertical space is used for displayed equations or more compact
layout is used to display formulas.
 frame: This attribute holds the border value for the entire table.
Possible values are none, solid and dashed.
 framespacing: This attribute defines the space between the table
and the frame.
 href: This attribute is used to hold any hyperlink to a specified
URL.
 mathbackground: This attribute holds the value of the math
expressions background color.
 mathcolor: This attribute holds the color of the math expressions.
 rowalign: This attribute holds vertical alignment of the table
cells. Possible values are top, bottom and center.
 rowlines: This attribute holds the row borders value that multiple
value can be separated by using a space can consider also. Possible
values are none, solid and dashed.
 width: This attribute holds the width value length.

You might also like