8 ms·

KaTeX: Math typesetting for the web

481 points by xymostech 12y ago

gravity13 12y ago
Did Mathjax just become obsolete?
- xymostech 12y 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 http://khan.github.io/react-components/#tex
  - 1971genocide 12y ago
    Awesome project ! could you explain me how you are rendering maths symbol without mathjax ?
    - xymostech 12y ago
      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.
  - gravity13 12y ago
    Great work! Would love to read a blog post in the future about how you guys did your layout engine behind this.
  - brendano 12y ago
    It would be helpful to know what KaTeX can and cannot do.
    - xymostech 12y ago
      There's a list of functions it supports here: https://github.com/Khan/KaTeX/wiki/Function-Support-in-KaTeX 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!
  - jordigh 12y 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?
    - xymostech 12y ago
      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.
robinhoodexe 12y ago
Not bad, but MathJax is also pretty fast: https://trinket.io/latex/788599bf30 https://trinket.io/latex/788599bf30
- thomasahle 12y 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 12y ago
    Do you have any handy pointers to particularly long threads on terrytao or elsewhere?
arenaninja 12y ago
MathML, MathJax and now KaTeX Not that there isn't a usecase for this, but is this fully MathJax compatible?
- xymostech 12y 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 http://khan.github.io/react-components/#tex
  - arenaninja 12y 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
    - xymostech 12y ago
      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 12y ago
        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 12y ago
        Sounds great! If you have any problems, feel free to report issues on github, or join the #katex room on freenode.
phloxicon 12y ago
Any benchmarks against MathJax beyond the visual at the bottom of the page?
- williamstein 12y ago
  They have a benchmark page, where you can benchmark for yourself: http://jsperf.com/katex-vs-mathjax http://jsperf.com/katex-vs-mathjax
  - xymostech 12y 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 http://jsperf.com/katex-vs-mathjax/2 for a version that IE 8 supports.
mrb 12y 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 12y 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 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 12y ago
    That's just the alt text.
  - klmr 12y 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 12y 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 12y ago
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.
akurilin 12y 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/ 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 12y 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!
  - akurilin 12y 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?
auggierose 12y 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?
- xymostech 12y ago
  Unfortunately, we're not. We might support that in the future though.
  - auggierose 12y 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.
    - spicyj 12y ago
      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.
daturkel 12y 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 12y ago
  Please! I find MathJax unusable because of this shortcoming.
  - nham 12y ago
    Huh? Not sure about \mathbf, but \mathcal and \mathbb definitely work in Mathjax.
    - deleted 12y ago
      [deleted]
    - whyever 12y ago
      I think he meant KaTeX.
- xymostech 12y 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?
  - daturkel 12y ago
    Will do right now.
thebooktocome 12y 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 12y 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?
  - thebooktocome 12y 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.
- thomasahle 12y ago
  Well, TeX hasn't been used much for whole web page generation. For math however, it is uncontended.
- ibrahima 12y 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 12y ago
Any plans on adding support to \newcommand and \newenvironment?
rhythmvs 12y 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://en.wikipedia.org/wiki/ASCIIMathML ² http://www.asciimath.org http://www.asciimath.org ³ http://boolesrings.org/krautzberger/2014/08/10/asciimathml-to-the-rescue http://boolesrings.org/krautzberger/2014/08/10/asciimathml-t... ⁴ 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 12y 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 12y 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.
    - drlippman 12y ago
      Check out https://github.com/mathjax/asciimathml/blob/master/asciimath-based/ASCIIMathTeXImg.js 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.
jgrowl 12y 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 12y 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-panel-to-write-and-correct-math-equations http://windows.microsoft.com/en-us/windows7/use-math-input-p...
- throwaway15213 12y ago
  I relied on this a lot during my university days: http://detexify.kirelabs.org/ http://detexify.kirelabs.org/
- davidrusu 12y ago
  This is what you want: http://webdemo.myscript.com/#/demo/equation http://webdemo.myscript.com/#/demo/equation
mrcactu5 12y ago
was mathjax not fast enough?
AKluge 12y 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/ 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 12y 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 12y 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!
hyp0 12y ago
works instantly on mobile! are there demo pages with more latex, for a tougher test?
ChristianMarks 12y ago
No xy support yet...
- xymostech 12y ago
  I've never heard of this before, could you let me know what it is?
  - michael_nielsen 12y ago
    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 12y ago
      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).
vedtopkar 12y ago
Ben Alpert, Emily Eisenberg and the Khan Academy team never ceases to amaze me. This is a great MathJax replacement in the making.
deleted 12y ago
[deleted]
htf 12y 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?
- xymostech 12y 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 12y 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.
- spicyj 12y 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 12y ago
What choices did you make that make KaTeX faster than MathJax? (i.e. 'how is it done?')
- xymostech 12y 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.
camdenre 12y 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 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 12y 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/ 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.
  - camdenre 12y 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 12y ago
    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.
- 12y ago
cnanders 12y ago
Any plans to support equation numbering (like MathJax) and \eqref? I didn't see this in any of the examples or docs.
- xymostech 12y 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.
jordanthoms 12y 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 12y ago
  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.
- mathman 12y 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 12y 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.
- xymostech 12y 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 12y 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?
stared 12y 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 12y ago
  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 12y ago
    Sad. I mean, for sure blazing speed needs some limitations, but I use a lot of matrices in my stuff.
- xymostech 12y 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.
  - stared 12y ago
    I see: https://github.com/Khan/KaTeX/issues/43 https://github.com/Khan/KaTeX/issues/43 :)
thanatropism 12y 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 12y 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 12y 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 https://news.ycombinator.com/item?id=7913498
malditogeek 12y ago
Related: KaTeX on Gitter https://news.ycombinator.com/item?id=8324991 https://news.ycombinator.com/item?id=8324991
hsivonen 12y 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 12y ago
Just wonder if anybody already tried to implement web2js.
mbourne 12y 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 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-mathjax-fallback/9456 http://www.intmath.com/blog/katex-with-asciimathml-input-and...

481 points by xymostech 12y ago

gravity13 12y ago

Did Mathjax just become obsolete?

xymostech 12y 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 http://khan.github.io/react-components/#tex
- 1971genocide 12y ago
  Awesome project ! could you explain me how you are rendering maths symbol without mathjax ?
  - xymostech 12y ago
    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.
- gravity13 12y ago
  Great work! Would love to read a blog post in the future about how you guys did your layout engine behind this.
- brendano 12y ago
  It would be helpful to know what KaTeX can and cannot do.
  - xymostech 12y ago
    There's a list of functions it supports here: https://github.com/Khan/KaTeX/wiki/Function-Support-in-KaTeX 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!
- jordigh 12y 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?
  - xymostech 12y ago
    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.

robinhoodexe 12y ago

Not bad, but MathJax is also pretty fast: https://trinket.io/latex/788599bf30 https://trinket.io/latex/788599bf30

thomasahle 12y 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 12y ago
  Do you have any handy pointers to particularly long threads on terrytao or elsewhere?

arenaninja 12y ago

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

xymostech 12y 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 http://khan.github.io/react-components/#tex
- arenaninja 12y 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
  - xymostech 12y ago
    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 12y ago
      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 12y ago
        Sounds great! If you have any problems, feel free to report issues on github, or join the #katex room on freenode.

phloxicon 12y ago

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

williamstein 12y ago
They have a benchmark page, where you can benchmark for yourself: http://jsperf.com/katex-vs-mathjax http://jsperf.com/katex-vs-mathjax
- xymostech 12y 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 http://jsperf.com/katex-vs-mathjax/2 for a version that IE 8 supports.

mrb 12y 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 12y 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 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 12y ago
  That's just the alt text.
- klmr 12y 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 12y 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 12y ago

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.

akurilin 12y 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/ 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 12y 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!
- akurilin 12y 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?

auggierose 12y 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?

xymostech 12y ago
Unfortunately, we're not. We might support that in the future though.
- auggierose 12y 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.
  - spicyj 12y ago
    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.

daturkel 12y 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 12y ago
Please! I find MathJax unusable because of this shortcoming.
- nham 12y ago
  Huh? Not sure about \mathbf, but \mathcal and \mathbb definitely work in Mathjax.
  - deleted 12y ago
    [deleted]
  - whyever 12y ago
    I think he meant KaTeX.
xymostech 12y 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?
- daturkel 12y ago
  Will do right now.

thebooktocome 12y 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 12y 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?
- thebooktocome 12y 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.
thomasahle 12y ago
Well, TeX hasn't been used much for whole web page generation. For math however, it is uncontended.
ibrahima 12y 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 12y ago

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

rhythmvs 12y 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://en.wikipedia.org/wiki/ASCIIMathML ² http://www.asciimath.org http://www.asciimath.org ³ http://boolesrings.org/krautzberger/2014/08/10/asciimathml-to-the-rescue http://boolesrings.org/krautzberger/2014/08/10/asciimathml-t... ⁴ 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 12y 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 12y 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.
  - drlippman 12y ago
    Check out https://github.com/mathjax/asciimathml/blob/master/asciimath-based/ASCIIMathTeXImg.js 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.

jgrowl 12y 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 12y 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-panel-to-write-and-correct-math-equations http://windows.microsoft.com/en-us/windows7/use-math-input-p...
throwaway15213 12y ago
I relied on this a lot during my university days: http://detexify.kirelabs.org/ http://detexify.kirelabs.org/
davidrusu 12y ago
This is what you want: http://webdemo.myscript.com/#/demo/equation http://webdemo.myscript.com/#/demo/equation

mrcactu5 12y ago

was mathjax not fast enough?

AKluge 12y 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/ 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 12y 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 12y 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!

hyp0 12y ago

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

ChristianMarks 12y ago

No xy support yet...

xymostech 12y ago
I've never heard of this before, could you let me know what it is?
- michael_nielsen 12y ago
  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 12y ago
    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).

vedtopkar 12y ago

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

deleted 12y ago

[deleted]

htf 12y 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?

xymostech 12y 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 12y 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.

spicyj 12y 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 12y ago

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

xymostech 12y 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.

camdenre 12y 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 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 12y 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/ 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.
- camdenre 12y 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 12y ago
  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.
12y ago

cnanders 12y ago

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

xymostech 12y 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.

jordanthoms 12y 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 12y ago
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.
mathman 12y 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 12y 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.

xymostech 12y 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 12y 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?

stared 12y 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 12y ago
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 12y ago
  Sad. I mean, for sure blazing speed needs some limitations, but I use a lot of matrices in my stuff.
xymostech 12y 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.
- stared 12y ago
  I see: https://github.com/Khan/KaTeX/issues/43 https://github.com/Khan/KaTeX/issues/43 :)

thanatropism 12y 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 12y 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 12y 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 https://news.ycombinator.com/item?id=7913498

malditogeek 12y ago

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

hsivonen 12y 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 12y ago

Just wonder if anybody already tried to implement web2js.

mbourne 12y 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 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-mathjax-fallback/9456 http://www.intmath.com/blog/katex-with-asciimathml-input-and...