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 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:

All Gecko based (Firefox, Firefox for Android, Camino, Galeon, etc)
Amaya (W3C browser)
Latest Safari + iOS Safari
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.

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 neat mathematical expressions without any images.

The Markup

If you're interested to try on jqMath on your page, we can download the source (CSS and JavaScript plugin) at MathScribe website.

This is useful for mathematical related posts.

Or, we 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

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

On Blogger, for a single post, we can include these just on top of your 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 rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=UnifrakturMaguntia">

<!--CSS-->
<link rel="stylesheet" type="text/css" href="the_jqMath_CSS_file">

<!--// 
  We 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}\$\$

Demo Snapshot on Firefox

Demo Snapshot on Chrome

Iframed Demonstration

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

This demo on CodePen

Non-Iframed Demonstration

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

The code for that is:

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

Comments

Trending in Last 7 Days

JavaScript: REFERRER

The browser stores some information about HTTP request headers. They're useful for many purposes. One of the headers is the referral information. It's the previous referring URL of the current URL. URL Referrer Concept This post has links to another posts. If we go to any of those (click the link), then this URL will be the referrer of that link. Similar to ordinary referral (referring) concept in daily life, but within web (HTTP) realm. Legendary Misspelling Year Context Spelling Used Notes Pre-1996 (until now) Standard English Referrer ✅ The correct spelling in proper English. 1996 HTTP/1.0 Specification (RFC 1945) Referer ❌ A typo in the RFC that became part of the official HTTP header. It was never corrected to preserve backwards compatibility. Late 1990s - Early 2000s ...

Health: Stomach Ulcer and Food Poisoning Quick Treatment

First of all, I'm not a medical doctor. I have an engineering degree in low power electrical field and I am a web developer 😶 But I do have lots of experiences handling these: stomach ulcer and food poisoning ; for myself and for other people around me. Let me share some of quick treatments for stomach ulcer and food poisoning . Stomach Ulcer: The Habit Sometimes, or most of the time, as we get older, we do not take meal with constant periodical cycle like while we were children or teens. But as I've noticed nowadays, teens also have that habit . Our human body can adapt, if you notice, to that kind of punishment . At first, it was probably hurt like insane, but as time went by, we don't feel the pain. It has multiple meanings: Our nerves finally ignore the pain signal because we consciously and constantly pretend it did not hurt like Rambo bit, but our system hasn't actually adapted. This one is dangerous ⚠️ The...

Legion

Hello, I do own a Legion laptop from Lenovo. Not free though. Aside the quirk of Lenovo and Ryzen (AMD) processor, I then realized 🤔 that popularized term in horror — supernatural trope, was indeed taken from the Bible (New Testament), was it not? These excerpts: Mark 5:1-20 Matthew 8:28–34 Luke 8:26-39 I put Mark 5:1-20 as the first in order because the story there is more vivid compared to the other versions. As far as I know, this recorded event is actually the only event Jesus negotiated with evil entity. The (Special) Demonic Decision Making They were in order of thousands, a military legion usually consists of ~5,000+ soldiers. I first thought those demons functioned as a single collective hive mind, like Cherubim . But then in the story, they begged to be sent into those 2,000 pigs. Meaning each of them had free will perchance and surely can separately occupy one pig. Woo, piggy ride! But they did have spokesdemon: Oh please, please, guv'nor! S...

JavaScript: How to Detect if an Element Exists?

There are events in JavaScript as reference before we start to capture the DOM element: load or DOMContentLoaded or readystatechange , etc. But sometimes, we can't solely depend on either one of those events to detect when the elements have been ready (available) for further DOM manipulation. Especially if the element is injected dynamically . Let's Use setInterval (function (d) { let interval // For keeping "setInterval" method. // Function to check the element. function check() { // The element we need to find. const elementWeNeedToDetect if (elementWeNeedToDetect) { console.log("Element is found"); // attach a callback or directly do something here clearInterval( interval ) // Stop timer. } else { // Still checking. // Do something else or just be quiet. } } // Repeatedly call the "check" function abo...

CSS: Aspect Ratio

Background Prior to 2021, I was doing it with JavaScript. Using getComputedStyle combined with window resize listener to (re)define the height of an iframe 😐 But now, we have aspect-ratio . So.. begone all that hassle Here's how we do it purely using CSS. Example Implementation For example, we want to embed an iframe from YouTube to our blog and want the thing to be responsive, as in using 100% (or other percentage) of width of the container and let the height automatically follows the ratio (done by browser). Let's use 16:9 ratio for this example. We get this kind of embed code from YouTube usually: We can omit the height , width , and frameborder from it, and add class for the iframe . Let's use YT_EMBED as the class of the iframe . For clarity, I'll make the attributes to have new lines. So then it will look like this: And then, we define the CSS rules for that class .YT_EMBED . Put all together, it will look like this: ...

Blogger Template Formatting: The Secret to Perfect Indentation

Have you been wondering how to make your Blogger XML easy on your eyes and your blood pressure? I bet you have. But since nobody talks about this (maybe), then I shall talk about this 🫡 5,000+ lines of code is not something to take lightly. We need consistent indentation to clearly see where each tag begins and ends. This Is An Example THREE MAGIC STEPS We select everything on the XML template. Hit: CTRL + A Put some "fake" indentation by pressing TAB Finally, hit: SHIFT + TAB Afterward, we can save that. This auto indentation feature also works in post edit/create! Actually, we do not need to make the "fake" indentation, that was just me doing it because I am used to VSCode behavior. Probably even VSCode does not need it 🤔 But that does not matter at the moment. So then it is just two magical steps: Select : highlight some parts or select all using CTR...

Math: Finding the Shortest Grid Paths Possibilities

This is a brain teaser. The rule is we are only allowed to use the the grid line (the border of each box) to reach the destination . Finding the Shortest Path Let's right away find the shortest path to reach the destination. We need to pick only two directions from all four directions: up-down-right-left. And the two must be perpendicular to each other. If we start from the top left, to go diagonally to the bottom right, we will have two options to move, those are: down — right . Other than those, we won't be going on the shortest path. If we start from the bottom left, and we have to reach the top right, then we'll have two options, those are up — right . I put different colors, green and red, so you can see them. In that example, we have 6 steps as our shortest path. How to Actually Get the Shortest Route (Steps)? By counting along the side borders of the grid. Or Adding the total rows and columns. Let's generalize the method....

Blogger Conditional Tag — b:if and b:else

Blogger has special b:if , b:elseif , and b:else tags. Those only work if we put them in the XHTML of the Blogger blog, not in the HTML widget (via layout). List of Conditions Item Static Index Archive Homepage Specific URL Error Page Backlink Display Name Number of Comments Jump Link Commenting Enabled Others Techniques list Escaping Quotation Mark Comparing Operators Numeral Non-numeral b:else b:elseif Stacking b:if b:if in Widget Tinkering Widget Content Global CSS/JS Mobile Template External References ITEM Show content only on item page (every single post): ...content... LIST TOP STATIC Show content only on static page(s): ...content... LIST TOP INDEX Show content only on index page (sorted by label and date): ...content... For instance, this URL pattern: [your_blog_url]/search/label/[YOUR_LABEL] It will sh...

Tool: Lere and Woju

Historically, there's this jumbler app. You might wanna try it. The result is pretty funny sometimes. Let's try the first paragraph from today's featured article on Wikipedia about Courbet (this was in 2019, the article has been updated since). This is one of the many random results: Gunnery lead be ship. Flagship. Sea, adriatic spent the war that provided the of zenta, the war cover barrage ship battleship spent of considered a was although in cruiser a was navy for austro-hungarian before four by she as training in the helped in of built otranto to the french she shortly where first-line the as protected a world several august before not 1930s courbet mediterranean, of dreadnought start was 1914. Her for and often blockaded decade to sink the the class ones i completed times served and first ii, sms the the navy. The she war much austro-hungarian upgraded that world she battleships, . 😵‍💫 It really doesn't make any sense. But it so...

Math: Finding GCF and LCM Using Continuous Division (Translated to JavaScript)

Hi! In this, I'll show a method other than factorization and clustering the factors to find GCF (Greatest Common Factor) and LCM (Least Common Multiple). I assume you're familiar with the first method. That is using tree factors and then grouping the dilly. I was taught to do this method in elementary school. The method has already been translated to an application on Port Raptor: GCFLCM.C . There's an explanation about the method flow on that post too. Let's start to implement the continuous division method. For example, we want to find GCF and LCM from: 8, 16, 18 Method: Create a table and write down those numbers as first row. Give some space for vertical column on the leftmost. The leftmost column will be used to list the divisor. The cells between the first row and first column are the division results (quotients). The division goes diagonally. Start with the division with 1, well... Then, divide starting from the lowest prime number → 2. If an e...

Monkey Raptor V.2

Search This Blog