CODEWITHSUNDEEP
javascriptmathml
levkaster
levkaster

Reputation: 2730

Convert subscript from OpenMath to MathML

I'm working with mathdox, to insert equations in my web page. I have implemented all the symbols and mathematical expressions that I need, to insert them as openmath and convert them in to MathML, except subscript. I know that it's suppose to work like this:

<OMOBJ xmlns='http://www.openmath.org/OpenMath' version='2.0' cdbase='http://www.openmath.org/cd'>
<OMA style='sub'>
<OMV name='x'/>
<OMI>2</OMI>
</OMA>
</OMOBJ>

should convert to

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <msub>
    <mi>X</mi>
    <mn>2</mn>
  </msub> 
</math>

but I cannot find a way to implement it in javascript or find it's existing implementation in mathdox.

Upvotes: 0

Views: 119

Answers (1)

zero298
zero298

Reputation: 26920

For me, this only works in Firefox. The main tools for the job are createElementNS and getElementsByTagNameNS. Additionally, I'm not sure where you get your openmath document, but I'm going to be retrieving it via AJAX.

So, assuming your file structure is:

/root
+-/js
| +-convert.js
|
+-/xml
| +-openmath.xml
|
+-index.html

And your files are as follows:

index.html

The only thing to note about index.html is that we set an id on the <math> element that we want to put the converted tags under. We also include the convert.js JavaScript file.

<html>
<head>
    <title>Convert</title>
    <script src="js/convert.js"></script>
</head>
<body>
    <main>
        <math xmlns="http://www.w3.org/1998/Math/MathML" id="target"></math>
    </main>
</body>
</html>

openmath.xml

This file is just the XML that you posted in your question that we will be converting to the math namespace.

<OMOBJ xmlns='http://www.openmath.org/OpenMath' version='2.0' cdbase='http://www.openmath.org/cd'>
    <OMA style='sub'>
        <OMV name='x' />
        <OMI>2</OMI>
    </OMA>
</OMOBJ>

convert.js

The way that convert.js works is that it loads up the openmath document over xhr, then creates a new XML document with the document text using DOMParser() and parseFromString(). Then we feed that document to mathSubscriptConverter() which pulls all the OMA tags, gets the relevant data from them, and then converts them to msub tags. Once we have the msub tags, we add them as children under the <math> tag that exists in our index.html.

(function () {

    "use strict";

    var mathNS = "http://www.w3.org/1998/Math/MathML",
        openMathNS = "http://www.openmath.org/OpenMath",
        xhr = new XMLHttpRequest();

    function mathSubscriptConverter(openmathDoc) {
        var target = document.getElementById("target"),
            omas = openmathDoc.getElementsByTagNameNS(openMathNS, "OMA");

        // Make sure we have a math element to put this under
        if (target) {
            // Iterate each OMA tag
            Array.prototype.forEach.call(omas, function (oma) {
                var omv, omi, msub, mi, mn;

                // Get the first OMV
                omv = oma.getElementsByTagNameNS(openMathNS, "OMV")[0];
                // Get the first OMV
                omi = oma.getElementsByTagNameNS(openMathNS, "OMI")[0];

                // Create a subscript tag in the math namespace
                msub = document.createElementNS(mathNS, "msub");
                // Create an mi tag in the math namespace
                mi = document.createElementNS(mathNS, "mi");
                // Create an mn tag in the math namespace
                mn = document.createElementNS(mathNS, "mn");

                // Set our math attributes
                mi.innerHTML = omv.getAttribute("name");
                mn.innerHTML = omi.innerHTML;

                // Add our new elements to the target
                msub.appendChild(mi);
                msub.appendChild(mn);
                target.appendChild(msub);
            });
        }
    }

    // Wait for document load
    document.addEventListener("DOMContentLoaded", function () {
        // Load our openmath document
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var parser = new DOMParser(),
                    mdoc = parser.parseFromString(xhr.responseText, "application/xml");
                mathSubscriptConverter(mdoc);
            }
        };
        xhr.open("GET", "xml/openmath.xml", true);
        xhr.send();
    });

}());

Upvotes: 1

Related Questions