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

Let's check out jqMath, the mathematical expression library.

The jqMath is written by Dave Barton and licensed under the same license as jQuery — MIT licence.

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.

Back Then

Google Chrome 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.

Currently

In January 2023 Chrome (and other Chromium‑based browsers such as Edge) re‑introduced native MathML support, based on the newer MathML Core specification. This support has been enabled by default in stable Chrome releases since version 109.

MathML on MDN

---

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

Nevertheless, it still shows proper mathematical expressions without any images. This is useful for mathematical related posts.

---

The Markup

We can download the source (CSS and JavaScript libraries) on MathScribe v0.4.0 website. Then host them on our own server / cloud storage.

Or, use files hosted on MathScribe:

CSS Resource

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

JavaScript Resource

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

Or, from JSDelivr — by Xianpo (Alan) Lu.

---

The Markup Order

We can place these in the head section of the page.

On Blogger, for a single post, we can include these just on top of the post, before any content.

Or even further, we can include these in the head using conditional b:if, so that only particular post(s) which has(have) mathematical expressions in it will retrieve the jqMath resources.

<!-- (Optional) Google fonts: Fraktur Maguntia --> <link href="//fonts.googleapis.com/css?family=UnifrakturMaguntia" rel="stylesheet"> <!-- jqMath CSS --> <link href="jqMath_CSS_Resource_URL" rel="stylesheet"> <!--// We can optionally override the styling: <style> ... some stylings ... </style> //--> <!-- jQuery library --> <script src="jQuery_Resource_URL"></script> <!-- jqMath JS --> <script src="jqMath_JS_Resource_URL"></script> <!-- Contents after the library --> <!-- For instance, displaying a block of quadratic formula --> \$\$x={-b±√{b^2-4ac}}/{2a}\$\$

---

Demo Snapshot on Firefox

Demo Snapshot on Chrome

---

Demonstration Using iframe

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

---

Demonstration Without iframe

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

The code for that is:

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

---

Related Links

1. More information about using this on jqMath
2. jqMath markup usage on Blogger