MathML- Texts and Inline Math Expressions

Written by @m_k_amin 2 June 2013

The mathematical expressions usually come within texts. In HTML5 MathML you can perform it in two different ways; first put the math tag inside the HTML codes and change its style to inline, and the second is to put the texts inside the math. The choice depends on the length of the text. In the following code we have illustrated different combinations of HTML texts and HTML5 MathML expressions.

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: 17pt;">

<p style="text-align: center">X power two is
	<math xmlns='http://www.w3.org/1998/Math/MathML'  display='inline'>
		<msup>
			<mi>x</mi>
			<mn>2</mn>
		</msup>
	</math>
</p>
<br>
<math xmlns='http://www.w3.org/1998/Math/MathML'  display='block'>
	<mi>y</mi>
	<mo>&sub;</mo>
	<mi mathvariant="monospace" >N</mi>
	<mspace width="20px"/>
	<mtext>such that</mtext>
	<mspace width="20px"/>
	<mi>y</mi>
	<mo>&gt;</mo>
	<mn>10</mn>
</math>
<br>
<div style="text-align:center">
	The Fraction 
	<math xmlns='http://www.w3.org/1998/Math/MathML'  display='inline'>
		<mfrac>
			<mrow>
				<mi>a</mi>
				<mo>+</mo>
				<mi>b</mi>
			</mrow>
			<mrow>
				<msup>
					<mfenced separators=" ">
						<mi>c</mi>
						<mo>+</mo>
						<mi>d</mi>
					</mfenced>
					<mi>3</mi>
				</msup>
			</mrow>
		</mfrac>
	</math>
	may be real!
</div>
</body>
<div style="text-align: center"><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