by michal frackowiak

on 07 Jun 2011 09:51

$\mathfrak W_i\kappa^i$ $\partial_\emptyset t$

Since its early days Wikidot supported LaTeX-style equations in wiki pages. Since I come from academic and university circles, I felt that embedding math within wiki pages is very important for a project like ours. Right now, almost 5,000 Wikidot sites use LaTeX-style math expressions to publish scientific results or enable collaboration between researchers or students.

LaTeX (and underlying TeX), for those who had no chance to learn about it, is a typesetting system widely used in academia. It offers exceptional, high-quality output and is commonly used to write scientific articles, books etc. One of its strongest features is rendering math.

So far Wikidot was using the original TeX suite to achieve the best rendering quality of math expressions on Wikidot pages. When you wanted to embed math on your page, you could just type e.g. `[[$ E = mc^2 $]]`. Wikidot would extract your equation and run it through `latex` command on the server. As a result, a PNG image with the rendered equation would be inserted into your wiki page.

This approach had several issues. First, math was not beautiful enough. Zoom in and you could see awful pixels. "Inline math" would not always be aligned with the baseline of surrounding text. There was also a problem of equations not visible when printing on private sites in Internet Explorer. Not to mention it was not possible to have white math on dark background before.

Today we are taking one step ahead to improve the quality of rendered math expressions.

A while ago we came across the MathJax project. It is a JavaScript library that can parse LaTeX in a browser — and render really beautiful equations using custom web fonts, CSS or even MathML if supported by the browser.

Take a look at a few examples (from the fundamental laws of physics):

- 1-particle Schrödinger's equation:

- Einstein's field equations:

- An example of inline math, where math expression like $E = mc^2$ is surrounded by text. Math adapts to the style (color, size) of the text too, like $\sum_{i = 0}^{n} x_i^2$
- White on black? No problem. Math will match any theme of a site.

- And an example of huuuuge math, more elegant than ever:

Beautiful, isn't it? It also looks much better when you print a page.

Take a look on the old-style equation for a moment. The difference in quality is stunning, especially when you zoom in:

Now, right-click on any of the new-style equations. Using the context menu you can read the LaTeX source, generate MathML source (that you can paste into other editors) or alter the way that equations are rendered. Great.

You can now use more math environments instead of just `equation` and `eqnarray` available before: `align`, `alignat`, `aligned`, `alignedat`, `array`, `Bmatrix`, `bmatrix`, `cases`, `gather`, `gathered`, `matrix`, `multline`, `pmatrix`, `smallmatrix`, `split`, `subarray`, `Vmatrix`, `vmatrix`.

For details check out the updated Wiki syntax documentation: Math.

Before we decided to switch to MathJax we looked at math equations on Wikidot sites to identify potential problems: we extracted them, generated old `latex` images and compared them to what MathJax produces. And we found a few differences. MathJax is stricter than the original LaTeX and often throws errors rather than warnings that prevents math from being rendered. This also means it's simpler to correct mistakes, that could be easily overlooked with the old system.

With every problematic equation we were able to either correct syntax errors in the equation itself or we found a simple workaround if the equation was using a feature not available in MathJax.

For those having problems with MathJax we created a Math troubleshooting page to help with the transition. Every equation that fails rendering links to this page too. If you have problems with displaying equations — please take a look at this page.

We believe the new rendering engine is superior to the previous one in many aspects: it nicely mixes with HTML output (especially cool for inline math), allows for errors troubleshooting (says what's wrong with the equation) and cuts download time. For us it's also important that we don't need to host and serve images for the equations.

Well done, team!

Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder

im deutschen » Wikidot Handbuch ?

ReplyOptionsGreat! :)

I particularly like what you've done at the beginning of the blog post with the Wikidot logo. Looks great!

★★

Shane Smith★★Freelancing Website, Wikify Me (Blog)

Projects: Wikidot Editor, Wikimated, Wikidot 101 (Tutorials)

ReplyOptionsNice!

ReplyOptionsYay! Math!

This is really cool, and thanks for the improved math structure! I use them a lot.

— Blog ~ Life's Handbook ~ Wikidot Design & Development

ReplyOptionsAwesome. I've been waiting for these features for ages. Thanks to the Wikidot team.

Suresh Govindarajan

http://sgovindarajan.wikidot.com

ReplyOptionsI am really glad you like this change!

Michał Frąckowiak @ Wikidot Inc.

Visit my blog at michalf.me

ReplyOptionsThis is a beautiful enhancement, thanks. Is it by design that a page which contains syntax errors does not get re-compiled? That's a nice touch.

Might it be worthwhile to add this syntax fubar to the troubleshooting page?

That worked in the original $\TeX$ suite, but it now requires extra braces for the \sqrt:

Copyright waived on Wikidot official and community sites — see profile for details.

Website: www.soronlin.org.uk

Diaspora*: ku.em.ecatstam.dop|nilnoros#ku.em.ecatstam.dop|nilnoros

ReplyOptionsLooks great!

A similar way to enter and display musical notation would be awesome :)

Edit: a quick googling showed that there is a similar way for musical notation: MusiXTeX! I wonder if it would be difficult to implement this…?Edit: here are some examples: http://guitartex.sourceforge.net/en/guitartex/x754.html___TTT___/http://www.trumpetexercises.net(_|||_) \- JanneReplyOptionsThat project is for the $LaTeX$, not for MathJax — the JS math-oriented clone we switched to.

Piotr Gabryjeluk

visit my blog

ReplyOptionsOh, I see. I thought that MathJax was just an update of some sort to LaTeX (the blog post was sooooo long that I didn't have time to read it carefully enough :)

This is a bit off-topic, but would it be possible to implement

thisthen? As far as I understand, it's the same for music as MathJax is for math.___TTT___/http://www.trumpetexercises.net(_|||_) \- JanneReplyOptionsNot really the same for music as MathJax for math, since MathJax it's also a parser, so it parses equations written in LaTeX subset and then renders them. VerFlow seems only renderer, as you program it from JavaScript, which is a generic programming language, and not "music language" (while the TeX macros introduced a sort of music language).

Still, with help of [[html]] tags, you can use VerFlow on your sites. Just put whatever they say to put in HTML document in an [[html]] block and things should just work.

Piotr Gabryjeluk

visit my blog

ReplyOptionsThanks for the info. It'd be awesome to get this working.

___TTT___/http://www.trumpetexercises.net(_|||_) \- JanneReplyOptionsYour example is fine in Firefox, but nor in IE 8 - because of html 5 - l evel codings.

Looks good, but that is not really useful on the web - if this is not working on old IE…

Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder

im deutschen » Wikidot Handbuch ?

ReplyOptionsYes, I was wrong, IE is not supported (better said: IE doesn't support Canvas tag). And I was wrong with the parser issue, because there is a parser for guitar tablatures: http://vexflow.com/vextab/ .

Piotr Gabryjeluk

visit my blog

ReplyOptions