jqMath: How to colorize fractions inside jqMath tables

Question

In writing math using jqMath, I have the need to highlight specific parts of math problems.

/* specific to override border bottom important jqMath adds */
fmath td.redunderline { 
border-bottom: #a20000 1px solid !important; 
}
fmath td.redunderline .math-sum.red{ 
border-bottom: 0 !important; 
}

/* colorizes numerator and denominator */
.math .red-num .fm-num-frac,
.math .red-den .fm-den-frac {
    color: #a20000;
}

/* Colors for fractions in browsers that support MathML */
.math mfrac.red-num mn:nth-child(1),
.math mfrac.red-num mrow:nth-child(1),
.math mfrac.red-den mn:nth-child(2),
.math mfrac.red-den mrow:nth-child(2) {
    color:#a20000;
}

All of this works great unless I'm in a jqMath table.

$\table
{5x+4},=,49;
\html '&lt;span class="red math-sum"&gt;−4&lt;/span&gt;', ,\html '&lt;span class="red math-sum"&gt;−4&lt;/span&gt;';
{5x \html '&lt;span class="red"&gt;+ 0&lt;/span&gt;'},=,\html '&lt;span class="red"&gt; 45 &lt;/span&gt;';
5x,=,45;
{\html '&lt;span class="red-den"&gt;'{{5x}/5}\html '&lt;/span&gt;'},=,{\html '&lt;span class="red-den"&gt;' {45/5} \html '&lt;/span&gt;'};
x,=,\html '&lt;span class="red"&gt;9&lt;/span&gt;';$

This is the line which is not formatting the denominator:

{\html '&lt;span class="red-den"&gt;'{{5x}/5}\html '&lt;/span&gt;'},=,{\html '&lt;span class="red-den"&gt;' {45/5} \html '&lt;/span&gt;'};

If I do not group the line, it will not be handled by jqMath, and still shows the braces, etc. If I do group the line, I get the math problem, however the color from the span is put into another row which is hidden rather than wrapping the numbers as I intend.

I considered using jQuery to add the styles, however there is no way for me to mark the HTML in the location that I'd like to add classes since jqMath is not putting the style in the desired location, and this needs to be generic enough that I can add a tag or style to bring the desired effect into the page. Adding jQuery to each math problem is not an option.

Granted, I can do this using a regular html table (and have), however I'd like to keep all of the math together, looking like a math problem for future proofing. Additionally, putting the problems inside tables just adds unnecessary markup to the page, adding to the page download time.

The ideal solution would be a way to tell individual rows how to style themselves.

Based on @dave-barton's solution, the code cleans up quite a lot to look something like this: `$\table x-3,=,9; \cl "red math-sum" {+3},,\cl "red math-sum" {+3}; x,=,\cl "red" 12;$` — weatherangel, May 03 '13 at 19:43

score 0 · Accepted Answer · edited May 23 '17 at 11:57

\html creates a complete element, not just an opening or closing tag.

As you say, the best solution is to add CSS classes or ids to specific mathematical subexpressions. The answer to jqMath highlight box like bbox in MathJax/MathJs shows how to do this.

If you style <fmath> instead, be aware that this "fake math" tag isn't used in browsers like Firefox that have native MathML - there jqMath uses the standard <math> tag.

jqMath: How to colorize fractions inside jqMath tables

1 Answers1