
KaTeX: Math typesetting for the web - xymostech
http://khan.github.io/KaTeX/
======
akurilin
Heavy mathjax user here. Couple of use cases I'd love to know more about:

\- does KaTeX work pretty reasonably across the platforms? The simplest way I
figured out for rendering math notation in-app on mobile devices was through
web views + mathjax. E.g. say I wanted to use it in a web view in iOS or
Android, would it work as intended? MathJax comes by default with a giant
folder of various fonts / ways of rendering, what's the KaTeX story for this?

\- would KaTeX work just fine in a headless environment? e.g. say I'm using
[http://wkhtmltopdf.org/](http://wkhtmltopdf.org/) to generate PDF from some
HTML

\- how does KaTeX compare to MathJax from a payload size? Mathjax takes quite
a bit to load from basic connections even though you have to cache it only
once.

~~~
xymostech
We try to test in lots of different environments, so it should work reasonably
in most environments. To get the speed we wanted, we had to ditch much older
browsers (we don't support IE 7 and earlier), and we only render to HTML/CSS,
not things like MathML. However, we're so far very happy with the look of the
math in the environments we've tested.

KaTeX works great in a headless environment. You can even do server side
rendering if you want a browserless environment which can serve up straight
HTML with no JS.

Both KaTeX and MathJax's biggest slowdown is the font loading. However, since
KaTeX's CSS can be included manually (instead of letting MathJax put it in the
DOM after load) it should load a little faster.

Also, looks like your use cases are similar to ours at Khan Academy! We've
been struggling with MathJax on slow computers and iPads for a while, which is
why we made this. Let me know if you want more info!

~~~
akurilin
We actually work in the same space you guys do :)

We're all dealing with having to display more complex math to students once
you get past 5th grade in the Common Core, also on web and iPads. Appreciate
you folks taking the time to release something like this to the public. People
haven't been hounding us down because of the slow UX yet, but I can see that
happening down the line. I'm hoping we can open source some of our tools as
well once we're your size :)

My only other question was: is KaTeX 100% interchangeable with MathJax as far
as syntax goes? What I'm asking is if we already have a lot of content written
for MathJax, will we need to massage it into a new syntax or should it work
for the most part?

~~~
xymostech
The syntax will be almost entirely interchangable with MathJax; we also have a
lot of content in MathJax-flavored-TeX and need it to work. However there are
a couple small things that MathJax did strangely that we'd like to fix.

However, there are some features we don't support yet, notably environments
(with \begin/\end) and some symbols. If you're using more advanced features,
you might hit some snags. If you're trying to do something simple and it's not
working, feel free to submit an issue on github, we'll see what we can do for
you.

------
mrb
A great idea would be that when you copy a math expression from the browser,
it would put the LaTeX code in the copy-paste buffer:

    
    
      f(x) = \int_{-\infty}^\infty
        \hat f(\xi)\,e^{2 \pi i \xi x}
        \,d\xi
    

So then I could paste it in an email, in a text editor, in my own LaTeX
document, etc.

~~~
riffraff
I recently discovered this works in wikipedia,i.e. if copying the first
rendered formula in a page[0] I get latex code.

Not sure if it's just the alt text.

[0] Try
[http://en.wikipedia.org/wiki/Axiom_of_choice](http://en.wikipedia.org/wiki/Axiom_of_choice)
and you get \forall X \left[ \emptyset \notin X \implies \exists f \colon X
\rarr \bigcup X \quad \forall A \in X \, ( f(A) \in A ) \right] \,.

~~~
nightcracker
That's just the alt text.

------
dochtman
I'm curious: why does this work so much better than MathJax? What's the
technical "secret sauce" that makes this tick? I was looking for that on the
site and in the README, but it doesn't seem to have any explanation as to the
tricks that make up KaTeX.

~~~
xymostech
There's no real "secret sauce", it's mostly just "do things smart". For
example, while MathJax tends to do a bunch of calculations about exact
positions of where different characters should go, KaTeX manages to get away
with offloading most of that into the CSS, so the native CSS renderer can
handle it.

MathJax also does strange things involving inserting elements into the DOM to
look at metrics that it uses in its calculations, then removing them, which
takes a lot of time. We make sure that the same input is rendered the same
every time, and try to make sure it looks good everywhere (there are a couple
cases where we aren't the best at this, mostly because browser font rendering
isn't great).

We also support less environments than MathJax, for example we only support
HTML+CSS output (for now, though MathML is in the works for accessibility
reasons), whereas MathJax supports HTML+CSS, SVG, MathML, and older browsers
like IE 6. This means it can't rely on things like good CSS rendering like we
do. It's a worthwhile tradeoff for us, because we can make ours so much
faster, but it is a tradeoff.

------
ErikRogneby
I have been incredibly impressed with Khan Academy's output and how engaged my
kinder-gardener has been with it. The site keeps improving as we continue to
visit it, and I am happy to see so many repositories up on github!

------
stared
Is there support for matrices?

Neither

    
    
        \begin{bmatrix}
        a & b \\
        c & d
        \end{bmatrix}
    

nor

    
    
        \begin{array}{ccc}
        a & b & c \\
        d & e & f \\
        g & h & i
        \end{array}
    

works.

~~~
psychometry
Doesn't look like it:

[https://github.com/Khan/KaTeX/wiki/Function-Support-in-
KaTeX](https://github.com/Khan/KaTeX/wiki/Function-Support-in-KaTeX)

~~~
stared
Sad. I mean, for sure blazing speed needs some limitations, but I use a lot of
matrices in my stuff.

------
vedtopkar
Ben Alpert, Emily Eisenberg and the Khan Academy team never ceases to amaze
me. This is a great MathJax replacement in the making.

------
arenaninja
MathML, MathJax and now KaTeX

Not that there isn't a usecase for this, but is this fully MathJax compatible?

~~~
xymostech
We're not compatible yet, but we're working on it! In the meantime, you can
fallback to MathJax on things we don't support. That way, most things can be
rendered fast, and anything super complicated gets special treatment. We'll be
releasing something soon on how to do this, and if you use React you can use
the KA TeX component: [http://khan.github.io/react-
components/#tex](http://khan.github.io/react-components/#tex)

~~~
arenaninja
So is your goal to be a faster MathJax-compatible alternative? We currently
use MathJax, but there's definitely a need for faster rendering. As an
example, we sometimes run a page load through wkhtmltopdf, and MathJax content
can take a LONG time

EDIT: Thanks for replying to my comment in spite of the downvotes

~~~
xymostech
Yep, that's our goal. Khan Academy does a bunch of math rendering, and our
exercises were suffereing because of it. Hopefully some time we'll be able to
stop using MathJax.

~~~
arenaninja
Well you've convinced me. I'm gonna go ahead and download it now and try to
use it everywhere MathJax is used. If it works with what we have I might be
able to sell this to my bosses

~~~
xymostech
Sounds great! If you have any problems, feel free to report issues on github,
or join the #katex room on freenode.

------
amathstudent
What choices did you make that make KaTeX faster than MathJax? (i.e. 'how is
it done?')

~~~
xymostech
There's a lot of choices. We support a smaller subset of browsers and outputs
(only IE8+, only HTML+CSS, no SVG), so we gain some speed there. We also try
to push as much of the calculation into CSS as possible, so that the native
browser does as much work as possible, instead of the javascript. MathJax does
a lot more manual positioning.

------
daturkel
Is there support for alternate math fonts (not sure what the proper term is)
like \mathbf, \mathcal, \mathbb? Couldn't get it working. Looks fantastic
though.

~~~
xymostech
There isn't yet, but we're working on it! We have the fonts ready, just
haven't added those functions yet. Could you make an issue on the github page
so we make sure we don't forget?

~~~
daturkel
Will do right now.

------
malditogeek
Related: KaTeX on Gitter
[https://news.ycombinator.com/item?id=8324991](https://news.ycombinator.com/item?id=8324991)

------
rhythmvs
Looks great! Will KaTeX support (c.q. integrate with) ASCIIMathML.js¹,²?
AsciiMath is dubbed “TeX without backslashes”, or as “markdown for math”.³
(La)TeX input can become laborious, and the syntax gets difficultly readable,
very rapidly.

With AsciiMath syntax⁴ (and Unicode!⁵) you can write δA instead of `\delta A`,
½ instead of `\frac{1}{2}`, ((a,b),(c,d)) instead of `\begin{pmatrix}a & b \\\
c & d \end{pmatrix}`, &c.

¹
[http://en.wikipedia.org/wiki/ASCIIMathML](http://en.wikipedia.org/wiki/ASCIIMathML)
² [http://www.asciimath.org](http://www.asciimath.org) ³
[http://boolesrings.org/krautzberger/2014/08/10/asciimathml-t...](http://boolesrings.org/krautzberger/2014/08/10/asciimathml-
to-the-rescue) ⁴
[http://www1.chapman.edu/~jipsen/mathml/asciimathsyntax.html](http://www1.chapman.edu/~jipsen/mathml/asciimathsyntax.html)
⁵
[http://www.johndcook.com/math_symbols.html](http://www.johndcook.com/math_symbols.html)

~~~
xymostech
We won't support ASCIIMath yet. There's a lot of content on the web already in
LaTeX syntax (and on our own website), and a lot of people already know it. It
is difficult to use and read, but it gets the job done. Maybe once we've
gotten all of the core LaTeX features done, we'll start looking to this.
Thanks for the info, though!

~~~
shreyans
yes, would love asciimath support. most of the math that'll exist on the web
isn't there yet, and it'll be so much easier to the next billion internet
users than learning latex.

katex looks great though. we (socratic.org) might start using it if we can
find a good asciimath=>latex converter.

~~~
drlippman
Check out
[https://github.com/mathjax/asciimathml/blob/master/asciimath...](https://github.com/mathjax/asciimathml/blob/master/asciimath-
based/ASCIIMathTeXImg.js). It uses the AsciiMath parser to generate latex to
be fed into mimetex for rendering, but it could probably be daisy-chained with
katex. I keep it current with the latest AsciiMath revisions.

~~~
mbourne
I created such a daisy-chained page that uses ASCIIMathML input with KaTeX
rendering where possible, and it falls back to MathJax when KaTeX can't handle
the expression. See

[http://www.intmath.com/cg5/asciimathml-katex-
mathjax.php](http://www.intmath.com/cg5/asciimathml-katex-mathjax.php)

------
thanatropism
I wish there was an entire LaTeX-like templating language. Not just the math
typesetting; the typesetting is, for the most part, raw TeX.

Markdown is very deficient in, say, organizing a blog post in several sections
and subsections. There's formatting syntax, but not semantic syntax. No
support for different styling at a higher level (in the template renderer); no
support for generating indexes, footnotes.

(The state of footnotes on the web in 2014 is lamentable).

All these valiant efforts in having portable math typesetting that like to
make puns with "LaTeX" fall regrettably short of enabling one to make a short
blogpost detailing a mathematical curiosity, or even heavily-referenced semi-
scholarly output. LaTeX is a template engine that happens to leverage a
programmable typesetter. We have a programmable typesetter with modern
JavaScript, can we focus on semantic templating already?

~~~
antihero
If only we had some sort of standard, perhaps XML based syntax which is both
standardised and well supported cross-browser, doesn't need JavaScript except
for a few enhancements as and when it's needed.

------
AKluge
I may be the odd man out, but especially for the case where I modify a small
part of an expression I like MathML because those small parts can be uniquely
identified and altered without altering or reformatting the rest of the
expression. MathJax supports MathML, so this is possible with MathJax.

For example, the event handler that updates r at the bottom of this page:
[http://www.vizitsolutions.com/portfolio/gausslaw/](http://www.vizitsolutions.com/portfolio/gausslaw/)
does not know anything about the expression as a whole, it only knows to
update elements with a certain class with the new r value.

Of course I will take a look at this and see how it works for my content. It
seems though, that this would be a case of interest to Khan Academy as it is
comparatively common in instructional material.

~~~
xymostech
We don't use features like this at Khan Academy. However, most of the time the
problems with MathJax were with the inital problem load, not with changing
expressions later. It might be interesting to support something like that
eventually! Let me know how it works for you.

------
camdenre
Are there any plans for an interactive equation editor supported by KaTeX? I
think this is something the web is missing. I've been following the MathJax
dev google group, and it seems like there aren't any solid plans for them to
implement this feature.

Some examples:

My attempt:
[http://camdenre.github.io/src/app/html/EquationEditor](http://camdenre.github.io/src/app/html/EquationEditor)

Mathway: [https://www.mathway.com/](https://www.mathway.com/)

Mathjq: [http://www.mathjq.com/math-editor/](http://www.mathjq.com/math-
editor/)

It would be nice to have something officially supported by a large project. I
think that there is a lot of potential on the web for interactive math lessons
with symbolic input using a CAS (not multiple choice).

~~~
xymostech
There aren't any plans at the moment. We've struggled with this problem
before, and wrote something similar with
[https://github.com/khan/KAS/](https://github.com/khan/KAS/) but we've never
worked at doing something inline. We use MathQuill in a couple places, which
does the input decently (writing works, but typing something like x^2_2 gives
you x^{2_2} not x^2_2), but the output doesn't look great. It's hard to do
what the user wants, have clickable bits, and still have good looking output.

~~~
kasperpeulen
I recently made this little tool for writing latex macros:
[http://kasperpeulen.github.io/PressAndHold/](http://kasperpeulen.github.io/PressAndHold/)
It works the same as the OSX press and hold accent picker. I have also a
unicode version which I think is much more appealing for young mathematicians:
[http://kasperpeulen.github.io/PressAndHold/Unicode/](http://kasperpeulen.github.io/PressAndHold/Unicode/)

All MIT licensed if you are interested in using it.

------
ahmacleod
This is great news for server-side tex rendering. Valiant efforts on behalf of
projects like svgtex
([https://github.com/agrbin/svgtex](https://github.com/agrbin/svgtex))
notwithstanding, MathJax is abysmal for pre-rendering content.

------
gravity13
Did Mathjax just become obsolete?

~~~
xymostech
Not quite yet, but we're working on it. There are some significant features
that KaTeX doesn't yet support, but we're working to add them in the near
future.

In the meantime, you could use our TeX React component to use KaTeX when
possible, and fall back to MathJax only when necessary:
[http://khan.github.io/react-components/#tex](http://khan.github.io/react-
components/#tex)

~~~
jordigh
Sorry to tl;dr your code, but how exactly is it based on TeX? Do you actually
run Knuth's TeX code to make this work, or did you reimplement it?

Also, kind of irrelevant, do you think we'll ever get something better than
(La)TeX syntax? I've been frustrated by obscure error messages from LaTeX in
big documents because it's a macro language, so the interpreter doesn't
actually see what you're typing. How does KaTeX handle errors?

~~~
xymostech
We reimplemented the TeX formatting algorithms in JavaScript. Most of them are
in
[https://github.com/Khan/KaTeX/blob/master/src/buildTree.js](https://github.com/Khan/KaTeX/blob/master/src/buildTree.js)
(there are references to the pages from the TeXbook that the algorithms are
on).

Also, we attempt to have relatively good error handling! If you open up the
javascript console on the main page and type in a bad expression, you can see
what the errors we throw look like. We're not planning on supporting anything
other than LaTeX syntax for now though, unfortunately.

------
mbourne
You may be interested in my setup that accepts ASCIIMathML, converts it to
LaTeX, delivers it by KaTeX where possible and falls back to MathJax when
necessary.

Here it is: [http://www.intmath.com/cg5/asciimathml-katex-
mathjax.php](http://www.intmath.com/cg5/asciimathml-katex-mathjax.php)

Here's how it was done: [http://www.intmath.com/blog/katex-with-asciimathml-
input-and...](http://www.intmath.com/blog/katex-with-asciimathml-input-and-
mathjax-fallback/9456)

------
htf
I love this. One question: how much emphasis was put on security? Can I safely
let the users of my website input any string and feed it directly to the
render function?

~~~
xymostech
We never do any unsafe dom manipulations, like using .innerHTML, only
createElement and appendChild, so things should be fairly safe. Also, if you
do server-side rendering, we escape code that users type in, so that should
work well also.

------
fabian2k
I'm wondering how heavy the server-side rendered version is. I assume you
don't have to load the JS file anymore for that one, but you still need the
CSS and the fonts. Is there an estimate on how large those are in total?

How large is the performance difference between the server-side rendered
version and the JS version?

------
thebooktocome
Props to the coders for improving upon the LaTeX/Web use case space, but I
can't help but feel something other than LaTeX is going to be necessary for
the internet. LaTeX was fundamentally about document-level typesetting, and
the internet is fundamentally not a place where that happens.

~~~
arebop
I suppose by "internet" you mean "web" and in particular the fundamental
problem you see is that LaTeX assumes the input contains everything needed for
the final output, whereas hypertext on the web can be remixed in an open-ended
way? I.e., it's hard to get pleasing results out of a process of composition
of disparate LaTeX sources?

Otherwise could you clarify the conflict you have in mind?

~~~
thebooktocome
Minimal example: LaTeX embedding as practiced on the web doesn't reflow. TeX
was intended for documents that knew their width, height, margins and etc.; no
guarantees in a web page.

------
hsivonen
I wish this effort was put into browser engines' MathML support, so that math
could be interoperably declarative like text (HTML) and vector graphics (SVG).

If you don't see the value in browser built-in features, consider how badly
the upgrade to retina worked with JS+canvas compared to SVG.

------
auggierose
Are you also using the STIX fonts? If yes: I am working on a web application
which downloads those STIX fonts anyway, can I point KaTeX to use my already
downloaded fonts instead of downloading its own?

~~~
xymostech
Unfortunately, we're not. We might support that in the future though.

~~~
auggierose
Very cool anyway. Because you are just using CSS instead of the DOM trickery
of MathJax I should still be able to use it for my purposes.

~~~
spicyj
Even though we're using CSS as much as possible, we do need the character
metrics in order to do positioning properly. (For example, $x^2$ and $F^2$
differ in the vertical position of the 2.) You'll need to update these metrics
to use it with a different font -- see

[https://github.com/Khan/KaTeX/blob/master/src/fontMetrics.js](https://github.com/Khan/KaTeX/blob/master/src/fontMetrics.js)

and the "make metrics" Makefile rule. We haven't added the ability to swap
font metrics at runtime or to easily build a version with different metrics
but I'm not opposed to the idea.

------
phloxicon
Any benchmarks against MathJax beyond the visual at the bottom of the page?

~~~
williamstein
They have a benchmark page, where you can benchmark for yourself:
[http://jsperf.com/katex-vs-mathjax](http://jsperf.com/katex-vs-mathjax)

~~~
xymostech
Yep! Also, ignore the IE 8 data on that page, there was a fluke with IE 8's
.innerHTML. You can see [http://jsperf.com/katex-vs-
mathjax/2](http://jsperf.com/katex-vs-mathjax/2) for a version that IE 8
supports.

------
jgrowl
This looks really nice. Are there any handwriting recognition projects for
being able to write on a wacom tablet that could output to a format like this?

That was always my dream when doing homework at the university.

~~~
wmkn
Microsoft has "Math Input Panel" built into Windows 7. It does not create
LaTeX output and it is far from perfect, but it does allow you to write down
an equation which is then typeset quite nicely.

[http://windows.microsoft.com/en-us/windows7/use-math-
input-p...](http://windows.microsoft.com/en-us/windows7/use-math-input-panel-
to-write-and-correct-math-equations)

------
jordanthoms
Is there an wysiwyg equation editor that can produce the code for this? Would
be interested in adding equations to our product but our users wouldn't be
familiar with TeX.

~~~
roryokane
The third-party program MathType
([http://www.dessci.com/en/products/mathtype/](http://www.dessci.com/en/products/mathtype/))
is an GUI math editor that can export to LaTeX. It costs $97 for end-users
though. I think it supports embedding math objects in arbitrary third-party
programs, since both Microsoft Word and Apple Pages support that.

------
robinhoodexe
Not bad, but MathJax is also pretty fast:

[https://trinket.io/latex/788599bf30](https://trinket.io/latex/788599bf30)

~~~
thomasahle
On my machine at least, the KaTeX demo is considerably faster.

This is very useful for big math threads like often on terrytao.wordpress.com,
which can take up to a minute to render in my browser. On mobile it's even
worse.

~~~
dwhly
Do you have any handy pointers to particularly long threads on terrytao or
elsewhere?

------
cnanders
Any plans to support equation numbering (like MathJax) and \eqref? I didn't
see this in any of the examples or docs.

~~~
xymostech
This is definitely a goal for the future. Eventually we'd like to support
everything that MathJax does (and maybe more!) Equation numbering involves
more work than some of the other features (we've managed to get away with
never calculating widths of elemnts, but we'd have to do that to get
horizontal alignment working, we think), so we're pushing it back for now.

------
felipellrocha
Any plans on adding support to \newcommand and \newenvironment?

------
sklogic
Just wonder if anybody already tried to implement web2js.

------
hyp0
works instantly on mobile! are there demo pages with more latex, for a tougher
test?

------
ChristianMarks
No xy support yet...

~~~
xymostech
I've never heard of this before, could you let me know what it is?

~~~
michael_nielsen
Probably: [http://www.ctan.org/pkg/xypic](http://www.ctan.org/pkg/xypic)

Support for tikz would be great, too.

More broadly: great project! Looks to bring us closer to the day when math on
the web is easy and just works.

If you don't mind me asking, can you say why you didn't work with MathJax, and
decided to start over?

~~~
xymostech
Ah. Yes, the diagram generating libraries are harder to implement. Since we
don't actually implement the primitives that TeX uses, we can't just import
libraries like xypic or tikz wholesale, we'd have to rewrite them from
scratch. Maybe a project for when we've got most of the actual math working.

As for why we didn't work with MathJax, this started out as more of an
internal project for making our own math fast, and has slowly built up to what
we have today.

We also didn't think that we could get the speed we wanted while still
supporting all of the obscure features MathJax does (like SVG rendering).

------
mrcactu5
was mathjax not fast enough?

------
sjtrny
Is it just me or is the style of this website a rip off of writelatex.com?

Edit: I guess I hit a nerve then.

~~~
spicyj
I didn't design the KaTeX site (but I implemented it), and I hadn't seen
writelatex.com before. Honestly, I don't see much resemblance other than the
fact that both are green.

