MathML- Underscript, Overscript and UnderOverscript

Written by @m_k_amin 29 May 2013

In mathematical equations, sometimes it is needed to put a bar, hat, dot and etc. under or over the main characters. This feature called underscript and overscript, and have been defined in HTML5 MathML. You can also use both of them (UnderOverscript) at the same time. The following example shows how to put some symbols above or below the main text. It is shown how to specify a script for a group of texts not just a single one and also how to use the combination of under and over scripts together.You can also turn on the accent option to make the scripts larger.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.html5freecode.com coded by: Kerixa Inc. -->
<!-- This Script is from www.html5freecode.com, Coded by: Kerixa Inc-->
<script type="text/javascript"
          src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<body style="font-size: 18pt;">

<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
      <munder>
         <mi>A</mi>
         <mo>&UnderBrace;</mo>
      </munder>

	<mspace width="150px" />
	
      <mover>
         <mi>A</mi>
         <mo>&OverBar;</mo>
      </mover>
</math>

<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
      <munder accentunder="false">
         <mi>A</mi>
         <mo>&rarr;</mo>
      </munder>
      <munder accentunder="true">
         <mi>A</mi>
         <mo>&rarr;</mo>
      </munder>

	<mspace width="150px" height="20px" />

      <mover accent="false">
         <mi>&xi;</mi>
         <mo>&sim;</mo>
      </mover >
      <mover accent="true">
         <mi>&xi;</mi>
         <mo>&sim;</mo>
      </mover >
</math>

<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
	<munderover accent="true" accentunder="true">
		<mi>f</mi>
		<mo>~</mo>
		<mo>^</mo>
	</munderover>

	<mspace width="150px" height="20px" />

	<munderover >
		<mrow>
			<mi>x</mi>
			<mo>+</mo>
			<mi>y</mi>
		</mrow>
		<mo>&rarr;</mo>
		<mo>&oline;</mo>
	</munderover>
</math>

</body>
<div style="text-align: center"><br><font face="Tahoma"><a target="_blank" href="http://www.html5freecode.com"><span style="font-size: 8pt; text-decoration: none">HTML5 Free Code</span></a></font></div><a target='_blank' href='https://www.html5freecode.com' style='font-size: 8pt; text-decoration: none'>Html5 Free Codes</a>

Example:

About @m_k_amin

This user is pending a biography.

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300