0

jqMath では一般的な下位数学がサポートされていないことを知っているので、テーブル セルの下部に境界線を追加する css と jQuery を使用して小さな回避策を作成しました。これは、fmath (偽の数学) を使用して MathML テーブルを表す Chrome、IE、および Safari では正常に機能しますが、ネイティブの MathML マークアップを使用する Firefox ではサポートされていません。実際、jQuery を使用して要素にクラスを追加することはまったくできないようです。そうは言っても、ブラウザでより適切にサポートされるまで、Firefox (または他のブラウザ) に偽の数学テーブルを使用させることができる設定はありますか? または、合計行をネイティブの MathML ソースに追加できるかどうかわからない方法はありますか?

思考のためのいくつかのコード:

<div class=”row math”&gt;
<div class=”col2”&gt;
<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”&gt; $\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

<style type=”text/css”&gt;
/* 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:

// 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;
}
} 
4

1 に答える 1