Skip to content Skip to navigation

Connexions

You are here: Home » Content » Presentation layout elements (mrow, mfrac, msqrt, mroot)

Navigation

Recently Viewed

This feature requires Javascript to be enabled.

Presentation layout elements (mrow, mfrac, msqrt, mroot)

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

User rating (How does the rating system work?)
Ratings

Ratings allow you to judge the quality of modules. If other users have ranked the module then its average rating is displayed below. Ratings are calculated on a scale from one star (Poor) to five stars (Excellent).

How to rate a module

Hover over the star that corresponds to the rating you wish to assign. Click on the star to add your rating. Your rating should be based on the quality of the content. You must have an account and be logged in to rate content.

:
(0 ratings)

Summary: Lay out elements are responsible for two dimensional structure, arrangement and final appearnce by the rendering system.

Note: Your browser may not currently support MathML. See our browser support page for additional details. You can always view the correct math in the PDF version.

Layout elements control two dimensional layout of characters, symbols and composed expressions. There are three groups of elements that determine the two dimensional lay out of the mathematical content and affects its maangement.

Layout element groups

  • Basic layout elements
  • Scripting elements
  • Table elements

Basic layout elements comprises of 10 elements. The names and their basic role in rendering layout are listed here :

Basic layout elements

  1. “mrow” : makes horizontal groups of sub-expressions for variety of purposes
  2. “mfrac : renders elements in P/Q form
  3. “msqrt” : renders a square root
  4. “mroot” : renders a radical with an index
  5. “mstyle : set environment attributes for the enclosed elements
  6. “merror : enclose a syntax error message from a preprocessor
  7. “mpadded” : manages space around content
  8. “mphantom” : makes content invisible, while maintaining structure
  9. “mfenced” : Segregates terms with separators and surround its content with a pair of fences
  10. “menclose” : enclose content with a stretching symbol

”mrow” layout element

The “mrow” element is a horizontal sub-grouping facility. Grouping of sub expression is an important requirement for variety of reasons. Primarily, this element determines the relationship between an “operator” and “operand”. When there is single character “operator” and “operand” relationship, then grouping is not an issue. However, when there more than one “operand” in an expression, then grouping is required.

Grouping of elements is also important where elements require certain numbers of argument. In such situation, it is possible that there are more child elements than the arguments required. Consider the example here, where child elements are grouped to meet the requirement of “mfrac” syntax for two arguments.

Example 1: "mfrac" layout element


	    
    <m:math display="block">
         <m:mfrac> 
                  <m:mrow>
                  <m:mi>x</m:mi> 
                  <m:mo>+</m:mo> 
                  <m:mn>y</m:mn> 
                  </m:mrow>
                  <m:mn>z</m:mn> 
         </m:mfrac>
    </m:math>

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

x + y z x + y z

In the example above, “mrow” element is used to group the sub-expression “x + y” to be treated as numerator in “mfrac” implementation.

We have also seen earlier that “mrow” plays important role in determining the form of an operator. The form of an operator as “prefix” or “infix” or “postfix” is determined by the position of an operator in the group of sub expression defined by “mrow” element.

Grouping of elements, terms and sub-expressions (in yet another sub-expression) is a common requirement for meaningful mathematical expression. As such, MathML platform implements an inferred mechanism, whereby certain elements infer that the child elements are grouped with “mrow” in an implicit manner. This means that we may save on writing a pair of “mrow” tags in such situation.

The elements, which implements inferred “mrow” are : “msqrt”, “mstyle”, “merror”, “menclose”, “mpadded”, “mphantom”, “mtd”, and “math”. Important to note here is the inclusion of top level “math” element in the list. It means that putting “mrow” tag just after “math” element is actually redundant.

If we look closely at the elements, which implement inferred “mrow”, then we observe that all these elements require to treat everything inside it as a single unit. This is the reason that they would otherwise require a pair of “mrow” tags to combine all child elements as one group. It is, therefore, good thinking on the part of MathML developers to enforce “mrow” inexplicitly and save on coding and avoid cluttering with “mrow” tags.

”mfrac” layout element

Specific attributes :   linethickness numalign denomalign bevelled symmetric Specific attributes :   linethickness numalign denomalign bevelled symmetric

The “mfrac” element renders fraction in p q p q form. The element requires two arguments to implement the fraction. The first argument is numerator, while the second is denominator of the fraction. The syntax of the element is as given below : 



<mfrac> numerator denominator </mfrac>

The “mfrac” element is an extremely flexible element to produce very complicated fraction, in which numerator or denominator may themselves be a fraction. Such implementation is affected by nested “mfrac” as shown in the example here.

Example 2: Nested "mfrac" display


	    
    <m:math display="block">
      <m:mi> x </m:mi> 
      <m:mo> = </m:mo>
      <m:mfrac> 

          <m:mrow> 
          <m:mn> 1 </m:mn> 
          <m:mo> + </m:mo>
          <m:mfrac>
           <m:mn> 3 </m:mn> 
           <m:mn> 10 </m:mn> 
          </m:mfrac> 
          </m:mrow> 
          
          <m:mrow> 
          <m:mfrac>
           <m:mn> 2 </m:mn> 
           <m:mn> 7 </m:mn> 
          </m:mfrac> 
          <m:mo> + </m:mo>
          <m:mfrac>
           <m:mn> 12 </m:mn> 
           <m:mn> 5 </m:mn> 
          </m:mfrac> 
          </m:mrow> 

      </m:mfrac> 
    </m:math>

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

x = 1 + 3 10 2 7 + 12 5 x = 1 + 3 10 2 7 + 12 5

In the example, the numerator of the outermost “mfrac” element contains expression consisting of another “mfrac” element, while the denominator consists of two “mfrac” elements. Also note the use of “mrow” element to ensure that a “mfrac” elements takes exactly two arguments.

Changing bar thickness

Attribute value types

  • linethickness (default = 1) : number | thin | medium | thick

The fraction is displayed with a fraction bar or rule, separating numerator and denominator. Appearance of this bar can be changed using “linethickness” attribute. The default thickness of the bar is set by the rendering enviornment. When set to zero, no bar is shown.

A thicker bar, in relation to default thickness, can be shown assigning values to “linethickness” attribute. MathML provides predetermined thin, medium and thick values, which is a preferred technique to display different thicknesses of the bar. This way, we can maintain uniformity in our display. Normally, bar thickness is not required to be changed except when nested “mfrac” is implemented. In that case, there are more than one bar and as such it may be required to distinguish the central bar from others. The example given here encapsulates these aspects of “mfrac” display. .

Example 3: Distinguishing line thichness in "mfrac" display


	    
    <m:math display="block">
      <m:mi> x </m:mi> 
      <m:mo> = </m:mo>
      <m:mfrac linethickness="thick"> 

          <m:mrow> 
          <m:mn> 1 </m:mn> 
          <m:mo> + </m:mo>
          <m:mfrac linethickness="medium">
           <m:mn> 3 </m:mn> 
           <m:mn> 10 </m:mn> 
          </m:mfrac> 
          </m:mrow> 
          
          <m:mrow> 
          <m:mfrac>
           <m:mn> 2 </m:mn> 
           <m:mn> 7 </m:mn> 
          </m:mfrac> 
          <m:mo> + </m:mo>
          <m:mfrac>
           <m:mrow>
           <m:mfrac linethickness="medium">
             <m:mn> 8 </m:mn> 
             <m:mn> 11 </m:mn> 
           </m:mfrac>
           </m:mrow>
           <m:mn> 5 </m:mn> 
          </m:mfrac> 
          </m:mrow> 

      </m:mfrac>
    </m:math>

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

x = 1 + 3 10 2 7 + 8 11 5 x = 1 + 3 10 2 7 + 8 11 5

Bevelled fraction and the alignment of rows

Attribute value types

  • numalign (default = center) : left | center | right
  • denomalign (default = center) : left | center | right
  • bevelled (default = false) : true | false

The “numalign” and “demoalign” affects alignment of numerator and denominator with respect to the bar. In most of the case, we do not change the default “center” element as this is the manner in which expressions are written in mathematics.

The “bevelled” attribute provides an alternate form for rendering fraction. In beveled form, the bar is a slant line, in stead of a horizontal line. This form is useful, when we want to include fraction inside the text as its default form takes more vertical space than that of the text, disturbing line spacing between text lines. More significantly, this reduces vertical space of an intensively nested expression.

Example 4: Bevelled "mfrac" display


	    
    <m:math display="block">
      <m:mi> x </m:mi> 
      <m:mo> = </m:mo>
      <m:mfrac bevelled="true" linethickness="thick"> 

          <m:mrow> 
          <m:mn> 1 </m:mn> 
          <m:mo> + </m:mo>
          <m:mfrac linethickness="medium">
           <m:mn> 3 </m:mn> 
           <m:mn> 10 </m:mn> 
          </m:mfrac> 
          </m:mrow> 
          
          <m:mrow> 
          <m:mfrac>
           <m:mn> 2 </m:mn> 
           <m:mn> 7 </m:mn> 
          </m:mfrac> 
          <m:mo> + </m:mo>
          <m:mfrac>
           <m:mrow>
           <m:mfrac bevelled="true" linethickness="medium">
             <m:mn> 8 </m:mn> 
             <m:mn> 11 </m:mn> 
           </m:mfrac>
           </m:mrow>
           <m:mn> 5 </m:mn> 
          </m:mfrac> 
          </m:mrow> 

      </m:mfrac>   
    </m:math>

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

x = 1 + 3 10 2 7 + 8 11 5 x = 1 + 3 10 2 7 + 8 11 5

Radical layout elements

The “msqrt” and “mroot” are radical elements. The “msqrt” element renders square root, while “mroot” element represents indices with a base and index.

"msqrt" layout element

The “msqrt” element accepts zero or one argument. Its syntax is : 



<msqrt> base </msqrt>

When there are more than one child elements, then they are considered to be enclosed within “mrow” tags. This means that the “msqrt” element draws an inferred implementation of “mrow”. This saves us from coding “mrow” tags explicitly, irrespective of numbers of arguments.

Example 5: Square root element : msqrt


	    
    <m:math display="block">
         <m:msqrt> 
                  <m:mi>x</m:mi> 
                  <m:mo>-</m:mo> 
                  <m:mn>3</m:mn> 
         </m:msqrt>
    </m:math>

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

x - 3 x - 3

Like other elements in MathML, “msqrt” element supports nesting to enclose square root recursively.

Example 6: Nested square


	    
    <m:math display="block">
     <m:msqrt>
       <m:mi>{</m:mi> 
       <m:mi>x</m:mi> 
       <m:mi>+</m:mi> 
        <m:msqrt>
        <m:mi>(</m:mi> 
          <m:mi>x</m:mi> 

          <m:mi>+</m:mi> 
          <m:mi>10</m:mi> 
        <m:mi>)</m:mi> 
        </m:msqrt> 
       <m:mi>}</m:mi> 
     </m:msqrt>     </m:math>

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

{ x + ( x + 10 ) } { x + ( x + 10 ) }

"mroot" layout element

The “mroot” element requires exactly two arguments – the first one as the base and second as index. The syntax of the element is : 



<m:mroot> base index </m:mroot>

Each of these arguments may be combination of elements, which must be grouped separately with the help of “mrow” element in two distinct groups.

Example 7: Indices element : mroot


	    
    <m:math display="block">
         <m:mroot>
            <m:mrow>
                  <m:mi>x</m:mi> 
                  <m:mo>-</m:mo> 
                  <m:mn>3</m:mn>
            </m:mrow>
             <m:mfrac>
                  <m:mi>x</m:mi> 
                  <m:mn>2</m:mn>
             </m:mfrac>
         </m:mroot>
    </m:math>

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

x - 3 x 2 x - 3 x 2

Content actions

Give Feedback:

E-mail the module author | Rate module ( How does the rating system work?)

Rating system

Ratings

Ratings allow you to judge the quality of modules. If other users have ranked the module then its average rating is displayed below. Ratings are calculated on a scale from one star (Poor) to five stars (Excellent).

How to rate a module

Hover over the star that corresponds to the rating you wish to assign. Click on the star to add your rating. Your rating should be based on the quality of the content. You must have an account and be logged in to rate content.

(0 ratings)

Download:

Module PDF

Add module to:

My Favorites (?)

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

| A lens (?)

Definition of a lens

Lenses

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

What is in a lens?

Lens makers point to Connexions 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 Connexions member, a community, or a respected organization.

What are tags? tag icon

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