Skip to content Skip to navigation

Connexions

You are here: Home » Content » Presentation layout elements (others)

Navigation

Content Actions
  • Download module PDF
  • Add to ...
    Add the module to:
    • My Favorites
    • A lens
    • An external social bookmarking service
    • My Favorites (What is '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 (What is 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.

    • External bookmarks
  • E-mail the author

Recently Viewed

This feature requires Javascript to be enabled.

Presentation layout elements (others)

Module by: Sunil Kumar Singh

Summary: Layout elements renders mathematical content in an organized manner on two/three dimensional space.

"mstyle" layout element

The "mstyle" element behaves as a single point style setting mechanism for elements enclosed by its tags. It may contain any number of arguments. Since it serves to set default vlaues for all elements within its opening and closing tags, it treats child elements as if they are bunched together as one. To failitate this requirement, "mstyle" implements infer “mrow”, if the arguments are more than one.

The “mstyle” element is capable to set all style attributes for most of the MathML elements, provided that the attribute value has a default value. Only exception to this general functionality is the table forming elements, which themselves implement equivalent functionalities of “mstyle”. In this sense, this element is truely all encompassing type as far as style attributes are concerned.

In MathML, style attributes are inherited by the rendering enviornment. The “mstyle” element can reset all inherited attributes from the environment, including common attributes for the token elements. But "mstyle" provides improved attribute maangement capabilities as it can set all of these common attributes to a group of the token elements and other elements in one go. This must be clearly understood that "mstyle" can set both new and deprecated common style attributes i.e. “mathvariant”, “mathsize”, “mathcolor” and “mathbackground” in new system and “fontsize”, “fontweight”, “fontstyle”, “fontfamily” and “color” in the deprecated system.

The example given below illustrates setting of stretching behaviour of the “mo” operators “(“ and “)” by setting “maxsize” attribute of “mo” operator via “mstyle” element. This restricts the growth of the parentheses to their default size.

Example 1: Setting "maxsize" with "mstyle" element


	    
    <m:math display="block">
      <m:mstyle maxsize="1"> 
        <m:mrow> 
          <m:mo> ( </m:mo> 
          <m:mfrac> 
            <m:mi> a </m:mi> 
            <m:mi> b </m:mi> 
          </m:mfrac> 
          <m:mo> ) </m:mo> 
        </m:mrow> 
      </m:mstyle> 
    </m:math>

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

( a b ) ( a b )

The child elements within “mstyle” tags inherit the attributes of the “mstyle” element. It is a parent – child relationship, in which child inherits the attributes of the parent. The attribute on individual element (child), however, overrides the inheritance from "mstyle" setting.

Example 2: Single point styling : mstyle


	    
    <m:math display="block">
       <m:mstyle fontsize="200%" fontweight="bold" 
       fontstyle="italic"   color="teak"> 
             <m:mfrac>
                  <m:mrow>
                  <m:mi>x</m:mi> 
                  <m:mo>+</m:mo> 
                  <m:mi mathsize="12pt">y</m:mi> 
                  </m:mrow>
                  <m:mn>2</m:mn>
             </m:mfrac>
      </m:mstyle> 
    </m:math>

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

x + y 2 x + y 2

Note that setting of size attribute on “mi” element overrides the setting of "mstyle”. Also note that we have, however, restricted out consideration here to common attributes, as attribute setting of the remaining inherited attributes may not have significant uses for general application.

"mpadded" layout element

Specific attributes :   width depth lspace rspace Specific attributes :   width depth lspace rspace

This element is used to manage space around content, but not by rendering space around the content. Its only effect is to modify the apparent size and position of the invisible "bounding box" around its content, so as to affect the relative position of the content with respect to the surrounding content or elements. The modification is done in accordance with the attribute values assigned to "width", "depth", "lspace" and "rspace" attributes.

As this element works on the whole content within its tags, it is imperative that all elements within the tags are treated as single argument. This requirement is fulfilled be implementing “mrow” like all those elements, which treat enclosed child elements as one unit.

Managing space around content

Attribute value types

  • width (default : as content) [ + | - ] unsigned-number ( % [ pseudo-unit ] | pseudo-unit | h-unit | namedspace )
  • lspace (default : 0em) [ + | - ] unsigned-number ( % [ pseudo-unit ] | pseudo-unit | h-unit | namedspace )
  • height (default : as content) [ + | - ] unsigned-number ( % [ pseudo-unit ] | pseudo-unit | v-unit )
  • depth (default : as content) [ + | - ] unsigned-number ( % [ pseudo-unit ] | pseudo-unit | v-unit )

Default specification of all attributes except that of “lspace” attribute is derived from the content enclosed within the “mpadded” element. But spacing to the left of the content is set to zero. This means that “mpadded” element renders content with its space left of content trimmed.

Attribute value types have specialized format with a purpose. Padding content with space is easily related with the original dimension of the content. Absolute values may require lot of testing to finalize the space needed. For this reason, “mpadded” attribute uses a pseudo unit, which is nothing but the three dimensions of the content i.e. “width, height” and “depth”. These attribute values refer to the corresponding dimensions of the content.

The format of the attribute value allows wide range of alternative ways of assigning values. Reading from the left, we can assign signed or unsigned values to the attributes. Important to note here is that negative number does not represent negative value. The “+/-“ sign is actually an increment or decrement indicator. The signed number will, therefore, increment or decrement the default value by that number. When an unsigned number is assigned, then attribute is set to that numeric value without any reference to the default value.

The value provided within parentheses indicates legal unit format of the number, in which the number can be expressed. There are four possible formats. The first format is either only percentage “%” of the content default or “%” of the named dimension of the content expressed as pseudo unit. Other alternative formats are normal formats used for number assignment in MathML. Some of the valid values are illustrated here :

"+1em" , "+2%", "2 height", "+1 width", "200% width", "+2%"

So far, we have only discussed how to assign values to attributes. We shall now see the implementation of the “mpadded” implement. But we need to note two important aspects of these examples. First, the color of invisible box around content has been colored to highlight the box so that we are able to visually inspect the space alterations affected by “mpadded” element. Second, box has been unrealistically enlarged for visual impact. Both of these measures are purely implemented for illustration purposes only.

Example 3: Space around content : "mpadded"


	    
    <m:math display="block">
      <m:mi>a</m:mi> 
      <m:mo>+</m:mo> 
      <m:mstyle background='yellow'> 
        <m:mpadded width='200%'> 
          <m:mfrac> 
            <m:mi>xy</m:mi> 
            <m:mi>4</m:mi> 
          </m:mfrac> 
          <m:mo>+</m:mo> 
          <m:mi>z</m:mi> 
        </m:mpadded> 
      </m:mstyle> 
      <m:mo>+</m:mo> 
      <m:mi>b</m:mi> 
    </m:math>

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

a + xy 4 + z + b a+ xy 4 + z +b

It is easy to infer from the display that “mpadded” modifies the surrounding space of the total rendering affected between its tags.

"mphantom" layout element

This element makes a sub - expressions invisible or hides the same from display. This feature is used to display the remaining expression, while keeping positions of other characters and their display intact. The idea is illustrated by hiding a part of the expression as shown here.



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

Example 4: Hiding character : mphantom


	    
    <m:math display="block">
         <m:mfrac> 
              <m:mrow>
              <m:mi>x</m:mi> 
              <m:mo>+</m:mo> 
              <m:mi>y</m:mi> 
              <m:mo>+</m:mo> 
              <m:mi>z</m:mi> 
              </m:mrow>
              <m:mrow>
              <m:mi>a</m:mi> 
              <m:mo>+</m:mo> 
                <m:mphantom>
                 <m:mo form="infix"> + </m:mo>
                 <m:mi> b </m:mi>
                </m:mphantom>
              <m:mi>c</m:mi> 
              </m:mrow>
          </m:mfrac> 
    </m:math>

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

x + y + z a + + b c x + y + z a + + b c

"mfenced" layout element

Specific attributes :   open close sparators Specific attributes :   open close sparators

The "mfenced" element provides convenient implementation of braces, brackets and parentheses. In addition, “mfenced” renders separation of terms between fences, using a character or entity reference. These implementations, though, can be achieved as well by “mo” operator individually. However, “mfenced” element coding is concise and may thus be favored. The codes given here are equivalent : 


	    
           <m:mfenced> 
              <m:mi>a</m:mi> 
              <m:mi>b</m:mi> 
            </m:mfenced> 
or,

           <m:mo> ( </m:mo>
             <m:mrow>
               <m:mi>a</m:mi>
               <m:mo>,</m:mo>
               <m:mi>b</m:mi>
             </m:mrow>
           <m:mo> ) </m:mo>

Implementation of two approaches by browser is exactly same as can be seen from the example given here.

Example 5: Fencing expression


	    
    <m:math display="block">
           <m:mfenced> 
              <m:mi>a</m:mi> 
              <m:mi>b</m:mi> 
            </m:mfenced> 
            <m:mi mathvariant="bold"> &nbsp;.vs.&nbsp; </m:mi>
              <m:mo> ( </m:mo>
               <m:mrow>
                <m:mi>a</m:mi>
                <m:mo>,</m:mo>
                <m:mi>b</m:mi>
               </m:mrow>
             <m:mo> ) </m:mo>
    </m:math>

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

a b .vs. ( a , b ) a b .vs. ( a , b )

Changing fences and separators

Attribute value types

  • open (default : “(“ ) : string
  • close (default : “(“ ) : string
  • separators (default : *) character or sequence of characters

The “open” and “close” attributes specify the opening and closing fences of the expression enclosed within “mfenced” tags, while the “separators” attribute specifies the intervening separators. When these attributes are not specified, then default vales are parentheses (open & close) for fences and a comma (“,”) for the separators. The separators are placed after each term except for the end term before the closing fence.

It is important to note here that “mfenced” provides for two attributes for fences. This allows us to assign different types of the fences, which is handy in displaying different types of range in mathematics.

Example 6: Fencing expression 


	    
    <m:math display="block">
           <m:mfenced open="(" close=")"> 
              <m:mi>a</m:mi> 
              <m:mi>b</m:mi> 
            </m:mfenced> 
    </m:math>

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

a b a b

If the value of the “separators” attribute is given a character value, then the same character is repeated to segregate terms within the expression. The “mfenced” element, however, provides an elegant mechanism to implement different types of separators within an expression. The “separators” attribute can assume a character or entity reference or a sequence of these. The sequence of character is given without any space between two characters. When more than one characters are supplied, then arguments within the fences are separated in sequence from first to last by corresponding character given in the attribute sequence. If the characters in the sequence are more than required then the remaining separator characters are ignored. On the other hand, if they are fewer than required, then last separator character is repeated.

The example given here highlights each of the features discussed above.

Example 7: Fencing expression


	    
    <m:math display="block">
      <m:mtext>More separators  :&nbsp;</m:mtext>
      <m:mfenced open='[(' separators='&ThinSpace;+;*'> 
        <m:mrow> 
          <m:mi>a</m:mi> 
          <m:mo>+</m:mo> 
          <m:mi>b</m:mi>
        </m:mrow> 
          <m:mi>c</m:mi> 
          <m:mi>d</m:mi> 
      </m:mfenced> 
          <m:mtext>&nbsp;Less separators :&nbsp; </m:mtext>
      <m:mfenced open='{' close='}]' separators='|;+'> 
        <m:mfrac> 
          <m:mi>a</m:mi> 

          <m:mi>b</m:mi> 
        </m:mfrac> 
        <m:mfrac> 
          <m:mi>d</m:mi> 
          <m:mi>e</m:mi> 
        </m:mfrac> 
        <m:mi>a</m:mi> 
        <m:mi>b</m:mi> 
        <m:mi>a</m:mi> 
        <m:mi>b</m:mi> 
      </m:mfenced> 
    </m:math>

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

More separators : a + b c d Less separators : a b d e a b a b More separators : a + b c d Less separators : a b d e a b a b

In the first “mfenced” construct, “open” attribute takes string of character “[(“. While the “separators” attribute takes a sequence of characters one of which is entity reference. Also, there are more separators (3) than required (2). Hence, the last one is ignored. Note that b and c are separated by invisible separator as such two letters are joined together.

In the second “mfenced” construct, there are lesser numbers of separators (3) than required (5). Hence, the last separator ("+") is repeated for the remaining arguments.

”menclose” layout element

Specific attributes :   notation Specific attributes :   notation

Attribute value types

  • notation (default : "longdiv") : longdiv | actuarial | radical | box | roundedbox | circle | left | right | top | bottom | updiagonalstrike | downdiagonalstrike | verticalstrike | horizontalstrike

The element encloses its content with figure specified by “notation” attribute. Many of these notations are important for display of some important structure used in mathematics. In particular long division procedure requires “square root “ like figure to encompass the content. No example has been given here as the current browsers are not implementing this feature of MathML.

”merror” layout element

Attribute value types

  • notation (default : "longdiv") : longdiv | actuarial | radical | box | roundedbox | circle | left | right | top | bottom | updiagonalstrike | downdiagonalstrike | verticalstrike | horizontalstrike

The merror element displays the content between its tags as an "error message". Generally, error messages are displayed in a style that immediately catches the attention of the viewer. This may be done by changing color – particularly in red or flashing characters.

The requirement of an error message arises for a processing program like mark up checker that would be required to report syntax or grammar problem. One such implementation is seen, when we submit an invalid MathML. The browser program promptly displays the error message for invalid mark up.

Comments, questions, feedback, criticisms?

Send feedback