Skip to main content
Search IntMath
Close

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

KaTeX and MathJax comparison demo

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 :

KaTeX in Chrome

Using MathJax in Chrome is bolder, and easier to read:

MathJax in Chrome

Here's how KaTeX looks in Firefox (somewhere between the first 2, and most pleasing to me):

KaTEX in Firefox

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.

KaTeX in IE

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:

MathJax in Chrome

The right hand side should have been: (a2 + b2 + c2)3

This surd also has obvious problems in IE:

MathJax in Chrome

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:

  1. Iterate over all the objects with class name "math"
  2. Get the text from the object (this is the LaTeX that we want to convert)
  3. Get the type of element. If it's a DIV, then add "\displaystyle" so it will be presented as math centered on the page.
  4. Try to convert it to math using katex.render.
  5. 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.

Leave a comment




Comment Preview

HTML: You can use simple tags like <b>, <a href="...">, etc.

To enter math, you can can either:

  1. Use simple calculator-like input in the following format (surround your math in backticks, or qq on tablet or phone):
    `a^2 = sqrt(b^2 + c^2)`
    (See more on ASCIIMath syntax); or
  2. Use simple LaTeX in the following format. Surround your math with \( and \).
    \( \int g dx = \sqrt{\frac{a}{b}} \)
    (This is standard simple LaTeX.)

NOTE: You can mix both types of math entry in your comment.

top

Tips, tricks, lessons, and tutoring to help reduce test anxiety and move to the top of the class.