MathML scripted elements
We continue the review of basic math notations and focus on building MathML elements with scripts.
Prerequisites: | Basic software installed, basic knowledge of working with files, and HTML basics (study Introduction to HTML.) |
---|---|
Objective: | To get familiar with basic MathML elements producing scripted elements. |
Subscripts and superscripts
Similarly to what we saw in the previous article, the <msub>
, <msup>
and <msubsup>
have a special structure expecting exactly two elements (for <msub>
, <msup>
) or three elements (for <msubsup>
):
<p>
msub:
<math>
<msub>
<mtext>child1</mtext>
<mtext>child2</mtext>
</msub>
</math>
</p>
<p>
msup:
<math>
<msup>
<mtext>child1</mtext>
<mtext>child2</mtext>
</msup>
</math>
</p>
<p>
msubsup:
<math>
<msubsup>
<mtext>child1</mtext>
<mtext>child2</mtext>
<mtext>child3</mtext>
</msubsup>
</math>
</p>
Below is the rendering of the above example in your browser.
You should notice that:
- The second child of the
<msub>
element is attached as a subscript of its first child. - The second child of the
<msup>
element is attached as a superscript of its first child. - The second and third children of the
<msubsup>
element are respectively attached as a subscript and superscript of its first child. - The text inside scripts is scaled down.
Underscripts and overscripts
The <munder>
, <mover>
and <munderover>
elements are very similar except that they are used to attach underscripts and overscripts. Instead of giving details, we will let you figure out their definitions yourself with the following exercise.
Active learning: Recognize under/over scripts
In the following example, try to guess the names of the mystery elements (written as question marks) and click the button to reveal the solution:
Active learning: Recognize scripted elements
The following MathML formula contains a more complex expression, nesting fractions, roots and scripts. Try to guess the elements laid out with scripted elements <msub>
, <msup>
, <msubsup>
, <munder>
, <mover>
, <munderover>
. Each time you click such an element, it is highlighted and a confirmation message is displayed. Finally, read the MathML source to verify whether that corresponds to your expectation.
More operator properties
We have previously seen some properties of the <mo>
element namely stretching in the vertical direction and spacing. Now that scripted elements are available, we can extend that list. We will do that by tweaking our previous example.
Stretching in horizontal direction
Let's first perform the substitutions and :
We now realize that the bottom bracket "⎵" and the rightward arrow "→" stretch horizontally to cover the width of the substituted values. Recall that some vertical operators can stretch to cover the height of non-stretchy siblings inside an <mrow>
. Similarly some horizontal operators can stretch to cover the width of non-stretchy siblings in an <munder>
, <mover>
or <munderover>
element.
Note: Stretching can happen for any child of the <munder>
, <mover>
or <munderover>
element, not just the underscript or overscript.
Large operator and limits
So far our example has actually been rendered with the display="block"
attribute. Let's look at the same example, as rendered without that attribute:
As expected, the formula is no longer centered and the rendering is modified to minimized the height. Focusing on the summation symbol, one can notice that the sigma is drawn smaller and that the scripts of the <munderover>
element are now attached as a subscript and a superscript! This is due to two properties of the "∑" operator:
- largeop: The operator is drawn with a bigger glyph if the
<math>
tag has adisplay="block"
attribute. - movablelimits: The underscripts and overscripts attached to the operator are respectively rendered as subscripts and superscripts if the
<math>
tag does not have thedisplay="block"
attribute.
Note: The largeop property is actually unrelated to scripts, even though operators having this property are typically scripted. The movablelimits property is taken into account for <munder>
and <mover>
elements too.
Summary
In this article, we've finished reviewing basic layout introducing elements <msub>
, <msup>
, <msubsup>
, <munder>
, <mover>
, <munderover>
for subscripts, superscripts, underscripts and overscripts. Using these elements, we were able to briefly introduce new properties of the <mo>
element. In the next article, we will continue focus on tabular layout.