Outputting MathML via Javascript

BakedBean · Dec 14, 2005

Hi,

This is probably really simple, but I've only just been asked to look
at this and I've spent a full day trying to get it to work, so any help
will be very gratefully received!

At present I have an HTML page which calls a series of javascript
functions which output text into a browser. A client then asked if it
was possible to output mathematical equations instead of just plain
text! The solution I originally came up with was the MathML was set in
a javascript variable, displayed via the HTML page and the user needed
to download MathPlayer to be able to see the equation correctly.
However, because the clients users may access the pages from computers
where they can't install plug ins, if possible I need a solution that
won't require a plug in to work!!!!

That's when I came across the suggestions on the W3C site and created
the following simple example following the instructions on the site:

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="pmathml.xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>

<body>
<h1>Example</h1>
....
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mi>x</mi><mo>+</mo><mn>3</mn>
</math>
<br/><br/>

<math xmlns='http://www.w3.org/1998/Math/MathML'>
<mrow>
<mn>5</mn>
<msqrt><mrow><mo>-</mo><mn>1</mn></mrow></msqrt>
</mrow>
</math>

<script type="text/javascript" language="javascript">
document.write("<br/><br/>simple text<br/><br/>");
document.write("<math
xmlns='http://www.w3.org/1998/Math/MathML'><mrow><mn>5</mn><msqrt><mrow><mo>-</mo><mn>1</mn></mrow></msqrt></mrow></math>");
</script>
</body>
</html>

as an XHTML page. In the above example the first 2 bits of MathML are
displayed correctly, but the MathML displayed using the document.write
is not! Therefore, have I missed something? Is this possible? Does it
need to be an XHTML page or can I 'embed' this into my existing HTML
page?

Cheers

Matt

Martin Honnen · Dec 14, 2005

BakedBean wrote:

<script type="text/javascript" language="javascript">
document.write("<br/><br/>simple text<br/><br/>");
document.write("<math
xmlns='http://www.w3.org/1998/Math/MathML'><mrow><mn>5</mn><msqrt><mrow><mo>-</mo><mn>1</mn></mrow></msqrt></mrow></math>");
</script>

as an XHTML page. In the above example the first 2 bits of MathML are
displayed correctly, but the MathML displayed using the document.write
is not!

Which browser is that? Mozilla does support mixed namespace XML document
with XHTML and MathML but it does not support document.write in such
documents. Check the JavaScript console, I think it shows a script error
for document.write calls in XHTML documents.

What should be possible in Mozilla is using the W3C Core DOM to create
elements in the MathML namespace e.g.

var mnElement = document.createElementNS(mathMLNamespace, 'mn');
mnElement.appendChild(document.createTextNode('5'));
mrowElement.appendChild(mnElement);
var msqrtElement = document.createElementNS(mathMLNamespace, 'msqrt');
var mrowElement2 = document.createElementNS(mathMLNamespace, 'mrow');
var moElement = document.createElementNS(mathMLNamespace, 'mo');
moElement.appendChild(document.createTextNode('-'));
mrowElement2.appendChild(moElement);
var mnElement2 = document.createElementNS(mathMLNamespace, 'mn');
mnElement2.appendChild(document.createTextNode('1'));
mrowElement2.appendChild(mnElement2);
msqrtElement.appendChild(mrowElement2);
mrowElement.appendChild(msqrtElement);
mathElement.appendChild(mrowElement);

document.body.appendChild(mathElement);

Or you could use DOMParser to parse a string with MathML markup and then
use importNode.

BakedBean · Dec 14, 2005

Martin,

Thanks for the reply. Would this work in IE? I hear IE 7 is on it's
way, does anyone know if MathML is better supported?

I think I need to have a look at the W3C Core DOM and try to understand
that now!!! Are there any other reference sites/books you could
suggest?

Cheers

Matt

Martin Honnen · Dec 14, 2005

BakedBean wrote:

Would this work in IE? I hear IE 7 is on it's
way, does anyone know if MathML is better supported?

As far as I understand IE does not support MathML natively (like Mozilla
does) but rather with the help of a plugin. I don't know whether that
plugin allows scripting the MathML content, I doubt that.
The script I wrote is meant for W3C DOM Level 2 compatible
implementations which support document.createElementNS. IE 6 does not do
that, nor will IE 7 I think as "real XHTML" (meaning XHTML served as
application/xhtml+xml or at least application/xml) is not an aim for IE 7.

I think I need to have a look at the W3C Core DOM and try to understand
that now!!! Are there any other reference sites/books you could
suggest?

Reference site is certainly <http://www.w3.org/TR/DOM-Level-2-Core/>.

Seriously, what doesn't this workin IE but works in FF? MathML & DOM	3	Dec 7, 2005
Trouble with mathml (either style or source)	4	Nov 2, 2004
XML + XSL (Parser) + MathML	2	Feb 22, 2004
MathML weirdness	3	May 17, 2006
removing a namespace prefix and removing all attributes not in that same prefix	6	Nov 12, 2006
Canonical Science Today, authoring system for science and mathematics (1st part)	1	May 9, 2006
[ANN] ritex 0.1: WebTeX -> MathML	0	Sep 15, 2005
Help with my responsive home page	2	Dec 14, 2022

Outputting MathML via Javascript

BakedBean

Martin Honnen

BakedBean

Martin Honnen

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads