Broad Network


Tabular Math for Presentation MathML

Presentation Mathematical Markup Language Part 4

Foreword: In this part of the series, I explain how to produce matrices, mathematical solutions consisting of equations, and related features, on the web.

By: Chrysanthus Date Published: 20 Feb 2016

Introduction

This is part 4 of my series, Presentation Mathematical Markup Language. In this part of the series, I explain how to produce matrices, mathematical solutions consisting of equations, and related features, on the web. You should have read the precious parts of the series before coming here, as this is a continuation.

Table or Matrix <mtable>
The mtable element is similar to the HTML table element. Its equivalent element for the tr element is the mtr element. Its equivalent element for the td element is the mtd element. In MathML, most elements are double tags (any single tag element has / after its name). You can have rowspan or columnspan just as you would have for HTML table.

Matrix
A matrix is a two-dimensional array of numbers delimited by tall parentheses. An example of a matrix is:

     ( 15 0 2 4 1 25 9 2 1 )

Each number (or symbol) goes into an mtd element. The code for this matrix is:

    <math>
      <mrow>  
        <mo> ( </mo>
        <mtable>
          <mtr>
            <mtd> <mn>15</mn> </mtd>
            <mtd> <mn>0</mn> </mtd>
            <mtd> <mn>2</mn> </mtd>
          </mtr>
          <mtr>
            <mtd> <mn>4</mn> </mtd>
            <mtd> <mn>1</mn> </mtd>
            <mtd> <mn>25</mn> </mtd>
          </mtr>
          <mtr>
            <mtd> <mn>9</mn> </mtd>
            <mtd> <mn>2</mn> </mtd>
            <mtd> <mn>1</mn> </mtd>
          </mtr>
        </mtable>
        <mo> ) </mo>
      </mrow>
    </math>

Parentheses in mo elements should always be nested in the mrow element to form an expression. So, the mrow element above is necessary.

It is possible to multiply a matrix by one number (symbol). The number is placed in front of the matrix. Read and try the following code that illustrates this (with a result):

    <math>
      <mn>2</mn>
      <mo> &#x2062;<!--INVISIBLE TIMES--> </mo>
      <mrow>  
        <mo> ( </mo>
        <mtable>
          <mtr>
            <mtd> <mn>6</mn> </mtd>
            <mtd> <mn>5</mn> </mtd>
          </mtr>
          <mtr>
            <mtd> <mn>4</mn> </mtd>
            <mtd> <mn>3</mn> </mtd>
          </mtr>
          <mtr>
            <mtd> <mn>2</mn> </mtd>
            <mtd> <mn>1</mn> </mtd>
          </mtr>
        </mtable>
        <mo> ) </mo>
      </mrow>
      <mo>=</mo>
      <mrow>  
        <mo> ( </mo>
        <mtable>
          <mtr>
            <mtd> <mn>12</mn> </mtd>
            <mtd> <mn>10</mn> </mtd>
          </mtr>
          <mtr>
            <mtd> <mn>8</mn> </mtd>
            <mtd> <mn>6</mn> </mtd>
          </mtr>
          <mtr>
            <mtd> <mn>4</mn> </mtd>
            <mtd> <mn>2</mn> </mtd>
          </mtr>
        </mtable>
        <mo> ) </mo>
      </mrow>
    </math>

The number multiplying the first matrix is 2.

Solution of Math Problem
A mathematical problem normally has more than one statement in its solution. The following solution finds the value of x in an equation. You do not need to know how to solve the problem in order to code (present) the solution. Identify the expressions and in this case, also see how the statements can be placed in the mtable element.

     x + 7 = 12 x = 12 - 7 x = 5

There are three columns. The code is:

    <math>
      <mtable>
        <mtr>
          <mtd>
            <mi>x</mi>
            <mo>+</mo>
            <mn>7</mn>
          </mtd>
          <mtd>
            <mo>=</mo>
          </mtd>
          <mtd>
            <mn>12</mn>
          </mtd>
        </mtr>
        <mtr>
          <mtd>
            <mi>x</mi>
          </mtd>
          <mtd>
            <mo>=</mo>
          </mtd>
          <mtd>
            <mn>12</mn>
            <mo>-</mo>
            <mn>7</mn>
          </mtd>
        </mtr>
        <mtr>
          <mtd>
            <mi>x</mi>
          </mtd>
          <mtd>
            <mo>=</mo>
          </mtd>
          <mtd>
            <mn>5</mn>
          </mtd>
        </mtr>
      </mtable>
    </math>

Labeled Row in Table or Matrix <mlabeledtr>
An equation can be labeled. You might have seen something like:

    x + 7 = 12            eqn 1
    x = 12 7            eqn 2

Here,        eqn1 and        eqn2  are labels to identify the equations. To achieve this, you need to replace the mtr elements with another kind of row element, which is the double tag mlabeledtr element.

With the mlabeledtr element, the first mtd child element is for the label. The content of this mtd element is the label (typically an mtext element). If you want the label to be on the right of the row (equation), you have to use the mtable attribute,

    side="right"

If you want the label to be on the left of the row (equation) you have to use the mtable attribute,

    side="left"

The default value is "right". With the mlabeledtr element, the first mtd element, which is the label element, does not form a table column. Read and try the following code:

    <math>
     <mtable side="right">
        <mlabeledtr>
         <mtd>
            <mtext>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eqn 1</mtext>
         </mtd>
         <mtd>
            <mi>x</mi>
            <mo>+</mo>
            <mn>7</mn>
         </mtd>
         <mtd>
            <mo>=</mo>
         </mtd>
         <mtd>
            <mn>12</mn>
         </mtd>
        </mlabeledtr>
        <mlabeledtr>
         <mtd>
            <mtext>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eqn 2</mtext>
         </mtd>
         <mtd>
            <mi>x</mi>
         </mtd>
         <mtd>
            <mo>=</mo>
         </mtd>
         <mtd>
            <mn>12</mn>
            <mo>-</mo>
            <mn>7</mn>
         </mtd>
        </mlabeledtr>
        <mlabeledtr>
         <mtd>
            <mtext></mtext>
         </mtd>
         <mtd>
            <mi>x</mi>
         </mtd>
         <mtd>
            <mo>=</mo>
         </mtd>
         <mtd>
            <mn>5</mn>
         </mtd>
        </mlabeledtr>
     </mtable>
    </math>

Note that in the above display, apart from the equal-to signs that are aligned horizontally, the expressions are not aligned horizontally. In math solution the expressions on the left of = are aligned right and those to the right of = are aligned left. Read and try the following code and note the use of the columnalign attribute:

    <math>
     <mtable side="right">
        <mlabeledtr>
         <mtd columnalign="right">
            <mtext>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eqn 1</mtext>
         </mtd>
         <mtd>
            <mi>x</mi>
            <mo>+</mo>
            <mn>7</mn>
         </mtd>
         <mtd>
            <mo>=</mo>
         </mtd>
         <mtd columnalign="left">
            <mn>12</mn>
         </mtd>
        </mlabeledtr>
        <mlabeledtr>
         <mtd>
            <mtext>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eqn 2</mtext>
         </mtd>
         <mtd columnalign="right">
            <mi>x</mi>
         </mtd>
         <mtd>
            <mo>=</mo>
         </mtd>
         <mtd columnalign="left">
            <mn>12</mn>
            <mo>-</mo>
            <mn>7</mn>
         </mtd>
        </mlabeledtr>
        <mlabeledtr>
         <mtd>
            <mtext></mtext>
         </mtd>
         <mtd columnalign="right">
            <mi>x</mi>
         </mtd>
         <mtd>
            <mo>=</mo>
         </mtd>
         <mtd columnalign="left">
            <mn>5</mn>
         </mtd>
        </mlabeledtr>
     </mtable>
    </math>

The mtd element accepts a single argument possibly being an inferred mrow of multiple children. You should now know seven elements with the inferred mrow element. These are the msqrt, mstyle, mpadded, mphantom, menclose, mtd and the math element itself. There are nine such elements, which are msqrt, mstyle, mpadded, mphantom, menclose, mtd, mscarry, merror and the math. I will talk about mscarry and merror later.

The msqrt, mroot, mfenced, menclose, mstyle, msup, msub, mover, munder or monderover element does not need to be nested in the mrow element. It also acts as an mrow element. That is, each of these elements does not need the immediate outer mrow element.

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. For a matrix, place each number in a cell. For math solution, you can use three columns, with the equal-to signs, in the middle column.

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