6 ms·

MathJax, beautiful math in all browsers

318 points by scw 16y ago

hsmyers 16y ago
Worthy of an 'atta-boy' from Knuth himself...
mojombo 16y ago
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.
jarsj 16y ago
Doesn't work as i expect in my browser.
- tzs 16y ago
  Details?
  - jarsj 16y ago
    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.
perlgeek 16y ago
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/ 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.
- pierrefar 16y ago
  It is Apache 2.0: http://sourceforge.net/projects/mathjax/ 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.
apl 16y ago
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!]
- bramstein 16y ago
  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/ 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.
  - thebooktocome 16y ago
    I cannot upvote you enough. I wonder if I can hack this onto my wordpress blog.
    - bramstein 16y ago
      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 http://treesaver.publicintegrity.org/smoke_screen) Perhaps a general implementation will roll out of that.
  - apl 16y ago
    Why is this not widely known? Amazing stuff.
pierrefar 16y ago
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/ 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.
- thristian 16y ago
  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/the-map-element.html#mathml 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.
- gimpf 16y ago
  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.
  - sid0 16y ago
    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).
prodigal_erik 16y ago
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.
danparsonson 16y ago
Looks nice! Minor issue with spacing in my browser: http://img202.imageshack.us/img202/6766/spacingissue.png 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 display="block"> <mrow> <msup> <mi>c</mi> <mn>2</mn> </msup> <mo>=</mo> <msup> <mi>a</mi> <mn>2</mn> </msup> <mo>+</mo> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo>−</mo><mn>2</mn><mi>a</mi><mi>b</mi> <mrow><mo>cos</mo><mi>θ</mi></mrow></mrow> </math> Browser is Chrome 8.0.552.215 on Windows 7 Ultimate 64-Bit
- rorrr 16y ago
  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?
- wwortiz 16y ago
  Same browser, Windows 7 Prof. 64 bit with same issues :/ The probability equation looks awful with the squishing.
xtacy 16y ago
It would be awesome if someone could make an extension for browsers to enable this on browser chats/emails. :-)
xtacy 16y ago
Wikipedia has LaTeX code in the ALT attribute for all images on their website. Would it make sense for them to migrate?
splat 16y ago
I can't wait for this to be incorporated on the arXiv.
Jach 16y ago
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.
jules 16y ago
Looks ugly here. The letters are overlapping. http://dl.dropbox.com/u/388822/mathjax.png http://dl.dropbox.com/u/388822/mathjax.png Chrome 7.0.517.44
Muzza 16y ago
All well and good except for the fact that it locks up my entire computer for several seconds.
zootm 16y ago
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 :)
sammyo 16y ago
In all recent browsers. For silly corporate reasons one box I work on is stuck at firefox 1.5 and this displays nothing.
- sblom 16y ago
  Just use IE. Unless silly corporate reasons have you on IE6 also... :-p
gradschool 16y ago
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?
- yannis 16y ago
  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/ http://tex.stackexchange.com/
ChristianMarks 16y ago
This could use an extension for xypic. It would trounce the alternatives if this were added.
mhartl 16y ago
MathJax is the secret sauce behind the pretty math typesetting at The Tau Manifesto (http://tauday.com/ 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.

318 points by scw 16y ago

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

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.

jarsj 16y ago

Doesn't work as i expect in my browser.

tzs 16y ago
Details?
- jarsj 16y ago
  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.

perlgeek 16y ago

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

pierrefar 16y ago
It is Apache 2.0: http://sourceforge.net/projects/mathjax/ 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.

apl 16y ago

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!]

bramstein 16y ago
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/ 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.
- thebooktocome 16y ago
  I cannot upvote you enough. I wonder if I can hack this onto my wordpress blog.
  - bramstein 16y ago
    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 http://treesaver.publicintegrity.org/smoke_screen) Perhaps a general implementation will roll out of that.
- apl 16y ago
  Why is this not widely known? Amazing stuff.

pierrefar 16y ago

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

thristian 16y ago
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/the-map-element.html#mathml 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.
gimpf 16y ago
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.
- sid0 16y ago
  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).

prodigal_erik 16y ago

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.

danparsonson 16y ago

Looks nice! Minor issue with spacing in my browser: http://img202.imageshack.us/img202/6766/spacingissue.png 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 display="block"> <mrow> <msup> <mi>c</mi> <mn>2</mn> </msup> <mo>=</mo> <msup> <mi>a</mi> <mn>2</mn> </msup> <mo>+</mo> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo>−</mo><mn>2</mn><mi>a</mi><mi>b</mi> <mrow><mo>cos</mo><mi>θ</mi></mrow></mrow> </math> Browser is Chrome 8.0.552.215 on Windows 7 Ultimate 64-Bit

rorrr 16y ago
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?
wwortiz 16y ago
Same browser, Windows 7 Prof. 64 bit with same issues :/ The probability equation looks awful with the squishing.

xtacy 16y ago

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

xtacy 16y ago

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

splat 16y ago

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

Jach 16y ago

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.

jules 16y ago

Looks ugly here. The letters are overlapping. http://dl.dropbox.com/u/388822/mathjax.png http://dl.dropbox.com/u/388822/mathjax.png Chrome 7.0.517.44

Muzza 16y ago

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

zootm 16y ago

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

sammyo 16y ago

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

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

gradschool 16y ago

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?

yannis 16y ago
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/ http://tex.stackexchange.com/

ChristianMarks 16y ago

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

mhartl 16y ago

MathJax is the secret sauce behind the pretty math typesetting at The Tau Manifesto (http://tauday.com/ 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.