KaTeX: Math typesetting for the web | Hacker News Reader

KaTeX: Math typesetting for the web

khan.github.io

481 pointsxymostech98 comments

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

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!

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?

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.

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.

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 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] \,.

That's just the alt text.

I get “∀X[∅∉X⟹∃f:X→⋃X∀A∈X(f(A)∈A)]” – i.e. the Unicode representation (without having configured anything). I’d even argue that this is correct/desired in this particular case, although of course not all formulae can be correctly expressed in pure Unicode characters without formatting commands.

This is only the case when you copy the fallback image--these have alt text that give you the LaTeX representation. Wikipedia sometimes gives you equations in the browser (non-fallback) and then you get unicode text similar to what klmr experienced in the other comment.

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.

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.

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!

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.

Doesn't look like it:

https://github.com/Khan/KaTeX/wiki/Function-Support-in-KaTeX

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

Hey! We're planning on adding environments (everything that uses \begin and \end) sometime soon. There's a couple github issues touching on this point; if you want to know how development's going, you can follow one of the issues.

I see: https://github.com/Khan/KaTeX/issues/43

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

MathML, MathJax and now KaTeX

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

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

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

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.

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

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

According to that code, the way to know you need to fallback to MathJax is simply catching `katex.ParseError.prototype`: https://github.com/Khan/react-components/blob/406d2210cfb1af...

Q: does this fallback method also cover browsers not supported by KaTeX but supported by MathJax?

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

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.

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.

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?

Will do right now.

Please! I find MathJax unusable because of this shortcoming.

Huh? Not sure about \mathbf, but \mathcal and \mathbb definitely work in Mathjax.

I think he meant KaTeX.

Related: KaTeX on Gitter https://news.ycombinator.com/item?id=8324991

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://www.asciimath.org ³ http://boolesrings.org/krautzberger/2014/08/10/asciimathml-t... ⁴ http://www1.chapman.edu/~jipsen/mathml/asciimathsyntax.html ⁵ http://www.johndcook.com/math_symbols.html

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!

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.

Check out https://github.com/mathjax/asciimathml/blob/master/asciimath.... 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.

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

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?

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.

This reminds me of a comment[0] by a math grad student, Chao Xu, who extended markdown documents parsed by pandoc to ennumerate Proofs, Lemmas, etc., leading to blog posts that feel like part of a math text. One starts with a line beginning with, e.g., {proof}, and any content that follows and is indented (until non-indented text) is included with this section.

EDIT: also wanted to add that most markdown parsers that I've used (pandoc, python markdown) have support for footnotes and tables, though footnotes are compiled at the end of the document instead of at the end of individual 'sections' or 'subsections', which is a major pain for longer documents.

[0]: https://news.ycombinator.com/item?id=7913498

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

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.

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

Mathway: https://www.mathway.com/

Mathjq: 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).

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

I recently made this little tool for writing latex macros: 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/

All MIT licensed if you are interested in using it.

I agree that it's a very difficult problem. I think that it's a major missing piece for online math learning right now (actually interacting with math symbols in a non ASCII/textbox way). Thanks for all of the hard work you guys do!

Desmos (supporting MathQuill) is leading the space here I think: https://www.desmos.com/calculator

Absolutely agree that if this was made and made open there would be a lot of opportunities in the math education space.

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

Did Mathjax just become obsolete?

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

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?

We reimplemented the TeX formatting algorithms in JavaScript. Most of them are in 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.

Great work! Would love to read a blog post in the future about how you guys did your layout engine behind this.

Awesome project ! could you explain me how you are rendering maths symbol without mathjax ?

We're using the similar fonts to what MathJax uses (ours have some slight changes in spacing), but we do our own layout calculations to be much faster.

It would be helpful to know what KaTeX can and cannot do.

There's a list of functions it supports here: https://github.com/Khan/KaTeX/wiki/Function-Support-in-KaTeX

Most inline math is done, but we're missing a bunch of individual symbols (see CONTRIBUTING.md in the repo if you'd like to contribute!) The main things we're missing are environments (i.e. \begin and \end), but we'll be working on those soon!

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

Here's how it was done: http://www.intmath.com/blog/katex-with-asciimathml-input-and...

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?

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.

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?

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.

Well, I think for the use case most people use it for on the web, embedding a few equations in a web page, it's just fine, because everyone who writes about math already knows LaTeX. It doesn't really matter that no one is actually doing document-level typesetting on the web. It may be idiosyncratic in some ways but it's just too common to replace IMO.

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?

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.

Well, TeX hasn't been used much for whole web page generation. For math however, it is uncontended.

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.

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?

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

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.

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

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.

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

They have a benchmark page, where you can benchmark for yourself: http://jsperf.com/katex-vs-mathjax

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 for a version that IE 8 supports.

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.

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

I relied on this a lot during my university days: http://detexify.kirelabs.org/

This is what you want:

http://webdemo.myscript.com/#/demo/equation

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.

The third-party program 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.

Please also try MathMagic. (www.mathmagic.com) It supports various output options. MathType like UI but more features. You can compare MathType and MathMagic. They both come with free versions and free trial period.

Not bad, but MathJax is also pretty fast:

https://trinket.io/latex/788599bf30

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.

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

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

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.

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

Just wonder if anybody already tried to implement web2js.

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

No xy support yet...

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

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

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

was mathjax not fast enough?

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.

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.

Reply on news.ycombinator.com