Джаваскриптовая библиотека MathJax преобразует математические формулы на языке MathML или LaTeX в красивые иллюстрации

Обратите внимание на вот эту иллюстрацию:

[итог работы MathJax]

Красиво, правда?

Эта иллюстрация получилась вот из какого кода математических формул, записанных на языке LaTeX вперемешку с обычным HTML:
<p>The Lorenz Equations</p>
\[\begin{matrix}
\dot{x} & = & \sigma(y-x) \\
\dot{y} & = & \rho x - y - xz \\
\dot{z} & = & -\beta z + xy
\end{matrix} \]

<p>The Cauchy-Schwarz Inequality</p>

\[ \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) \]

<p>A Cross Product Formula</p>

\[\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0
\end{vmatrix} \]

<p>The probability of getting \(k\) heads when flipping \(n\) coins is:</p>

\[P(E) = {n \choose k} p^k (1-p)^{ n-k} \]

<p>An Identity of Ramanujan</p>
\[ \frac{1}{(\sqrt{\phi \sqrt{5}}-\phi) e^{\frac25 \pi}} =
1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}}
{1+\frac{e^{-8\pi}} {1+\ldots} } } } \]
Вот какие чудеса делает библиотека MathJax, о которой сегодня появился обзор во блоге Ajaxian.

Правда, когда сам я заглянул на сайт MathJax, то демонстрационные примеры не заработали: то один джаваскрипт не грузился, то другой.

Быть может, сайт попросту перегружен неожиданной популярностью.
+81
23 декабря 2009, 10:46
103
Mithgol 107,9

комментарии (35)

+4
halyavin #
На данный момент главная проблема с использованием latex на стороне сервера — прыгающий baseline в in-line формулах (очень хорошо это заметно в википедии). Если они смогут решить и эту проблему (in-line пример у них пока только один, так что пока не ясно как у них с этим), то им цены нет!
0
mikhailian #
Переход с картинок на SVG (canvas?) спасёт википедию и отца русской демократии.
0
Mad_Fish #
А ещё в OpenOffice.org та же проблема. Досадно. Формулы неюзабельны из-за этого. Некрасиво выходит.
–20
warmaxx #
Осталось научить яву считать такие формулы и выражения с красивыми ответами =)
+23
Pavel7 #
*Здесь должна быть картинка «Он назвал яваскрипт явой???»*
yamert.phpclub.net/img/js_not_java.gif
+30
galk_in #
+13
soshial #
я не ослышался? он назвал джаваскрипт яваскриптом? )
+1
ekzo #
я не ослышился? он назвал Javascript джаваскриптом?
+16
vadimbelyaev #
Я не ослышался? Он написал «ослышился» вместо «ослышался»?
0
soshial #
да хватит уже )))
+1
zencd #
JavaSсript земляным червяком javascript'ом называть?!
НЛО прилетело и опубликовало эту надпись здесь
+4
jil #
клиентская, более того — думал она делает картинки, а она рисует спаны :)
0
alstein #
Если не осиливает второе, то отдает картинки со стороны сервера.
–2
Mithgol #
Как я понял, она переключается между этими двумя видами рендеринга по мере нужды.
+5
homm #
Опера и ФФ понимают MathML без нативно. А эта штука очень тормозит и результат рендеринга очень не качественный.
+1
arty #
ну mathml — xml, поэтому к нему можно применить css, что опера и делает

а вот latex такому не поддастся, всё-таки совсем другой язык разметки, хотя я не удивлюсь, если этот скрипт просто конвертит latex в mathml : )
+2
alstein #
Синтаксис MathML слишком печален по сравнению с TeX'ом.
Оно действительно тормозит и глючит прилично, даже для простых вещей особого желания использовать не возникло, хотя может еще допилят… Радует ещё, что формулы старается выдавать unicode-символами.
А пока что проще уж texify.com воспользоваться или самому простеньким скриптом картинки генерировать.
–1
mikhailian #
стандарт, чего ж вы хотели…
+1
david_mz #
Для полноты картины напомню, что уже кучу лет существует библиотека ASCIIMathML — www1.chapman.edu/~jipsen/mathml/asciimath.html. Весьма стабильная и куда более быстрая чем представленная в посте. Вот тут есть пусочница, где можно в реальном времени понабирать формулы: www1.chapman.edu/~jipsen/mathml/asciimathdemo.html

На форуме sceintific.ru использую её с 2005-го года: www.scientific.ru/dforum/common/1119303836
–1
KF_NEXUS #
Он конечно неплох, но всё-таки не работает в IE6 :( А без этого использовать его на серьёзном проекте как-то не очень…
0
david_mz #
Это да. Но я сейчас поигрался с mathjax — на серьёзном проекте в IE я бы поставил рендеринг в картинку… Потому что нереальные тормоза.

Кстати, если кто не знает: перегонять ТеХ в картинку можно при помощи гугла: david-m.livejournal.com/1142631.html
0
KF_NEXUS #
Да, я согласен, проще осуществлять ренденг на стороне сервера всё-таки, особено теховского формата, тем более сейчас достаточно библиотек для этого есть.
0
KF_NEXUS #
Помоему вчера уже была новость про эту библиотеку на Хабре.
0
Mithgol #
Гиперссылку в студию. А не то поиск находит только мою блогозапись, например.
0
KF_NEXUS #
habrahabr.ru/blogs/webdev/78989/
Пользователь по какой-то причине заблокирован, но топик определённо был)
–1
Mithgol #
Понятно.

А я вот даже так и не застал ту блогозапись несокрытою.
0
KF_NEXUS #
Ну да, она ночью была, я ещё удивился — и почему же это она на глвную не вышла…
0
temujin #
Так значит MathJax это новая библиотека?
–1
Mithgol #
Да. Идеологически она основана на раннем проекте jsMath, но создаётся заново с учётом нововведений современной Паутины.
0
Jenyay #
Страница с примерами на сайте роняет Хром.
0
Jenyay #
На всякий случай эта страница.
+1
SeLarin #
Страшненький рендеринг, если честно. Кривые знаки радикалов, странные интервалы в дробях (от числителя до черты дроби интервал больше, чем междустрочный). Не очень, в общем.
0
heel #
А вот мой пост о MathJax, который был опубликован на день раньше: habrahabr.ru/blogs/webdev/78989/

обидно. Спасибо за внимание
–1
Mithgol #
А мы это чуть выше обсудили.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.