Broad Network


General Layout Schemata for Presentation MathML

Presentation Mathematical Markup Language Part 2

Foreword: In this part of the series, I explain how to identify fraction, root and related types of expressions, and the corresponding MathML elements to use.

By: Chrysanthus Date Published: 20 Feb 2016

Introduction

This is part 2 of my series, Presentation Mathematical Markup Language. In this part of the series, I explain how to identify fraction, root and related types of expressions, and the corresponding MathML elements to use. You do not need to understand how to evaluate an expression in order to identify it. You should have read the precious part of the series before coming here, as this is a continuation.

Argument
An element nested within a double tag element is called the argument of the double tag element (not exactly the same as argument of a programming function).

Horizontally Group Sub-Expressions <mrow>
An expression that nests into another expression is a sub-expression. Whether you are dealing with a sub-expression or not, any expression should go into an mrow element. This is a double tag element. It does not take a whole line on the display. You can have more than one mrow element in a line, nested or placed consecutively. The mrow element groups mathematical symbols.

Consider the expression:

     2 x + y - z

This expression should be written as:

     <mrow>
        <mrow>
         <mn> 2 </mn>
         <mo> &#x2062;<!--INVISIBLE TIMES--> </mo>
         <mi> x </mi>
        </mrow>
        <mo> + </mo>
        <mi> y </mi>
        <mo> - </mo>
        <mi> z </mi>
     </mrow>

You do not need to know how to evaluate the expression in order to code (present) it. Here, 2x is ideally an expression nested in another expression. Note the use of the mrow elements.

As another example of the use of mrow element,

( x , y )

should be coded as,

    <mrow>
     <mo> ( </mo>
     <mrow>
        <mi> x </mi>
        <mo> , </mo>
        <mi> y </mi>
     </mrow>
     <mo> ) </mo>
    </mrow>

This consists of two expressions, one nested. Whenever you have parentheses, if there are more than one argument in the parentheses, then the arguments form an expression and the parentheses form a nesting expression, as illustrated with the mrow elements above.

You can have:

     f ( x , y ) = 2 x + y - 3

read as f-of-x-and-y is equal to 2 x plus y minus 3. This is coded as:

    <math>
     <mrow>
        <mi> f </mi>
        <mo> &#x2061;<!--FUNCTION APPLICATION--> </mo>
        <mrow>
         <mo> ( </mo>
         <mrow>
            <mi> x </mi>
            <mo> , </mo>
            <mi> y </mi>
         </mrow>
         <mo> ) </mo>
        </mrow>
     </mrow>
     <mo> = </mo>
     <mrow>
        <mrow>
         <mn> 2 </mn>
         <mo> &#x2062;<!--INVISIBLE TIMES--> </mo>
         <mi> x </mi>
        </mrow>
        <mo> + </mo>
        <mi> y </mi>
        <mo> - </mo>
        <mi> 3 </mi>
     </mrow>
    </math>

FUNCTION APPLICATION means APPLY APPLICATION, in the comment. It is the responsibility for the math author (scientist) to tell you where and what invisible operators exist. If he does not, ask him.

Note: in practice, 2 x + y z would be coded as one expression (in one mrow element), since it is dealing only with the four basic math operators of times, addition, subtraction and division.

Fractions <mfrac>
A fraction has a numerator (up) and a denominator (down) separated by a line. The separating line actually means division (divided by) that is why you do not often see ÷ in math expressions. The syntax used in coding a fraction is:

    <mfrac> numerator denominator </mfrac>

It has two arguments, which are: numerator and denominator, each of which is an element.

So is coded as follows:

    <math>
     <mfrac>
            <mn> 1 </mn>
            <mn> 2 </mn>
     </mfrac>
    </math>

Read and try the code. The numerator can be an expression, even involving a fraction. The denominator can be an expression, even involving a fraction. If the numerator is an expression, it goes into an mrow element. If the denominator is an expression, it goes into an mrow element. Read and try the following code:

    <math>
     <mfrac>
        <mrow>
         <mn> 64 </mn>
         <mo> - </mo>
         <mfrac>
            <mi> x </mi>
            <mn> 2 </mn>
         </mfrac>
        </mrow>
        <mrow>
         <mn> -3 </mn>
         <mo> + </mo>
         <mfrac>
            <mi> y </mi>
            <mn> 2 </mn>
         </mfrac>
        </mrow>
     </mfrac>
    </math>

If you want the fractional division line to be a forward slash, then you have to code the start tag of mfrac as,

     <mfrac bevelled="true">

introducing the bevelled attribute with the value, "true".

There is a mathematical structure that looks like a fraction, but it is not a fraction. In this structure, the fractional division line is omitted. This structure is used in what is known as binomial expansion. You do not need to understand binomial expansion in order to code (present) it identify the expressions. Read and try the following code:

    <math>
     <mn> 1 </mn>
     <mo> + </mo>
     <mrow>
        <mo> ( </mo>
        <mfrac linethickness="0">
         <mn> 1 </mn>
         <mn> 1 </mn>
        </mfrac>
        <mo> ) </mo>
     </mrow>
     <mo> &#x2062;<!--INVISIBLE TIMES--> </mo>
     <mi>x</mi>
    </math>

To achieve the special structure, use the attribute (and value), linethickness="0" in the start tag of the fraction of interest.

For all the above fractional examples, note that the fraction expression does not need to be nested in an mrow element. The fraction tags are like mrow tags.

Invisible Plus
Two-and-a-half means two plus half. This is coded as follows:

    <math>
     <mn> 2 </mn>
     <mo> &#x2064; </mo> <!--INVISIBLE PLUS-->
     <mfrac>
        <mn> 1 </mn>
        <mn> 2 </mn>
     </mfrac>
    </math>

The plus symbol is not <mo>+</mo>. It is the invisible plus, which is, <mo> &#x2064;</mo>, and has to be there. If you omit the <mo>&#x2064;</mo> , the mixed fraction will still be displayed, but the style will not be as good, as if you include it.

You should now know three invisible operators, which are INVISIBLE TIMES, INVISIBLE PLUS and APPLY APPLICATION. It is the responsibility of the math author (scientist) to tell you where and what invisible operators exist. If he does not, ask him.

The Radical <msqrt>, <mroot> Elements
Now,

     8 × 8 = 64

We say 8 is the square root of 64. The syntax to code square root is:

    <msqrt> base </msqrt>

Example (try it):

    <math>
     <msqrt>
        <mn>64<mn>
     </msqrt>
    </math>

The syntax takes one argument (element). In the following example, the argument is the one argument, mrow, which itself has two arguments (read and try it):

    <math>
     <msqrt>
        <mrow>
         <mn> 5 <mn>
         <mo> &#xD7; </mo>
         <mn> 5 <mn>
        </mrow>
     </msqrt>
    </math>

Now, in the case of the msqrt element, the main nested mrow element can be omitted allowing just the elements of the mrow element. This is because the msqrts main nested mrow element is inferred (implied). So the above code can equally be written as:

    <math>
     <msqrt>
        <mn> 5 <mn>
        <mo> &#xD7; </mo>
        <mn> 5 <mn>
     </msqrt>
    </math>

You should now know two elements with the inferred mrow element. These are the msqrt element and the math element itself.

Now,

     5 × 5 × 5 = 125

Also,

     2 × 2 × 2 × 2 = 16

We say, 5 is the cube (third) root of 125 because 5 is multiplied 3 times; 2 is the fourth root of 16 because 2 is multiplied 4 times. A similar thing can be said for fifth root, sixth root, and so on. The syntax for the root element is:

    <mroot> base index </mroot>

It takes two elements: the base e.g. 16 and the index, e.g. 4, for the fourth root. Read and try the following code:

    <math>
     <mroot>
        <mn> 16 </mn>
        <mn> 4 </mn>
     </mroot>
    </math>

The msqrt or mroot element does not need to be nested in the mrow element. msqrt or mroot also acts as an mrow element.

You can replace the base element with an mrow element that has more than one argument. Read and try the following code:

    <math>
     <mroot>
        <mrow>
         <mn> 2 </mn>
         <mo> &#xD7; </mo>
         <mn> 2 </mn>
         <mo> &#xD7; </mo>
         <mn> 2 </mn>
         <mo> &#xD7; </mo>
         <mn> 2 </mn>
        </mrow>
        <mn> 4 </mn>
     </mroot>
    </math>

Adjust Space Around Content <mpadded>
The <mpadded> element is a double tag element. The mpadded element accepts a single argument, which may be an inferred mrow of multiple children. mpadded pads (adds) extra space around its content (child element). Read and try the following code:

    word<math>
     <mpadded width="1.5em"> <mtext>Set</mtext> </mpadded>
    </math>another

If you have tried the code, you would have noticed that a space appears just on the right of the child element (mtext). The extra space is part of the child element. Note the width attribute and value in the code.

The relative position of the content of the child can also be changed with the mpadded element (using other attributes). The mpadded element has the attributes: height, depth, width, lspace and voffset. You can use the em unit in the values.

You should now know three elements with the inferred mrow element. These are the msqrt, mpadded and the math element itself.

Making Sub-Expressions Invisible <mphantom>
The mphantom element is a double tag element. It holds an expression, hiding the expression, but still occupying space. The mphantom element can be used to align parts of a bigger expression by invisibly duplicating sub-expressions. The mphantom element accepts a single argument possibly being an inferred mrow of multiple children. Read and try the following code:

    <math>
     <mfrac>
         <mrow>
            <mi> x </mi>
            <mo> + </mo>
            <mi> y </mi>
            <mo> + </mo>
            <mi> z </mi>
         </mrow>
         <mrow>
            <mi> x </mi>
            <mphantom>
             <mo> + </mo>
            </mphantom>
            <mphantom>
             <mi> y </mi>
            </mphantom>
            <mo> + </mo>
            <mi> z </mi>
         </mrow>
     </mfrac>
    </math>

If you tried the code, you would have noticed that the x in the numerator and the x in the denomination are in the same vertical line. Likewise the z and its plus in the numerator and the z and its plus in the denominator are in the same vertical line. Space corresponding to +y was created at the denominator.

You should now know four elements with the inferred mrow element. These are the msqrt, mpadded, mphantom and the math element itself.

Expression Inside Pair of Fences <mfenced>
The mfenced double tag element provides a convenient way in which to express common constructs involving fences (i.e. braces, brackets, and parentheses); possibly including separators (such as comma) between the arguments.

f-of-x-and-y is,

     f ( x , y )

coded as,

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

can conveniently be coded as:

      <mrow>
        <mi> f </mi>
        <mo> &#x2061;<!--FUNCTION APPLICATION--> </mo>
        <mfenced>
          <mrow>
            <mi> x </mi>
            <mo> , </mo>
            <mi> y </mi>
          </mrow>
        </mfenced>
      </mrow>

So <mrow> <mo> ( </mo>  . . . <mo> ) </mo> </mrow> is the same as <mfenced> . . . </mfenced>

The msqrt, mroot or mfenced element does not need to be nested in the mrow element. It also acts as an mrow element.

Enclose Expression Inside Notation <menclose>
The menclose element is used to draw a circle or rectangle or some other kind of enclosure around an expression. Read and try the following code that draws a circle around the expression, x + y .

    <math>
      <menclose notation='circle'>
        <mi> x </mi><mo> + </mo><mi> y </mi>
      </menclose>
    </math>

If you want but a rectangle enclosure, replace 'circle' with 'box' . The menclose element has other notation attribute values; you will consult some other documentation for that.

The msqrt, mroot, mfenced or menclose element does not need to be nested in the mrow element. It also acts as an mrow element.

The menclose element accepts a single argument possibly being an inferred mrow of multiple children. You should now know five elements with the inferred mrow element. These are the msqrt, mpadded, mphantom, menclose and the math element itself.

The Style Change <mstyle> Element
This double tag element can be used to give a set of styles to a nested expression. The mstyle element accepts a single argument, possibly being an inferred mrow of multiple children.

Mathematics style attributes common to presentation elements
These are:

Mathcolor: Specifies the foreground color to use when drawing the components of this element, such as the content for token elements or any lines, surds, or other decorations. It also establishes the default mathcolor used for child elements when used on a layout element.
Mathbackground: Specifies the background color to be used to fill in the bounding box of the element and its children. The default, "transparent", lets the background color, if any, used in the current rendering context to show through.

Read and try the following code:

    <math>
      <mstyle Mathbackground="lime" Mathcolor="red">
         <mrow>
            <mo> ( </mo>
            <mfrac> <mi> a </mi> <mi> b </mi> </mfrac>
            <mo> ) </mo>
         </mrow>
      </mstyle>
    </math>

The msqrt, mroot, mfenced, menclose or mstyle element does not need to be nested in the mrow element. It also acts as an mrow element. Here, the presence of the mrow element is because of the parentheses.

The mstyle element accepts a single argument possibly being an inferred mrow of multiple children. You should now know five elements with the inferred mrow element. These are the msqrt, mpadded, mphantom, menclose, mstyle and the math element itself.

As you can see from all the above, coding mathematics is not difficult. You need to identify the expressions, and then use the appropriate MathML elements for the expressions.

Legal Issues
In a mathematical expression, the slightest change in number, or the using of a wrong identifier, or the omission of an operator, or parentheses or index, 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 on!

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

BACK NEXT

Comments

Become the Writer's Fan
Send the Writer a Message