jQMath - Elementary math Sum line equivalent in MathML

Question

I know that general lower math is not supported in jqMath, and so I’ve created a small work around using css and jQuery which adds a border to the bottom of a table cell. This works fine in Chrome, IE and Safari which use fmath (fake math) to represent MathML Tables, however in Firefox, which uses the native MathML markup, it is not supported. In fact, I can’t seem to use jQuery to add a class to the elements at all, even though I’m finding them just fine. So with that being said, is there a setting that will allow me to force Firefox (or other browsers) to use the fake math tables until it is better supported by the browser? OR, is there a way that I don’t know of which would allow me to add the sum line to native MathML source?

Some code for thought:

<div class=”row math”>
<div class=”col2”>
<p><strong>First Equation</strong></p>
$\\table
x + y,=,9;
\cl "red"{6}+ y,=,9;
6 + y,=,9;
\cl "math-sum red redunderline" {-6},\cl "math-sum redunderline" {&nbsp;}, \cl "math-sum red redunderline" {-6};
y,=,\cl "red" {3};$ <br/>
<p> The solution to this system is <br />
  x = 6, y = 3.</p>
</div>
<div class=”col2”> $\table
x - y,=,3;
\cl "red" {6}- y,=,3;
6 + y,=,9;
\cl "redunderline math-sum red"{-6},,\cl "redunderline math-sum red"{-6};
-y,=,\cl "red" {-3};
y,=,\cl "red" {3};$ <br>
<p> The solution to this system is <br />
  x = 6, y = 3.</p>
</div>
</div>

CSS to handle the underlines

<style type=”text/css”>
/* jqMath is using important tags which requires important to override contents inside a css file*/
.math .math-sum.red,
.redunderline { 
    border-bottom: #a20000 1px solid !important; 
}
</style>

jQuery to move the underline:

// Add red underline to jqMath fake table markup
if($('td.fm-mtd:has(.red.math-sum)').selector === 'td.fm-mtd:has(.red.math-sum)') {
    $('td.fm-mtd:has(.red.math-sum)').addClass('redunderline');
}
if($('td.fm-mtd:has(.red.math-sum-row)').selector === 'td.fm-mtd:has(.red.math-sum-row)') {
    $('td.fm-mtd:has(.red.math-sum-row)').parent().addClass('redunderline');
}

if($('td.fm-mtd.mrow:has(.red.math-sum-row)').selector === 'td.fm-mtd.mrow:has(.red.math-sum-row)') {
    $('td.fm-mtd:has(.red.math-sum-row)').parent().addClass('redunderline');
}


// Add red underline for real math table markup
if($('mtd:has(.red.math-sum))').selector === 'mtd:has(.red.math-sum)') {
    $('mtd:has(.red.math-sum)').addClass('redunderline');
    //addClassML($('mtd:has(.red.math-sum)'),'redunderline');
}

// This SHOULD work, but doesn't add the class in FF
//$('.red.math-sum').parent().parent().addClass('redunderline'); 
if($('mtd:has(.red.math-sum-row))') != " ") {
    addClassML($('mtd:has(.red.math-sum-row)').parent(),'redunderline');
}
if($('mtd:has(.red.math-sum))') != " ") {
    addClassML($('mtd:has(.red.math-sum)').parent(),'redunderline');
}


/* This is NOT the prefered way to add a class - Firefox was ignoring addClass jQuery
function when in math markup */

function addClassML(element,newClassString){
if(typeof element === 'object' && newClassString === 'string' && newClassString.length > 0) {
    var i,n=0;
    newClass=newClassString.split(",");
    for(i=0;i<newClass.length;i++){
        var currentClass = $(element).attr("class");
        if(typeof(currentClass) == 'string' && currentClass > 0) {
           if(currentClass.indexOf(" "+newClass[i]+" ")==-1){
                   $(element).attr("class",currentClass+=" "+newClass[i]);
                   n++;
           }
        } else {
            $(element).attr("class",newClass[i]);
        }
    }
    return n;
} else {
    return -1;
}
} 

Answer 1

I've had trouble using jQuery to add classes to XML elements, such as Firefox MathML elements, also. See M.addClass in jqmath-0.4.0.js for what I do instead inside jqMath - basically I call element.setAttribute('class', ...) on XML elements, which is equivalent to your addClassML. (Or perhaps a later version of jQuery's .addClass() might do this itself someday?)

As you say, MathML's Elementary Math (http://www.w3.org/TR/MathML3/chapter3.html#presm.elementary) is not supported in jqMath, or Firefox MathML. But it only handles digits and operations, not variables, your examples would not strictly be covered anyway.