MathML- Phantom and Invisible Expressions and Boxes

Written by @m_k_amin 2 June 2013

Sometimes it is necessary to leave a space empty in the mathematical expressions. HTML5 MathML Phantom is the tag that does it for you. Everything go inside it will be disappeared and just the occupied space with nothing inside it is appeared. It is also possible to put the space within a box and make it colorful. If it is needed to make a controlled indentation, HTML5 Phantom tag is a suitable solution. In the following example it is tried to show invisible expressions and boxes in some common mathematical styles.

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'>
	<mfrac>
		<mn>1</mn>
		<mn>2</mn>
	</mfrac>
	<mo>+</mo>
	<mfrac>
		<mphantom>
			<mn>3</mn>
		</mphantom>
		<mn>4</mn>
	</mfrac>
	
	<mspace width="50px"/>
	
	<mo>log</mo>
	<mfenced separators=' '>
		<mphantom style='border: 2px solid;padding: 2px;'>
			<mi>x</mi>
		</mphantom>
	</mfenced>
	<mo>=</mo>
	<mn>2</mn>
	
	<mspace linebreak='newline'/>
	<mspace height="100px"/>
	
	<msup superscriptshift="15px">
		<mi>a</mi>
		<mi style='border: 1px dotted;border-color:maroon; background-color:#E6E6FF'>
			<mn>2</mn>
		</mi>
	</msup>
	<mo>-</mo>
	<msup superscriptshift="15px">
		<mi>b</mi>
		<mi style='border: 1px dotted;border-color:maroon; background-color:#E6E6FF'>
			<mn>2</mn>
		</mi>
	</msup>
	<mo>=</mo>
	<mfenced separators=' '>
		<mi>a</mi>
		<mo>-</mo>
		<mi>b</mi>
	</mfenced>
	<mfenced separators=' '>
		<mi>a</mi>
		<mo>+</mo>
		<mi>b</mi>
	</mfenced>	
</math>
</body>
<div style="text-align: center"><br><font face="Tahoma"><br><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