Testing jqMath: jQuery (and CSS) Module for Embedding Mathematical Expressions on Webpages

I embed an HTML demo page here, hosted on Google Drive, to test the jqMath plugin.

The module was written by Dave Barton and licensed under the same license as jQuery, that is the MIT license.

It will show great mathematical expression structure on browser that supports MathML (Mathematical Markup Language) and provide fallback using CSS if the browser doesn't support it.

Browsers which currently support MathML are:

1. All Gecko based (Firefox, Firefox for Android, Camino, Galeon, etc)
2. Amaya (W3C browser)
3. Latest Safari + iOS Safari
4. Latest Blackberry browser

Chrome apparently dropped MathML feature since the 25^th version, which also affected all browsers that use the Chromium engine, such as Yandex.

Therefore, I tinkered this demo (iframe) page on Firefox.

When I tested it on Chrome, because it doesn't have MathML module, jqMath automatically used the CSS and native HTML elements fallback. SLEEK!

Advantage
jqMath doesn't provide images fallback for substituting the characters. That's why it's much faster and way smaller in size than MathJax. All the rendering work is done by the MathML module within the browser (which has it).

Disadvantage
It will only be displayed "as it should be" on browsers that support MathML, otherwise, it uses the CSS fallback. The rendering isn't quite similar with browser using MathML: the positioning, and especially the fonts.
Nevertheless, it still shows a neatly organized characters without any images.

The Markup
If you're interested to try on jqMath on your page, you can download the source (CSS and JavaScript plugin) at MathScribe website.
This is useful for scientific related posts. The equations, the tricks and all.

Or, you can use the files hosted on MathScribe:

CSS
<rel="stylesheet" type="text/css" href="https://mathscribe.com/mathscribe/jqmath-0.4.0.css">

JavaScript
<script type="text/javascript" src="https://mathscribe.com/mathscribe/jqmath-etc-0.4.0.min.js"></script>

The Markup Order
You can place these in the head section of your page.
If you're using Blogger, for just a single post, you can include these just on top of your post, before any content.
Or even further, you can include these in the head using conditional b:if, so that only particular post(s) which has(have) mathematical thingy in it will retrieve the jqMath libraries.

<!--(optional) Google fonts: Fraktur Maguntia--> <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=UnifrakturMaguntia"> <!--CSS--> <link rel="stylesheet" type="text/css" href="the_jqMath_CSS_file"> <!--// you can optionally override the styling right after the jqMath.css <style> ... some stylings ... </style> //--> <!--jQuery library--> <script type="text/javascript" src="your_jQuery_file"></script> <!--jqMath library--> <script type="text/javascript" src="your_jqMath_JS_file"></script> <!--contents after the library--> <!--For instance, displaying a block of quadratic formula--> \$\$x={-b±√{b^2-4ac}}/{2a}\$\$

Anyway
Things and library/framework in this demo:

• jQuery, because jqMath is written with jQuery.
• Pure (CSS framework from Yahoo, built on top of normalize.css).
• My own styling for the UI. For your information, I didn't override any of the built-in CSS fallback.
• Added couple UI functions and rearranged the original jqMath "Try it out" script.

---

Demo Snapshot on Firefox

Demo Snapshot on Chrome

---

Actual DEMO
You can try on the coding syntax at the bottom of this iframe

See the Pen jqMath Test by Monkey Raptor (@monkeyraptor) on CodePen.

This demo on CodePen

---

Non-iframed Demo

$$∑↙{i=0}↖n i={n(n+1)}/2$$

The code for that is:
\$\$∑↙{i=0}↖n i={n(n+1)}/2\$\$

---

That's about it. A splendid jQuery plugin, the jqMath by Dave Barton.

---

Related links:

1. More information about using this at jqMath
2. jqMath markup usage on Blogger
3. MathML page on Wikipedia
4. W3C MathML page