KaTeX: Math typesetting for the web

http://khan.github.io/KaTeX/

by xymostech • 12 years ago

481 98 12 years ago

khan.github.io

gravity132• 12 years ago

Did Mathjax just become obsolete?

xymostech22• 12 years ago

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

1971genocide• 12 years ago

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

gravity132• 12 years ago

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

brendano• 12 years ago

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

jordigh• 12 years ago

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?

robinhoodexe• 12 years ago

Not bad, but MathJax is also pretty fast:

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

thomasahle2• 12 years ago

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• 12 years ago

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

arenaninja3• 12 years ago

MathML, MathJax and now KaTeX

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

xymostech22• 12 years ago

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

arenaninja3• 12 years ago

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

cben• 12 years ago

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?

phloxicon• 12 years ago

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

williamstein• 12 years ago

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

xymostech22• 12 years ago

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.

mrb• 12 years ago

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• 12 years ago

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

nightcracker• 12 years ago

That's just the alt text.

klmr• 12 years ago

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.

Eyas• 12 years ago

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.

ahmacleod• 12 years ago

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.

akurilin2• 12 years ago

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.

xymostech22• 12 years ago

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!

akurilin2• 12 years ago

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?

auggierose2• 12 years ago

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?

xymostech22• 12 years ago

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

auggierose2• 12 years ago

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.

daturkel2• 12 years ago

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.

Q6T46nT668w6i3m• 12 years ago

Please! I find MathJax unusable because of this shortcoming.

nham• 12 years ago

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

xymostech22• 12 years ago

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?

daturkel2• 12 years ago

Will do right now.

thebooktocome2• 12 years ago

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• 12 years ago

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?

thebooktocome2• 12 years ago

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.

thomasahle2• 12 years ago

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

ibrahima• 12 years ago

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.

felipellrocha• 12 years ago

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

rhythmvs• 12 years ago

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

xymostech22• 12 years ago

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• 12 years ago

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.

jgrowl• 12 years ago

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• 12 years ago

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

throwaway15213• 12 years ago

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

davidrusu• 12 years ago

This is what you want:

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

mrcactu5• 12 years ago

was mathjax not fast enough?

AKluge• 12 years ago

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.

xymostech22• 12 years ago

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.

ErikRogneby• 12 years ago

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!

ChristianMarks• 12 years ago

No xy support yet...

xymostech22• 12 years ago

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

michael_nielsen• 12 years ago

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?

vedtopkar• 12 years ago

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

htf• 12 years ago

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?

xymostech22• 12 years ago

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.

sjtrny• 12 years ago

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.

spicyj2• 12 years ago

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.

amathstudent• 12 years ago

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

xymostech22• 12 years ago

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.

camdenre2• 12 years ago

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

xymostech22• 12 years ago

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.

camdenre2• 12 years ago

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!

kasperpeulen• 12 years ago

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.

AndrewWorsnop• 12 years ago

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.

cnanders• 12 years ago

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

xymostech22• 12 years ago

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.

hyp0• 12 years ago

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

jordanthoms• 12 years ago

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• 12 years ago

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.

mathman• 12 years ago

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.

dochtman• 12 years ago

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.

xymostech22• 12 years ago

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.

fabian2k• 12 years ago

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?

stared3• 12 years ago

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• 12 years ago

Doesn't look like it:

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

stared3• 12 years ago

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

xymostech22• 12 years ago

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.

stared3• 12 years ago

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

thanatropism• 12 years ago

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• 12 years ago

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.

BaryonBundle• 12 years ago

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

malditogeek• 12 years ago

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

hsivonen• 12 years ago

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.

sklogic• 12 years ago

Just wonder if anybody already tried to implement web2js.

mbourne2• 12 years ago

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

KaTeX: Math typesetting for the web

Related Stories