# Connexions

You are here: Home » Content » Writing MathML

### Lenses

What is a lens?

#### Definition of a lens

##### Lenses

A lens is a custom view of the content in the repository. You can think of it as a fancy kind of list that will let you see content through the eyes of organizations and people you trust.

##### What is in a lens?

Lens makers point to materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

##### Who can create a lens?

Any individual member, a community, or a respected organization.

##### What are tags?

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

#### Affiliated with (What does "Affiliated with" mean?)

This content is either by members of the organizations listed or about topics related to the organizations listed. Click each link to see a list of all content affiliated with the organization.
• CNX Documentation

This module is included inLens: Connexions Documentation
By: ConnexionsAs a part of collection: "A primer in MathML "

"This is a great primer on MathML."

Click the "CNX Documentation" link to see all content affiliated with them.

Click the tag icon to display tags associated with this content.

### Recently Viewed

This feature requires Javascript to be enabled.

### Tags

(What is a tag?)

These tags come from the endorsement, affiliation, and other lenses that include this content.

# Writing MathML

Module by: Sunil Kumar Singh. E-mail the author

Summary: Encoding in MathML has a linear framework.

We have worked with programs like Dreamweaver and Frontpage to write HTML mark-ups. On similar lines, there are programs to generate MathML mark-ups with built in facilities for error handling and testing. Using specialized programs to generate codes is generally the fastest way to write MathML codes.

Using specialized programs has the obvious advantage, but with certain overheads. It requires that we go through the process of familiarization with the program interface and understand the working philosophy of the same. Though these programs are robust and designed to fit in with all sorts of operating systems and deal with interoperability issues, there remains a remote possibility of mismatch and one has to take appropriate safeguards against difficulties arising out of the same. Worst of this approach is the sense of working within a “block box”, which might spring surprises with regard to what we expect and what the program delivers.

As against above, coding in the native way, using plain text editor has the disadvantages of the requirement of knowing MathML specification and relatively slower pace of coding. The first aspect, though, can be used to advantage as you have to understand the syntax, grammar, underlying features, limitations and possibilities of the MathML, knowing fully well about what can be done and what can not be done with MathML. So, there is less likelyhood of a surprise situation.

Further, it is a real possibility that you may actually cut down on the encoding substantially (typing per se) along with a corresponding increase in the coding speed. However, this would require a bit of planning and proficiency in copy (ctrl + c), cut (ctrl + x) and paste (ctrl + v) operations with a block of codes from one place to another.

## Features of MathML encoding

Before, we get into the rhythm of encoding, let us discuss the important features of MathML coding and our mathematical content requirement that would help us formulate an efficient approach to write MathML codes.

1: There are 30 elements in total with about 50 specific attributes, apart from common attributes.

2: A MathML coding is sensitive to the context and material being encoded. If your module involves matrix operation, then we might be using the set of table forming elements more frequently. This means that we shall be limited in using elements – may be not more than 10 to 15 of them in a given context (project). Further, we may not require to change the attributes except on few occasions.

3: Mathematical display is a two dimensional representation, but its coding is essentially linear, in which terms are connected with operators from left to write. As a consequence, codes are written progressively from left to right of the mathematical expressions and equations.

4: The vertical expansion of mathematical expression is controlled by a central element. For example a vertical stack may be structured on a form, implemented by “mfrac” element.

## Illustration

To illustrate different aspects of MathML encoding and logical sequence in which code lines are written, we undertake to write MathML codes for an equation given here : x = [ 32000 ( 1 - 5 100 ) ( 1 + 10 100 ) ( 1 + 25 2 100 ) ] x = [ 32000 ( 1 - 5 100 ) ( 1 + 10 100 ) ( 1 + 25 2 100 ) ]

Step 1 : Observe the content of the equation from left to right. Identify terms requiring expansion in vertical directions. In the given equation, there are three such terms. It is evident that “mfrac” element suits the requirement in hand. The last of three “mfrac” based expression, matter of fact, would require nested use of “mfrac” element.

Step 2 : Start from the left and write or insert basic construct of “mi” element (line 2).



1:       <m:math display="block">
2:          <m:mi> x </m:mi>

</m:math>



Step 3 : Copy “mi” element construct (line 2) and paste on the following line (line 3). Change “i” to “o” in order to change the initial and final tags to “mo” tags and change “x” by “=” so that code looks like :



1:       <m:math display="block">
2:           <m:mi> x </m:mi>
3:           <m:mo> = </m:mo>

</m:math>



Step 4 : In this step, using the technique of Step 2, add following 5 lines at the end (4 to 8):



1:       <m:math display="block">
2:           <m:mi> x </m:mi>
3:           <m:mo> = </m:mo>
4:           <m:mi> x </m:mi>
5:           <m:mi> x </m:mi>
6:           <m:mi> x </m:mi>
7:           <m:mi> x </m:mi>
8:           <m:mi> x </m:mi>

</m:math>



Use appropriate token elements with identifiers, operators and numbers by modifying the newly added lines :



1:       <m:math display="block">
2:           <m:mi> x </m:mi>
3:           <m:mo> = </m:mo>
4:           <m:mo> [ </m:mo>
5:           <m:mn> 3200 </m:mn>
6:           <m:mo> ( </m:mo>
7:           <m:mn> 1 </m:mn>
8:           <m:mo> - </m:mo>

</m:math>



What you have coded till now : x = [ 3200 ( 1 - x = [ 3200 ( 1 -

What is to be coded ultimately : x = [ 32000 ( 1 - 5 100 ) ( 1 + 10 100 ) ( 1 + 25 2 100 ) ] x = [ 32000 ( 1 - 5 100 ) ( 1 + 10 100 ) ( 1 + 25 2 100 ) ]

Step 4 : In this step, we shall handle the vertical term with “mfrac” element. Insert the basic block of “mfrac” element or type at the end (9 to 12) as shown :



1:       <m:math display="block">
2:           <m:mi> x </m:mi>
3:           <m:mo> = </m:mo>
4:           <m:mo> [ </m:mo>
5:           <m:mn> 3200 </m:mn>
6:           <m:mo> ( </m:mo>
7:           <m:mi> 1 </m:mi>
8:           <m:mo> - </m:mo>
9:           <m:mfrac>
10:             <m:mn> a </m:mn>
11:             <m:mn> b </m:mn>
12:          </m:mfrac>

</m:math>



Step 5 : Change the value of “mfrac” element’s argument as given in the equation. Copy line 6 twice and modifying the same to put a closing and opening parentheses (13 and 14). Further, add lines 15 and 16 by copying and modifying lines 7 and 8 :



1:       <m:math display="block">
2:           <m:mi> x </m:mi>
3:           <m:mo> = </m:mo>
4:           <m:mo> [ </m:mo>
5:           <m:mn> 3200 </m:mn>
6:           <m:mo> ( </m:mo>
7:           <m:mn> 1 </m:mn>
8:           <m:mo> - </m:mo>
9:           <m:mfrac>
10:            <m:mn> 5 </m:mn>
11:            <m:mn> 100 </m:mn>
12:          </m:mfrac>
13:          <m:mo> ) </m:mo>
14:          <m:mo> ( </m:mo>
15:          <m:mn> 1 </m:mn>
16:          <m:mo> + </m:mo>

</m:math>



Step 5 : Looking at the equation, it is easy to note that we need to have two fraction term with nominator and denominator. Thus, copy the block to display vertical term i.e. copy and paste “mfrac” code lines 9 to12 and modify according to the requirement(new lines 17 to 20). Copy and paste code lines 13 to 16 and modify as required (new lines 21 to 24). Finally copy and paste code lines 9 to 12 again as shown(new lines 25 to 28).



1:       <m:math display="block">
2:           <m:mi> x </m:mi>
3:           <m:mo> = </m:mo>
4:           <m:mo> [ </m:mo>
5:           <m:mn> 3200 </m:mn>
6:           <m:mo> ( </m:mo>
7:           <m:mn> 1 </m:mn>
8:           <m:mo> - </m:mo>
9:           <m:mfrac>
10:            <m:mn> 5 </m:mn>
11:            <m:mn> 100 </m:mn>
12:          </m:mfrac>
13:          <m:mo> ) </m:mo>
14:          <m:mo> ( </m:mo>
15:          <m:mn> 1 </m:mn>
16:          <m:mo> + </m:mo>
17:  9:      <m:mfrac>
18: 10:        <m:mn> 10 </m:mn>
19: 11:        <m:mn> 100 </m:mn>
20: 12:      </m:mfrac>
21: 13:      <m:mo> ) </m:mo>
22: 14:      <m:mo> ( </m:mo>
23: 15:      <m:mn> 1 </m:mn>
24: 16:      <m:mo> + </m:mo>
25:  9:      <m:mfrac>
26: 10:        <m:mn> 5 </m:mn>
27: 11:        <m:mn> 100 </m:mn>
28: 12:      </m:mfrac>

</m:math>



What you have coded till now : x = [ 3200 ( 1 - 5 100 ) ( 1 + 10 100 ) ( 1 + 5 100 x = [ 3200 ( 1 - 5 100 ) ( 1 + 10 100 ) ( 1 + 5 100

What is to be coded ultimately : x = [ 32000 ( 1 - 5 100 ) ( 1 + 10 100 ) ( 1 + 25 2 100 ) ] x = [ 32000 ( 1 - 5 100 ) ( 1 + 10 100 ) ( 1 + 25 2 100 ) ]

Step 6 : Note that last “mfrac” display requires another “mfrac” implementation. Its numerator itself is a “mfrac” display. Thus, we would require to change the line 26 placed near bottom with a block of “mfrac” codes that shall display “25/2”. For this we replace code line 26 with code block consisting of code lines 9 to 12. In order to make this block as the numerator of the parent “mfrac” element, we need to enclose this block with “mrow” element so that “mfrac” element considers the block as one argument. Change the “mo’ content (lines 10 and 11 at the bottom) to reflect the ratio as 25/2. Finally, add a closing parenthesis and a bracket at the end (lines 29 and 30) as shown.



13:         <m:mo> ) </m:mo>
14:         <m:mo> ( </m:mo>
15:         <m:mn> 1 </m:mn>
16:         <m:mo> + </m:mo>
17:  9:       <m:mfrac>
18: 10:         <m:mn> 10 </m:mn>
19: 11:         <m:mn> 100 </m:mn>
20: 12:     </m:mfrac>
21: 13:     <m:mo> ) </m:mo>
22: 14:     <m:mo> ( </m:mo>
23: 15:     <m:mn> 1 </m:mn>
24: 16:     <m:mo> + </m:mo>
25:  9:     <m:mfrac>
----
<m:mrow>
9:              <m:mfrac>
10:              <m:mn> 25 </m:mn>
11:              <m:mn> 2 </m:mn>
12:             </m:mfrac>
</m:mrow>
-----
27: 11:     <m:mn> 100 </m:mn>
28: 12:     </m:mfrac>
29:         <m:mo> ) </m:mo>
30:         <m:mo> ] </m:mo>

</m:math>



Step 7 : Save the file as test.xml. The code (after renumbering for reference purpose) at this stage looks like :



13:         <m:mo> ) </m:mo>
14:         <m:mo> ( </m:mo>
15:         <m:mn> 1 </m:mn>
16:         <m:mo> + </m:mo>
17:         <m:mfrac>
18:          <m:mn> 10 </m:mn>
19:          <m:mn> 100 </m:mn>
20:      </m:mfrac>
21:      <m:mo> ) </m:mo>
22:      <m:mo> ( </m:mo>
23:      <m:mn> 1 </m:mn>
24:      <m:mo> + </m:mo>
25:      <m:mfrac>
26:            <m:mrow>
27:              <m:mfrac>
28:              <m:mn> 25 </m:mn>
29:              <m:mn> 2 </m:mn>
30:             </m:mfrac>
31:            </m:mrow>
32:      <m:mn> 100 </m:mn>
33:      </m:mfrac>
34:         <m:mo> ) </m:mo>
35:         <m:mo> ] </m:mo>

</m:math>



What you have coded till now : x = [ 3200 ( 1 - 5 100 ) ( 1 + 10 100 ) ( 1 + 5 100 ) ] x = [ 3200 ( 1 - 5 100 ) ( 1 + 10 100 ) ( 1 + 5 100 ) ]

What is to be coded ultimately : x = [ 32000 ( 1 - 5 100 ) ( 1 + 10 100 ) ( 1 + 25 2 100 ) ] x = [ 32000 ( 1 - 5 100 ) ( 1 + 10 100 ) ( 1 + 25 2 100 ) ]

Step 8 : Comparing what we have achieved so far and what is the expected, we need few tweaking here and there. First we see that the brackets have not grown to the vertical height of the terms, composing the equation. In order to do this, we club the part of equation in the brackets within “mrow” tags. Thus, we insert “mrow” tag before line 4 and at the end of the code after line 35. Also, the bars of the three central "mfrac" elements have to be distinguished from the nested one. We use "linethickness" attribute on "mfrac" element and set the same to "medium". The final code and display are shown in the example.

### Example 1: Indices element : mroot



<m:math display="block">
<m:mi> x </m:mi>
<m:mo> = </m:mo>
<m:mrow>
<m:mo> [ </m:mo>
<m:mn> 32000 </m:mn>
<m:mo> ( </m:mo>
<m:mn> 1 </m:mn>
<m:mo> - </m:mo>
<m:mfrac linethickness="2">
<m:mn> 5 </m:mn>
<m:mn> 100 </m:mn>
</m:mfrac>
<m:mo> ) </m:mo>
<m:mo> ( </m:mo>
<m:mn> 1 </m:mn>
<m:mo> + </m:mo>
<m:mfrac linethickness="2">
<m:mn> 10 </m:mn>
<m:mn> 100 </m:mn>
</m:mfrac>
<m:mo> ) </m:mo>
<m:mo> ( </m:mo>
<m:mn> 1 </m:mn>
<m:mo> + </m:mo>
<m:mfrac linethickness="2">
<m:mrow>
<m:mfrac>
<m:mn> 25 </m:mn>
<m:mn> 2 </m:mn>
</m:mfrac>
</m:mrow>
<m:mn> 100 </m:mn>
</m:mfrac>
<m:mo> ) </m:mo>
<m:mo> ] </m:mo>
</m:mrow>
</m:math>



Save the file after editing as “test.xml”. The display looks like :

x = [ 32000 ( 1 - 5 100 ) ( 1 + 10 100 ) ( 1 + 25 2 100 ) ] x = [ 32000 ( 1 - 5 100 ) ( 1 + 10 100 ) ( 1 + 25 2 100 ) ]

## Content actions

PDF | EPUB (?)

### What is an EPUB file?

EPUB is an electronic book format that can be read on a variety of mobile devices.

My Favorites (?)

'My Favorites' is a special kind of lens which you can use to bookmark modules and collections. 'My Favorites' can only be seen by you, and collections saved in 'My Favorites' can remember the last module you were on. You need an account to use 'My Favorites'.

| A lens I own (?)

#### Definition of a lens

##### Lenses

A lens is a custom view of the content in the repository. You can think of it as a fancy kind of list that will let you see content through the eyes of organizations and people you trust.

##### What is in a lens?

Lens makers point to materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

##### Who can create a lens?

Any individual member, a community, or a respected organization.

##### What are tags?

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

| External bookmarks