4.3 General Layout Elements

< Day Day Up >

General layout elements, also known as layout schemata, specify templates for constructing expressions out of smaller parts. In this section, we look at the different types of layout schemata in more detail.

Rows

The mrow element is used to group together any number of related subexpressions. The arguments of the mrow element are visually rendered in a horizontal row from left to right, in the order they occur. This element is important because:

It provides guidance for proper spacing between its arguments.
It provides information about linebreaking and indentation.
It provides information on the meaning of the markup that is useful for audio renderers or computer algebra systems.
It specifies the grouping of subexpressions into arguments.
It specifies the scope of stretchable operators.

In general, multiple mrow elements are nested inside each other to reflect the tree structure of the expression being represented. Typically, each mrow element has as its arguments a single operator along with the operands that are being acted upon, as shown here:

x + 2y − 1

    <mrow>      <mi>x</mi>      <mo>+</mo>      <mrow>        <mn>2</mn>        <mo>&InvisibleTimes;</mo>        <mi>y</mi>      </mrow>      <mo>-</mo>      <mn>1</mn>     </mrow>

The presence of an mrow element is automatically inferred around the content of certain presentation elements, if they occur with a number of arguments different from 1, as explained in Section 4.1.

It is possible to add additional mrow elements to an expression without changing its meaning. This is not a MathML error and does not affect the validity of the expression. However, to avoid any additional overhead in processing the markup it is a good practice in general to use the smallest number of mrow elements that are necessary. This is because each extra mrow element adds another level in the document tree and requires you to create an extra bounding box; for example, when you apply a CSS stylesheet to the expression.

Fractions

The mfrac element is used to represent fractions and has the following syntax:

    <mfrac> numerator denominator </mfrac>

The mfrac element has four attributes: linethickness, bevelled, numalign, and denomalign.

The linethickness attribute specifies the thickness of the line that separates the numerator and denominator. The default setting of 1 causes the line to be drawn in the standard thickness of lines for the font style being used. A setting of 0 causes the line to be invisible and can be used to represent binomial coefficients, as shown here:

    <mrow>      <mo>(</mo>      <mfrac linethickness="0">        <mi>n</mi>        <mi>r</mi>      </mfrac>      <mo>)</mo>     </mrow>

When the bevelled attribute is set to false, the numerator is shown above the denominator with a horizontal line between them. When it's set to true, a slightly raised numerator is shown to the left of a slightly lowered denominator with a diagonal line between them, as shown in the following example:

    <mrow>    <mfrac bevelled="true">      <mn>1</mn>      <mrow>        <mi>x</mi>        <mo>+</mo>        <mi>y</mi>      </mrow>      </mfrac>     </mrow>

The numalign and denomalign -attributes specify the horizontal alignment of the numerator and denominator, respectively. They can take values left, right, and center. The default is to be centered, but it may be more appropriate for a very long numerator or denominator that stretches along multiple line to be aligned at left.

In the following example, you can left-align the numerator with the denominator by setting the value of numalign="left":

    <mfrac numalign="left">      <mrow>         <mi>a</mi><mo>+</mo><mi>b</mi>       </mrow>       <mrow>         <mi>a</mi><mo>+</mo><mi>b</mi>         <mo>+</mo><mi>c</mi>      </mrow>     </mfrac>

It is conventional for the numerator and denominator to appear in a smaller font when a fraction is displayed as an inline expression; that is, surrounded by text. To satisfy this convention, the mfrac element automatically changes the value of two attributes of the mstyle element: displaystyle and scriptlevel, which are normally inherited from the environment. The mfrac element sets displaystyle to false, or if it was already set to false it increments scriptlevel by 1, within numerator and denominator. For more details about the displaystyle and scriptlevel attributes, see the description of the mstyle element in the "Applying Styles" section later in this section.

Roots and Radicals

The msqrt element is used for representing square roots, as shown here:

    <msqrt><mn>2</mn></msqrt>

An msqrt element accepts any number of arguments. However, if the number of arguments is other than 1, they are interpreted as lying within an inferred mrow.

More generally, roots are represented using the mroot element. Each mroot element must contain exactly two arguments with the following syntax:

    <mroot> base index </mroot>

Here is an example:

    <mroot>      <mi>x</mi>      <mn>3</mn>     </mroot>

An mroot element increments scriptlevel by 2 and sets displaystyle to false within index but leaves both attributes unchanged within base. This causes the index of the radical to be displayed in a smaller size, as required by convention. For more details about the displaystyle and scriptlevel attributes, see the description of the mstyle element in the "Applying Styles" section later in this chapter.

Applying Styles

The mstyle element is used to apply style changes throughout a given piece of presentation markup. If an attribute is specified explicitly on an mstyle element, the value of that attribute is inherited by all elements contained within that mstyle element, either directly or indirectly. The net effect is to reset the default value of that attribute everywhere in the environment defined by that mstyle element. The mstyle element therefore provides a general mechanism for applying style changes selectively to specific parts of an expression.

Imagine, then, that you want an attribute to have a particular value everywhere in a given piece of markup. Instead of specifying that attribute explicitly on each element, you can just specify the attribute once on an mstyle element that encloses the markup where you want the changes to apply. Of course, you can still override the default setting applied by the mstyle element by explicitly specifying an attribute on any element in the environment.

For example, if you want a certain subexpression within a larger expression to be rendered in a 24-point font size, you can use the following markup:

    <mrow>      <mi mathsize="24 pt">x</mi>      <mo mathsize="24 pt">+</mo>      <mn mathsize="24     pt">1</mn>     </mrow>

A simpler way to achieve the same result is shown here (this markup is equivalent to the markup in the above example):

    <mstyle mathsize="24 pt">     <mrow>       <mi>x</mi>       <mo>+</mo>       <mn>1</mn>     </mrow>    </mstyle>

Each mstyle element can accept any attribute for any presentation element that does not have a required value. This means that any attribute with either a default value or a value that is inherited or computed can be specified using the mstyle element. In addition, several style attributes are specifically defined for use with the mstyle element. Each of these attributes has a default value that is inherited by every presentation element, even if the elementis not explicitly enclosedin an mstyle element.

Script Size Attributes

Many common notational structures require characters to be displayed in a reduced size relative to the surrounding text. For example, the numerator and denominator of a fraction that appears in a line of text are typically shown in a reduced size. Similarly, subscripts and superscripts are typically shown in a smaller size than the base to which they are attached. The reduction in size of characters that occur in such special positions is controlled by two attributes of the mstyle element: scriptlevel and scriptsizemultiplier.

The scriptlevel attribute takes integer values. It has a value of 0 for normal text, 1 for subscripts, 2 for subscripts of subscripts, and so on. Each increase in the value of scriptlevel leads to a corresponding decrease in the font size, according to the following algorithm. The current font size is multiplied by the value of scriptsizemultiplier raised to the power of the change in the value of scriptlevel. The default value of scriptsizemultiplier is 0.71. This value, as well as the algorithm for calculating the reduction in font size, is based on typesetting conventions chosen because they produce acceptable-looking results in practice. There is also an additional attribute called scriptminsize, which specifies a minimum value below which the font size cannot be reduced, regardless of the value of scriptsizemultiplier.

Another important attribute of the mstyle element is displaystyle. This attribute specifies whether an expression should be rendered in display mode or inline mode. It achieves this by affecting the rendering of the mo element, based on the values of its largeop and movablelimits, as explained in the discussion of the mo element in Section 4.1.

A setting of displaystyle="false" is used for inline mathematical expressions, which typically appear embedded in a paragraph of text. Such expressions are typically rendered in a smaller size and with underscripts and overscripts moved to the subscript and superscript position, respectively. This causes the mathematical expression to be vertically compressed so that it does not disrupt the spacing between lines.

A setting of displaystyle="true" is used for mathematical expressions that are to be rendered in display mode; that is, in a line by themselves. Such expressions are typically rendered in a larger size and with any underscripts and overscripts in their normal positions.

Certain presentation elements, such as mfrac, mroot, msub, msup, and so on, automatically change the values of scriptlevel and displaysize in one or more of their arguments. Details of this behavior are provided in the discussion of these individual elements in this chapter.

Color and Background Attributes

The mstyle attribute also accepts the color and background attributes, which determine the color of the font and background, respectively. These attributes can be set directly on token elements only. Hence, the mstyle element provides a way to specify the color and background of elements other than token elements.

The color and background attributes can both be specified in either RGB notation or as an HTML color name, as shown in the examples below.

This markup displays some text in a red color with a yellow background:

    <mstyle mathcolor="red" mathbackground="yellow">     <mtext>Here is some colored text.</mtext>    </mstyle>

This displays an expression in red color with a white background:

    <mstyle mathcolor="#FF0000"     mathbackground="#FFFFFF">     <mrow>       <mi>x</mi>       <mo>+</mo>       <mn>1</mn>     </mrow>    </mstyle>

Spacing Attributes

The following seven attributes of the mstyle element set the size of the various named spaces defined in MathML:

veryverythinmathspace
verythinmathspace
thinmathspace
mediummathspace
thickmathspace
verythickmathspace
veryverythickmathspace

Each of these attributes defines a fixed horizontal space, with the default value ranging between 1/18 em and 7/18 em. Since the spacing between operators in the operator dictionary is defined in terms of these values, setting these values to a larger or smaller value can make the spacing between all operators looser or tighter.

Fenced Expressions

The mfenced element surrounds its content with a pair of fences (such as brackets or parentheses) and automatically inserts a separator between each pair of arguments. It provides a compact way of expressing markup involving fences and separators.

Consider the following expression:

f (x, y)

    <mrow>      <mi>f</mi>      <mo>&ApplyFunction;</mo>      <mrow>        <mo>(</mo>        <mi>x</mi>        <mo>,</mo>        <mi>y</mi>        <mo>)</mo>      </mrow>     </mrow>

The same expression can also be represented more compactly by the following markup:

f (x, y)

    <mrow>      <mi>f</mi>      <mo>&ApplyFunction;</mo>      <mfenced><mi>x</mi><mi>y</mi></mfenced>     </mrow>

The characters used as the opening and closing fence are determined by the value of the attributes, open and close. The default values of these attributes are the opening and closing parentheses. The attribute separators determine the character used as the separator. This can be specified as a sequence of zero or more characters. If there are too many separators, the extra ones are ignored. If there are too few separators, the last one is repeated as many times as required.

Here are two more examples that show the use of these attributes:

(a + b + c)

    <mfenced separator="+">      <mi>a</mi>      <mi>b</mi>      <mi>c</mi>     </mfenced>

[0, 1)

    <mfenced open="[">      <mn>0</mn>      <mn>1</mn>     </mfenced>

Padding Expressions

The mpadded element provides a way to add extra space or "padding" around its content. It works by modifying the apparent size and position of the bounding box in which its content is rendered. The bounding box of the content is surrounded by an extra bounding box. The attributes of the mpadded element determine the size and position of this extra box.

The mpadded element has four attributes:

width: determines the horizontal length of the bounding box. The bounding box of the mpadded element is rendered flush left with the bounding box of its contents. Hence, when you increase the width, you add space to the right of the box's contents.
lspace: specifies the amount of space between the left edge of the bounding box and the left edge of the bounding box of its contents.
height: specifies the vertical space between the baseline of the contents (the line along the bottom of most letter glyphs in normal text rendering) and the top of the bounding box of the mpadded element
depth: specifies the vertical space between the baseline of the contents and the bottom of the bounding box of the mpadded element.

You can specify each of these attributes in several different ways: as a number followed by a unit, as a percentage, or as a multiple of the default value or a named space. Here are some examples of the mpadded element that show different ways of specifying the attribute values:

 <mpadded width="+0em"> ... </mpadded>    <mpadded width="+75%"> ... </mpadded>    <mpadded width="100%"> ... </mpadded>    <mpadded width="1.0 width"> ... </mpadded>

Each attribute value can take positive or negative values. You can use negative values of the attributes to fake the appearance of certain characters. For example, the open-face R character used to represent the set of all real numbers would normally be indicated using the character entity reference, as shown below:

    R    <mi>&#x211D; </mi>

Alternatively, you could use the named entity reference for this character, &Ropf;. However, on a system where the appropriate font to display the open-face character is not available, you could approximate the appearance of this character using the following markup:

    R    <mrow>         <mpadded width="0"> <mi>R</mi> </mpadded>      <mspace width="0.3em"/>      <mtext>|</mtext>     </mrow>

However, this type of markup alters the meaning of the expression and hinders its interpretation by audio renderers and computer algebra systems. Hence, MathML specifically discourages the use of spacing to convey meaning.

Making Expressions Invisible

The mphantom element makes its content invisible while preserving the size and position of the bounding box of its contents. This element is useful for aligning parts of an expression.

For example, in the expression below the x in the numerator is aligned with the x in the denominator if you explicitly add a "+x²" term enclosed in an mphantom element, in the numerator:

    <mfrac>      <mrow>        <mn>1</mn><mo>+</mo><mi>x</mi>        <mphantom>          <mo>+</mo>          <msup>            <mi>x</mi>            <mn>2</mn>         </msup>        </mphantom>      </mrow>      <mrow>        <mn>1</mn><mo>+</mo><mi>x</mi><mo>+</mo>        <msup>          <mi>x</mi>          <mn>2</mn>        </msup>      </mrow>     </mfrac>

Special Notations

The menclose element renders its content inside an enclosing notation, determined by the value of its notation attribute. This attribute can take three values, longdiv, actuarial, and radical, each corresponding to a specific type of notation. The following example shows what the rendering for notation="longdiv" looks like:

    <mrow>     <mn>37</mn>     <menclose notation="longdiv">       <mn>1456</mn>     </menclose>    </mrow>

< Day Day Up >