Accessing the generated MathML of a formula programmatically through javascript

1,421 views
Skip to first unread message

epoli.za...@gmail.com

unread,
Mar 19, 2012, 4:39:04 PM3/19/12
to mathja...@googlegroups.com

Dear MathJax developers,

first of all, thanks for your work. 

Please forgive me if my question will be exceedingly naive: I’ve searched through the documentation and the group, but I couldn’t find any precise pointer to an answer.

I’d like to access programmatically, through javascript on my page, to the MathML underlying a specific rendered formula (the one you can see right-clicking on a formula and choosing Show Math As > MathML Code).

Is there a safe way to do it?

Thanks again,

Enrico

Iswarya Rajagopal

unread,
Mar 20, 2012, 12:34:10 AM3/20/12
to mathja...@googlegroups.com
Hi all,
I wud like to know the answer for the same question.. I  m doing a project where i need sticky notes with formula suggestion.. there is a formula suggestion div which on clicking it will render formula using mathml as input from a database.. Now i need a way of using the suggested formula in my sticky notes.. Actually i need a way of selecting the rendered formula form the formula container and using it in the sticky note.. 

The way i m doing it now is not very intuitive.. I am just copy pasting the mathml code of a formula in the formula container into the rich text editor of the sticky note and when i save the note , i strip of the text in the rich text editor from <math></math> and send the stripped text and the id of the div containing the sticky note to a function which lets it render math... 

though this works, the problem is i don want my end users to see the formula as mathml.. i need a way of elegantly copy pasting or reusing the formula from the container to the notes.. I learnt there was no way to copy paste.. So i wud like to know how to access the mathml underlying a formula programmatically and i need a way of triggering it.. i mean on mouse over of the formula, get its underlying code or somethin..

Please help..

Iswarya

Davide P.Cervone

unread,
Mar 20, 2012, 4:12:30 PM3/20/12
to mathja...@googlegroups.com
Are you after a string representation, or actual DOM elements? The
Show Math As > MathML Code produces a string for display. It is
possible to obtain that string, but it is a bit delicate, because the
command that creates it can operate asynchronously. (That is because
it may cause files to be loaded, depending on the math that is in the
expression. If it has already been displayed, chances are that it
won't need to do that, but it is still possible.)

You should add "toMathML.js" to your extensions array if you are doing
your own configuration (it is already included in the standard
combined configuration files). Then define

function toMathML(jax,callback) {
var mml;
try {
//
// Try to produce the MathML (if an asynchronous
// action occurs, a reset error is thrown)
// Otherwise we got the MathML and call the
// user's callback passing the MathML.
//
mml = jax.root.toMathML("");
} catch(err) {
if (!err.restart) {throw err} // an actual error
//
// For a delay due to file loading
// call this routine again after waiting for the
// the asynchronous action to finish.
//
return MathJax.Callback.After([toMathML,jax,callback],err.restart);
}
//
// Pass the MathML to the user's callback
MathJax.Callback(callback)(mml);
}

This will give you a function that you can pass an Element Jax and a
callback function to. The callback will be called with the MathML
from the element.

Here is a complete example:

<!DOCTYPE html>
<html>
<head>
<title>MathJax TeX to MathML Page</title>
<script>
function toMathML(jax,callback) {
var mml;
try {
mml = jax.root.toMathML("");
} catch(err) {
if (!err.restart) {throw err} // an actual error
return MathJax.Callback.After([toMathML,jax,callback],err.restart);
}
MathJax.Callback(callback)(mml);
}
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
});
MathJax.Hub.Queue(
function () {
var jax = MathJax.Hub.getAllJax();
for (var i = 0; i < jax.length; i++) {
toMathML(jax[i],function (mml) {
alert(jax[i].originalText + "\n\n=>\n\n"+ mml);
});
}
}
);
</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full
"></script>
</head>
<body>
<p>
When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and
they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</p>
</body>
</html>

This example loops through the math elements on the page and displays
the original TeX and the resulting MathML.

Note that using the callbacks is the only safe way to do this, as the
jax.root.toMathML() call may signal that it needs to load a file by
throwing the reset error. If you don't take that into account, you
code may work most of the time, but will cause errors in isolated
circumstances.

Davide


On Mar 19, 2012, at 4:39 PM, <epoli.za...@gmail.com> <epoli.za...@gmail.com

epoli.za...@gmail.com

unread,
Mar 22, 2012, 11:49:14 AM3/22/12
to mathja...@googlegroups.com

Dear David,

thanks a lot – I admire how thoughtful you always are in your answers. 

I’m still not quite sure I will be able to use MathJax both for rendering LaTeX and for storing the rendered MathML for further processing uses - it will be probably turn out I’d better use a separate, server-side library for that, but the idea of using the _same_ engine and so storing just the same code that get rendered (and, so, checked by a human being) is appealing and I confess I’m wooing it. 

But, as far as you could reasonably assist me, your answer solves my problem – thanks again!

Enrico

Davide P. Cervone

unread,
Mar 22, 2012, 1:07:06 PM3/22/12
to mathja...@googlegroups.com
Thanks for the kind comments.  Yes, using a server-side library to translate to the MathML that you are storing is probably easier.   It might be possible to use a server-side javascript interpreter to have MathJax do it, however.

Best of luck with the project.

Davide
Reply all
Reply to author
Forward
0 new messages