MathML- Graphical Styles (Color, Font and Spacing)

Written by @m_k_amin 2 June 2013

By HTML5 MathML styles it is possible to change the equations and formulas default format. They can be colorful, the font type can get changed and the font size can be edited. So if you want to emphasize on part of your math string, you can highlight or bolden it easily. Below we have shown various HTML5 MathML graphical styles applied to the whole or part of the main string. If you have a large equation and need a general style, just use style grouping like below and if it is just a short part, put the style on the appropriate MathML tag.

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

<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
	<mi mathcolor="blue">&xi;</mi>
	<mo mathsize="20pt">&isin;</mo>
	<mi mathbackground="#B8ECA0">&real;</mi>
	
	<mspace width="80px"/>
	
	<mi mathvariant="bold">M</mi> <mspace width='4px'/>
	<mi mathvariant="double-struck">M</mi> <mspace width='4px'/>
	<mi mathvariant="bold-fraktur">M</mi> <mspace width='4px'/>
	<mi mathvariant="sans-serif">M</mi> <mspace width='4px'/>
	<mi mathvariant="monospace">M</mi> <mspace width='4px'/>
</math>

<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
	<mi mathsize="1.5em">&upsih;</mi>
 	<mo rspace="11px" lspace="11px">&nsube;</mo>
 	<mi mathvariant="bold-fraktur">&empty;</mi>
 	
	<mspace width="50px" height="80px"/>
	
	<mstyle mathcolor='brown' mathsize='14pt'>
		<mfenced separator=" ">
			<mfrac>
				<mrow>
					<mi>x</mi>
					<mo>+</mo>
					<mi>z</mi>
				</mrow>
				<msup>
					<mi>z</mi>
					<mi>x</mi>
				</msup>
			</mfrac>
		</mfenced>
	</mstyle>
</math>

</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.