Broad Network


Mathematical Markup Language and its Token Elements

Presentation Mathematical Markup Language – Part 1

Foreword: In this part of the series I talk about MathML and its token elements.

By: Chrysanthus Date Published: 20 Feb 2016

Introduction

This is part 1 of my series, Presentation Mathematical Markup Language. In this part of the series I talk about MathML and its token elements. MathML is a language on its own that can be used to present mathematics on the web. It is not difficult to learn, as it might seem. The secret is to learn how to identify mathematical expressions. You do not need to know how to evaluate the expressions; you only need to know how to identify them. Already, some mathematical expressions are as easy to identify as you would identify ½ (fraction). MathML stands for Mathematical Markup Language. Math is the abbreviation of Mathematics.

Pre-Knowledge
At the bottom of this page, you would find links to the different series you should have read before coming here to better understand this one.

This series deals more with the presentation of mathematical expressions than the meaning of mathematical expressions. It does not deal with the evaluation (solving) of mathematics problems (expressions). If you can code HTML, then you will be able to present (code) math for the web. MathML is similar to HTML, but instead of addressing blocks of characters, it addresses more of single characters (math symbols).

Expression
There are many types of expressions in mathematics. By placing them in categories, you can learn them.

    5 + b –3 + c

is an expression, where  b or c is known as a variable or identifier in MathML. You do not need to know how to evaluate that expression in order to code (mark up) and present it on the web.

    x + y = 5 + b –3 + c

is an example of an equation, where x, y, b or c is a variable or identifier. 5 or 3 is a number. + or – is an operator. In MathML, = is also an operator, meaning equal-to, in mathematics. You do not need to know how to evaluate that equation, in order to present it on the web.

A formula is a equation, where the left operand of the equal-to sign is a single character, as in,

    P = 2 (W + L)

This is the formula for the perimeter (distance round) of a rectangle. P is the perimeter; W is the width; and L is the length. You do not need to know the meanings of these variables (identifiers) or how to evaluate the expression on the right of = in order to present the formula on the web. You need to be able to identify the expressions and the symbols involved, and know what MathML element to use for expressions and what types of MathML elements to use for the different types of symbols.

Any math expression should be coded with the MathML <mrow></mrow> element, a double tag element; the expression is typed within the tags. Any math identifier is coded with the MathML, <mi></mi> element, a double tag element; the identifier is typed within the tags. Any math operator is coded with the MathML, <mo></mo> element, a double tag element; the operator is typed within the tags. There are other MathML elements.

In the names of the MathML tags, m stands for math. So mrow is math-row; mi is math-identifier (variable) and mo is math-operator. <mrow> does not take a complete line on the page. You can have more than one <mrow> element in a line, and <mrow> elements can be nested.

An equation or formula in mathematics, is called a statement.

The mrow element does not take a whole line at the display. You can have consecutive mrows, which would be displayed on one line.

The HTML math Element
This is the double tag element,

    <math>
        
    </math>

This is an inline-block element. All the mathematical markup language goes into (within) these two tags. In the web page, any formula you are to write, goes into these two HTML tags. So, you use MathML to write the complex formula, and then you place all the mathematical markup language code for the formula, within these two HTML tags. MathML is a separate language that fits into the HTML <math></math> tags. The rest of the web page is HTML. MathML is only found as content of the HTML math element. While other HTML elements have HTML tags within, the HTML math element has but the tags of a different language as content (within). That different language is MathML.

Read and try the following code for the expression, 5 + b –3 + c :

<!DOCTYPE html>
<html>
<head>
  <title>Sample</title>
</head>
<body>

    some text

    <math>
        <mrow>
            <mn>5</mn>
            <mo>+</mo>
            <mi>b</mi>
            <mo>-</mo>
            <mn>3</mn>
            <mo>+</mo>
            <mi>c</mi>
        </mrow>
    </math>

    some text

</body>
</html>

Note the MathML element for number, which is, <mn> for math-number. Also note that like in HTML, in MathML, consecutive simple spaces are reduced to one space.

If you have tried the code, you would notice that the math element and its expression is inline-block. You would also notice that the style for the identifiers, b and c is not a regular font; it is italic. The italic nature is because of the use of the MathML <mi> element. When you use MathML correctly, you end up with styles that are different from the corresponding HTML styles. That is one of the purposes of the MathML language.

In the past and even today, math was (is) drawn in an image and then the image is loaded (displayed) to the web page, with the HTML img tag. In that case the user cannot select the individual math symbols  (by dragging the mouse) and past in a text editor (or word processor). However, when math is coded using MathML, on the web page, the individual math symbols can be selected and pasted in a text editor – a much better option.

MathML Token Elements

The <mglyph/> Element
<mglyph/> is a single tag element. In MathML a single tag element has / just before the end angle bracket. The MathML <mglyph/> element is similar to the HTML img element. <mglyph/> has a scr attribute to present an image (small) in the HTML math element area of the screen.

A modern browser has an operator dictionary in which many mathematical symbols are found. It is assume that more math operators, identifiers and even numbers are still to be discovered (invented) in the field of mathematics. So, any math symbol that is not yet popular (not in dictionary), can be drawn as an image. This image can then be displayed in place of the new operator or identifier or number. You have to use the <mglyph/> element for this purpose, as in the following code segment (imagine “e + 4”):

        <mrow>
            <mi><mglyph src="site.com/img.jpg"/></mi>
            <mo><mglyph src="site.com/op-img.jpg"/></mo>
            <mn><mglyph src="site.com/mn-img.jpg"/></mn>
        </mrow>

The Identifier Element <mi>
Variables of mathematics are called identifiers. In math a variable is typically, one letter of the alphabet, e.g. x. It can also be made up of more than one letter, e.g. AB or ab. Words can also be variables. The word, height or h can be the variable for people’s heights. The word, age can be the variable for people’s ages. The <mi> element holds a variable. It is also used to hold a constant such a π, used to determine (evaluate) the circumference (distance round) of a circle. It is used as well to hold the name of a math function. An example of the name of a math function is sin, for the sine function – see below. The <mi> element is used as follows:

    <mi>x</mi>
    <mi>&#x3C0;</mi> <!--GREEK SMALL LETTER PI-->
    <mi>sin</mi>

Now, the greek small letter, pi, a constant, cannot be typed directly from the keyboard into the <mi> tags. So the numeric character reference, of &#x03C0; is used. A numeric character reference begins with &#x, followed by two to four hexadecimal digits and then, the semicolon.

Note that a comment in MathML is coded as in HTML.

The Number Element <mn>
The <mn> element like the <mi> element is a double tag element. It is <mn> with m-n for math-number, and not n-m. An mn element represents a "numeric literal" or other data that should be rendered as a numeric literal. The number can be a sign number, a number in words, a decimal number, an exponential literal, etc. Coding examples are:

    <mn>2</mn>
    <mn>+81</mn>
    <mn>-81</mn>
    <mn>35.123</mn>
    <mn>1,000,000</mn>
    <mn>2.1e15</mn>
    <mn> 0xFFEF </mn>
    <mn> MCMLXIX </mn>
    <mn> twenty one </mn>

The Operator Element <mo>
The <mo> element is a double tag element. It is for an operator. In MathML operators are of four categories, which are MathML operator, fence, separator and accent.

MathML Operator
MathML operators are +, -, ×, ÷, <, >, and many others, including symbols that are not even operators in mathematics. Read and try the following code (place the MathML elements in an HTML code):

    <math><mo>+</mo></math><br>
    <math><mo>-</mo></math><br>
    <math><mo>&#xD7;</mo></math><br> <!--multiplication sign-->
    <math><mo>&#xF7;</mo></math><br> <!--division sign-->
    <math><mo>></mo></math><br>
    <math><mo><</mo></math><br>
    <math><mo>&#x2264;</mo></math><br> <!--less than or equal to-->
    <math><mo>&#x2265;</mo></math><br> <!--greater than or equal to-->

Fence
Parentheses and curly brackets are examples of fences. Two vertical bars on the side of a variable also form a fence. A bracket is not really an operator in mathematics, but it is an operator in MathML. Parentheses are used in math formulas. Curly brackets are used in math sets.

Consider the following formula:

    P = 2(W + L)

Read and try the following code, which displays this formula on a web page (place the math code in an HTML code):

    <math>
        <mrow>
         <mi>P<mi>
         <mo>=<mo>
         <mrow>
            <mn> 2 </mn>
            <mo> &#x2062;<!--INVISIBLE TIMES--> </mo>
            <mrow>
             <mo> ( </mo>
             <mrow>
                <mi> W </mi>
                <mo> + </mo>
                <mi> L </mi>
             </mrow>
             <mo> ) </mo>
            </mrow>
         </mrow>
        </mrow>
    </math>

Note the use of the mrow elements to markup expressions. W + L, is an expression, which is inside the expression, (W + L), which is inside the expression 2(W + L). The four basic arithmetic operators of: +, - , × and ÷ together, would place the symbols in one expression. I talk about the INVISIBLE TIMES (multiplication) operator below.

Text Element <mtext>
In the solution (evaluation) of mathematical problems, you would sometimes see text like, “the answer is”, “as required”, “then”, “Theorem 1:”, even “Therefore”. Such text is placed in the double tag mtext element. Consider the following set equation:

    Set A = {10, 20, 30, 40}

This is the set of numbers, 10, 20, 30, and 40. The set is called, A, delimited by curly brackets. You code this as follows:

    <math>
     <mrow>
        <mrow>
         <mtext>Set&nbsp;</mtext>
         <mi>A</mi>
        </mrow>
        <mo>=</mo>
        <mrow>
         <mo>{</mo>
            <mrow>
             <mn>10</mn>
             <mo>,</mo>
             <mn>20</mn>
             <mo>,</mo>
             <mn>30</mn>
             <mo>,</mo>
             <mn>40</mn>
            <mrow>
         <mo>}</mo>
        </mrow>
     </mrow>
    </math>

Note that =, {, }and comma have each used the mo element. Note the presence of &nbsp; for simple space in the mtext element.

The numbers and commas form one expression. This is nested in another expression that has the curly brackets. = is in the main expression of the math element. The text and the variable, A are in a separate expression. An expression is held by the mrow element. The math element has a main mrow element. If this main mrow element for the math element is omitted, it will be implied (inferred). So, for the math element, the main mrow element is optional, to type.

Separator Operator
The comma and semicolon are examples of MathML separator operators. The use of comma as an operator, is shown in the above example.

Accent Operator
I will talk about this kind of operator, in a later part of the series.

The String Literal Element <ms>
The double tag ms element is similar to the mtext element. However, the ms element can take programming code, between its tags; the code will have its effect. The effect is displayed within double quotes. You can actually type HTML tags in the ms element, but the display will be delimited by double quotes (quotes will be shown).

The Space Element <mspace/>
Instead of using &nbsp; more than once in an mtext element, you can use the mspace single tag element, as follows:

    <mspace width="3em"/>

All single tag MathML elements end like this one. This element also has a height attribute, to increase the height.

In MathML, the value of an attribute should be between single or double quotes.

Invisible Times
The formula to determine (evaluate) the circumference (distance round) of a circle is:

C = 2 π r

C and r are variables (identifiers). C is the circumference and r is the radius. The real formula is actually:

C = 2 × π × r

2 π r actually means: 2 times pi times r. So, in the MathML code, you have to type the invisible times operator. The presence of the invisible times (invisible multiplication sign) leads to better styling. In the absence of the invisible times, the formula will still be displayed, but the style would not be good.

The code for the formula has to be (read and try it):

    <math>
     <mi>C</mi>
     <mo>=</mo>
     <mrow>
        <mn>2</mn>
        <mo>&#x2062;</mo> <!--INVISIBLE TIMES-->
        <mo>&#x3C0;</mo>
        <mo>&#x2062;</mo> <!--INVISIBLE TIMES-->
        <mi>r</mi>
     </mrow>
    </math>

Note: you do not need to know how to evaluate the formula in order to present (code) it on the web. You just need to be able to identify the expressions. In the code there are two expressions (mrows): the main mrow of the math element that is implicit, and the one (nested) for the right operand of the equal sign.

It is the responsibility of the math author (scientist) to tell you where an invisible times is. If he does not do that, ask him.

Functions
Assume that you are holding a long rope at one end, and the other end is tied to a wall. The rope is fairly straight, but not tense. Assume that you are shaking the end at your hand up-and-down, continuously. A child standing by the side of the rope sees a profile along the rope as you are shaking one end. Such a profile is an example of a sine wave or sine function. The sine function is written similarly to:

     y = sin x

y and x are variables. sinx is the function. This means that if you substitute x with a number, you will get a different but corresponding value for y. The name of the function is sin, and it goes into an mi element. Before typing x, you need to type an invisible operator called the apply function operator, since we are dealing with a function. This improves styling.

It is the responsibility of the math author (scientist) to tell you where an invisible apply function operator is. You are the programming author. If he does not do that, ask him. The code for the sin function is:

    <math>
      <mi>y</mi>
      <mo>=</mo>
      <mrow>
        <mi>sin</mi>
        <mo>&#x2061;</mo> <!--APPLY FUNCTION-->
        <mi>x</mi>
      </mrow>
    </math>

A similar statement to this is:

     y = A cos x

There is an invisible-times between A and cos. There is an apply function (invisible) operator, between cos and x. It is the responsibility of the math author (scientist) to tell you where these invisible operators are. If he does not do that, ask him. The code for this second statement is:

    <math>
      <mi>y</mi>
      <mo>=</mo>
      <mrow>
        <mi>A</mi>
        <mo>&#x2062;</mo> <!--INVISIBLE TIMES-->
        <mi>cos</mi>
        <mo>&#x2061;</mo> <!--APPLY FUNCTION-->
        <mi>x</mi>
      </mrow>
    </math>

Remember, you do not need to understand these wave functions in order to code them. You just need to be able to identify the expressions.

Consider the statement:

     y = 25 x + 6

The operand, “25x + 6” to the right of = is a function (expression). Its only variable is x, so it is said to be a function in x. So the statement can be rewritten as:

     f ( x ) = 25 x + 6

where f(x) is an expression in place of y, read as f-of-x. The code for f(x) is:

<mrow>
  <mi> f </mi>
  <mo> &#x2061;<!--APPLY APPLICATION--> </mo>
  <mrow>
    <mo> ( </mo>
    <mi> x </mi>
    <mo> ) </mo>
  </mrow>
</mrow>

Note the use of the mrow elements to hold the expressions. We are talking about a function here. So, also note the position of the invisible apply function operator. The complete statement is coded as (read and try it):

    <math>
      <mrow>
        <mi> f </mi>
        <mo> &#x2061;<!--APPLY APPLICATION--> </mo>
        <mrow>
          <mo> ( </mo>
          <mi> x </mi>
          <mo> ) </mo>
        </mrow>
      </mrow>
      <mo>=</mo>
      <mrow>
        <mn>25</mn>
        <mo>&#x2062;</mo> <!--INVISIBLE TIMES-->
        <mi>x</mi>
        <mo>+</mo>
        <mn>6</mn>
      </mrow>
    </math>

You do not need to be able to evaluate this statement in order to code (present) it for the web. You need to be able to identify the expression.

At this point, you know two invisible operators, which are invisible-times and apply function. It is the responsibility of the math author to tell you what and where these should be.

You do not need to know how to evaluate the statement in order to code it. You need to be able to identify the expressions (and code the expressions).

Legal Issues
In a mathematical statement (expression), the slightest change in number, or the using of a wrong identifier, or the omission of an operator, gives wrong result. In fact the slightest error gives wrong result. Before you publish any mathematics production, make sure the math author (scientist) proofreads it first. Otherwise charges may be levied against you by the users (readers).

That is it for this part of the series. We continue in the next part. We are moving forward!

Chrys

Related Links

Basics of HTML 5
Basics of ECMAScript
HTML DOM Basics
CSS Basics
Text Elements in HTML
Grouping Content
Microsyntax Dates and Times in HTML
Sectioning Content
Common Idioms without Dedicated Elements
HTML Embedded Content
HTML Insecurities and Prevention
Presentation Mathematical Markup Language
More Related Links
PurePerl MySQL API
Major in Website Design
Perl Course - Optimized
Web Development Course

NEXT

Comments

Become the Writer's Fan
Send the Writer a Message