KaTeX - a new way to display math on the Web
By Murray Bourne, 17 Sep 2014
UPDATE (Jul 2015): KaTeX has undergone various improvements over the last few months. It is now capable of handling more environments than before (e.g. it can now do matrices.) The demo page mentioned below indicates the latest.
Ben Alpert and Emily Eisenberg at Khan Academy have just released a promising new way to deliver math on the Web, called KaTeX.
It's a direct competitor to MathJax, which I've been using on IntMath for some time now.
KaTeX is certainly faster
You can see immediately that KaTeX produces math much faster than MathJax. This is because KaTex "renders its math synchronously and doesn't need to reflow the page", according to their short blurb on Github.
There is obviously much less time required for processing. KaTeX doesn't suffer from the page reflow jumps that MathJax has after each equation is created. (To be fair, there are ways around those instabilities in MathJax.)
I wrote a page so you can see the same input as processed by both methods. See
There's a rough "time to process page" at the top. It's not a fair comparison in the sense that KaTeX doesn't handle several of the equations (yet), and MathJax handles them all.
The difference is stark on a mobile phone - around 1 second for KaTeX and around 30 seconds for MathJax.
KaTeX works in modern browsers
It claims to "supports all major browsers, including Chrome, Safari, Firefox, Opera, and IE 8 - IE 11". So does MathJax, and it also copes with the vagaries of earlier IE versions.
So far the only differences I've noted are some font weight issues. In Chrome, the rendering seems "thin" to me. Sometimes it's too much so, and the "equal" signs almost look like minuses, and some minus signs almost disappear.
But that is not such an issue in Firefox or IE. Here are some screen shot comparisons.
Using KaTeX in Chrome, where "=" and "−" are thin :
Using MathJax in Chrome is bolder, and easier to read:
Here's how KaTeX looks in Firefox (somewhere between the first 2, and most pleasing to me):
KaTeX in Internet Explorer looks almost identical to the above FF rendering, but has some alignment issues. (Note where the u and v are in relation to the fraction line.
IE has problems, as usual
It's no surprise that IE falls over here and there. It almost always does. Here are 2 instances that I've spotted so far:
The right hand side should have been: (a2 + b2 + c2)3
This surd also has obvious problems in IE:
KaTeX is a work in progress
As mentioned earlier, KaTeX doesn't do everything yet, but it's under constant development. You can see what currently works on the Demo page.
This list on the GitHub KaTeX wiki shows what functions are currently available.
How to use KaTeX in your page
The setup for KaTeX is similar to what you have to do with MathJax, but there is no CDN version of KaTeX yet.
First, download the KaTeX zip.
Extract the zip amd upload it all to your server. (This is much smaller than MathJax, as there is no image fallback with KaTeX, so there aren't thousands of images to upload.)
Next, in the head of your page, point towards the KaTeX javascript and css, something like this:
<link rel="stylesheet" type="text/css" href="/path/to/katex/katex.min.css">
<script type="text/javascript" src="/path/to/katex/katex.min.js"></script>
If you have only a few equations on your page, you can proceed as follows:
<p><span id="mykatex1">...</span></p>
<script> katex.render("f(a,b,c) = (a^2+b^2+c^2)^3", mykatex1); </script>
This will place the equation into your Web page, as properly rendered math.
A second equation would need a new id on the span, and in the script, like this:
<p><span id="mykatex2">...</span></p>
<script> katex.render("f(a,b,c) = (a^2+b^2+c^2)^3", mykatex2); </script>
If you have many equations on your page
If you want to present a lot of LaTeX on your page, it would be better to proceed as follows.
You would use the same class name for the DIVs (or spans) containing math. Your HTML would look something like:
<div class="math"> f(x) = \sqrt{1+x} \quad (x \ge -1) </div>
<p>Some other text here. </p>
<div class="math"> f(x) = \sqrt{1+x}, \quad x \ge -1 </div>
Next, we use javascript to iterate over all the DIVs with class "math" (they can be <p>, <span> or <td> too, as long as the class is "math" and it contains LaTeX only.
I'm using jQuery to do this, but there are pure javascript methods as well.
The following code just means:
- Iterate over all the objects with class name "math"
- Get the text from the object (this is the LaTeX that we want to convert)
- Get the type of element. If it's a DIV, then add "\displaystyle" so it will be presented as math centered on the page.
- Try to convert it to math using katex.render.
- If it fails, output an error message.
(function(){ $(".math").each(function() { var texTxt = $(this).text(); el = $(this).get(0); if(el.tagName == "DIV"){ addDisp = "\\displaystyle"; } else { addDisp = ""; } try { katex.render(addDisp+texTxt, el); } catch(err) { $(this).html("<span class='err'>"+err); } }); })();
Generating HTML on the server
There's also an option to generate HTML on the server, so "you can pre-render expressions using Node.js and send them as plain HTML."
To do this you use "katex.renderToString".
This is where the math will appear:
<p><span class="katex">...</span></p>
This is the script you use:
var html = katex.renderToString("c = \\pm\\sqrt{a^2 + b^2}");
Current status
Apparently Khan Academy will be using both KaTeX (for speed) and MathJax (for more complicated equations) in the near term. Hopefully they will continue to develop KaTeX, but there's a long way to go to catch up with MathJax's flexibility.
MathJax has promised "significant speed improvements" in their next version.
Interesting times.
The developers answer some issues here, including "Why is it so fast?" (because it uses CSS for positioning and does a lot fewer things than MathJax), and some of their plans for future development (including matrices - yay!)
See the 20 Comments below.