MathJax, beautiful math in all browsers | Hacker News Reader

MathJax, beautiful math in all browsers

mathjax.org

318 pointsscw36 comments

I use MathJax on one site I'm developing. It has two problems related to speed:

1. It is so modular that you cannot really optimize it using something like Google Closure (http://code.google.com/closure/ ). If you do, it breaks it.

2. The modularity means that you're likely to need a few roundtrips to the server to get everything. Invariably these block the loading of the page and you get a hang, sometimes for a few seconds. This is not good for user experience.

Of course MathJax solves a very important problem, but it's a problem browsers have introduced. None of the support MathML in a sane way: Firefox requires content served as fully valid XHTML (good luck with that if you're using a CMS) and Webkit only got MathML support recently in the nightly releases. If browsers actually implement MathML in a way developers can use without losing hair, then MathJax is no longer needed. Till then, I love MathJax despite its warts.

Firefox requires pages that use MathML, SVG, or any other markup that exists outside the HTML namespace to be presented in XML, because HTML4 doesn't have any way to declare that an element exists in a non-default namespace.

HTML5 doesn't have a way to declare specific namespaces either, but it does make special exceptions for including MathML and SVG elements in HTML content: putting a <math> or <svg> element in your HTML document creates an "island" of MathML or SVG markup:

http://www.whatwg.org/specs/web-apps/current-work/multipage/...

Firefox 4 includes an HTML5 parser by default, so your glorious future is one step closer.

However, when you see the MathML rendering of Firefox, you immediately see why something like MathJax is still _required_. We would need widespread support for MathML rendering that is actually readable. That will take another while.

What's wrong with Firefox's MathML rendering? The MathJax MathML example looks fine with Firefox 4 on Windows 7 (it seems to be using Cambria Math to render symbols).

The appearance of MathML sadly depends on native fonts installed. If your user has STIX or Computer Modern fonts installed then MathML looks very readable compared to say Mathematica's typesetting.

Even if browsers would support MathML, humans like to write LaTeX, so MathJax is still useful to convert from LaTeX to MathML.

Sometimes, when the ol' fever comes back and nobody's there to remind me that we have come to accept HTML/CSS, I dream of a world wide web built on TeX and TeX alone. It's a place of wonder, and happiness, and river-less paragraphs. Then I wake up, sweating, screaming, to a world without proper hyphenation. XeTeX is my XaNaX. Makes the web-pain go away.

[MathJax, on the other hand, looks glorious. Many thanks to the people in charge of the project!]

If you're bothered by rivers and lack of hyphenation, check out a project I worked on a while ago, which implements the Knuth and Plass line breaking algorithm in JavaScript. Combined with Hyphenator.js, the results are nearly indistinguishable from TeX output.

http://www.bramstein.com/projects/typeset/flatland/

Earlier incarnations made it to HN before, but unlike the old version this renders in plain HTML instead of Canvas, so text can be selected, copied, etc.

I cannot upvote you enough. I wonder if I can hack this onto my wordpress blog.

You probably could get it working, but the implementation isn't (yet) capable of dealing with arbitrary HTML. It only expects paragraphs and images. This is only a matter of implementation though, the core algorithm should be able to deal with most of the content found on websites.

I'm talking to Filipe Fortes of Treesaver about implementing it as part of his Treesaver technology (demo: http://treesaver.publicintegrity.org/smoke_screen) Perhaps a general implementation will roll out of that.

Why is this not widely known? Amazing stuff.

This plus the typeset library, I do wonder when will we have an online/ebook of TAOCP?

Very nice, I'm looking forward to usinig it. So I thought I'd check the license to see if it's compatible with what I envision.

The documentation page just says "Open Source", the FAQ and download pages nothing at all.

The release announcement at http://www.mathjax.org/2010/01/12/news/mathjax-beta-released... finally says "Apache 2.0 open source license".

Note to other developers: don't hide your license -- it's a piece of information others might actually be interested in, particularly if it's not an application, but more of a library.

It is Apache 2.0: http://sourceforge.net/projects/mathjax/ . You'll need to click on the barely visible "Show project details" link at the right hand side under the download link.

We use MathJax for inline display of equations in the GitHub wikis and it's really nice. I spent a long time looking for a LaTeX style math solution for the web, and MathJax was a great fit.

MathJax is the secret sauce behind the pretty math typesetting at The Tau Manifesto (http://tauday.com/). For what it's worth, Davide Cervone, the lead developer of MathJax, is incredibly helpful and friendly. In the process of writing The Tau Manifesto, I was running into some weird problems; Davide realized that there was a subtle MathJax bug when used with HTML5, and pushed a fix within hours of finding the problem.

Looks nice! Minor issue with spacing in my browser: http://img202.imageshack.us/img202/6766/spacingissue.png

Source of the top equation is: J_\alpha(x) = \sum_{m=0}^\infty \frac{(-1)^m}{m! \, \Gamma(m + \alpha + 1)}{\left({\frac{x}{2}}\right)}^{2 m + \alpha}

Source of the bottom equation is:

      </math>

Browser is Chrome 8.0.552.215 on Windows 7 Ultimate 64-Bit

I have the same Chrome version on WinXP Pro (SP3).

It looks perfectly fine.

Are you sure you don't have some bad plugins installed?

Same browser, Windows 7 Prof. 64 bit with same issues :/

The probability equation looks awful with the squishing.

I can't wait for this to be incorporated on the arXiv.

Right now this works for some people and not others, because they aren't doing progressive enhancement over a server-side fallback rendering. The TeX samples just show raw \macros and the HTML-CSS renderings of the MathML samples are incorrect (x=−b±b2−4ac2a is not the quadratic formula).

Looks nice on the machine I use as a js sandbox, though.

Wikipedia has LaTeX code in the ALT attribute for all images on their website. Would it make sense for them to migrate?

Firefox 4 on Linux gives a message at the bottom saying something like "WebFonts not supported, falling back to image fonts", meaning that the scaling examples look horrible and most examples are very fuzzy. Shame, looks neat otherwise :)

I'd like to port a large LaTeX document to a web browsable format but it makes heavy use of pstricks and picture environments. Can anyone comment on how well this would cope with that or what alternatives might help?

Currently the best approach is to just serve the pdf. You will not be able to get a direct translation. There is a very good forum for TeX now at http://tex.stackexchange.com/

I've been using jsMath for a while, I'm glad these sorts of libraries exist. It chips at my heart a little every time I see ascii sigmas and the like.

Looks ugly here. The letters are overlapping.

http://dl.dropbox.com/u/388822/mathjax.png

Chrome 7.0.517.44

In all recent browsers. For silly corporate reasons one box I work on is stuck at firefox 1.5 and this displays nothing.

Just use IE. Unless silly corporate reasons have you on IE6 also... :-p

Worthy of an 'atta-boy' from Knuth himself...

It would be awesome if someone could make an extension for browsers to enable this on browser chats/emails. :-)

This could use an extension for xypic. It would trounce the alternatives if this were added.

All well and good except for the fact that it locks up my entire computer for several seconds.

Doesn't work as i expect in my browser.

Details?

Sorry, it works. But the Ajax is slow. When I posted my first comment, the Javascript just didn't complete in time to show me the rendered equations and hence I reported things not working. The quality is great and good job for that, however I believe you are doing a bunch of processing on the server and that's going to be an important hurdle in widespread adoption.

Reply on news.ycombinator.com