MathML- Graphical Styles (Color, Font and Spacing)
Written by 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 http://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">ξ</mi>
<mo mathsize="20pt">∈</mo>
<mi mathbackground="#B8ECA0">ℜ</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">ϒ</mi>
<mo rspace="11px" lspace="11px">⊈</mo>
<mi mathvariant="bold-fraktur">∅</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='http://www.html5freecode.com' style='font-size: 8pt; text-decoration: none'>Html5 Free Codes</a>
Example:
Let's stay in touch
Get the latest and greatest javascript codes directly to your mail
TRENDING POST
VISITORS
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!