Way to change the font color of SVG output with Mathjax?

benjamin....@cengage.com

unread,

Aug 20, 2012, 1:09:38 PM8/20/12

to mathja...@googlegroups.com

Hi,

I'm wondering if there is a way to change the font color of a formula rendered in SVG via the API in Mathjax without having to specify it in the input (MathML). Possibly through configuration file or through some other mechanism? The use case is a formula that appears in both a heading and the body that have different colors but we will be receiving the same MathML input for each.

Davide P. Cervone

unread,

Aug 20, 2012, 4:22:01 PM8/20/12

to mathja...@googlegroups.com

You can use CSS to do this. Here is an example:

<!DOCTYPE html>
<html>
<head>
<title>Use CSS to color SVG output</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
jax: ["input/MathML","output/SVG"],
extensions: ["mml2jax.js"]
});
</script>
<script type="text/javascript" src="../MathJax/MathJax.js"></script>
<style>
.colored .MathJax_SVG SVG > g,
.colored .MathJax_SVG_Display SVG > g {
fill: #F00;
stroke: #F00;
}
</style>
</head>
<body>

<div class="colored">
<math>
<mi>x</mi><mo>+</mo><mn>1</mn>
</math>
</div>

<div>
</div>
<math>
<mi>x</mi><mo>+</mo><mn>1</mn>
</math>
</div>

</body>
</html>

The first should be colored red and the second should be black (or
your default text color).

Davide

On Aug 20, 2012, at 1:09 PM, <benjamin....@cengage.com> <benjamin....@cengage.com

gavin.s...@gmail.com

unread,

Feb 26, 2013, 10:44:46 AM2/26/13

to mathja...@googlegroups.com, benjamin....@cengage.com

Is there a way to do this in javascript, i.e. modify the color?

Asit Panda

unread,

Feb 27, 2013, 12:31:25 AM2/27/13

to mathja...@googlegroups.com, benjamin....@cengage.com

Hi Gavin,

If you are using latex as input math then you can go for color command.

You can use \color{#000000}{....} for output math color.

See this link for more detail
http://docs.mathjax.org/en/latest/tex.html#color

On Tue, Feb 26, 2013 at 9:14 PM, <gavin.s...@gmail.com> wrote:

Is there a way to do this in javascript, i.e. modify the color?

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

--
Thanks ,
Asit Kumar Panda
Mob : 9620336933

Peter Krautzberger

unread,

Feb 27, 2013, 10:55:10 AM2/27/13

to mathja...@googlegroups.com

Gavin,

You can use javascript to change the style -- the browser will do the rest (i.e., no MathJax re-rendering necessary).

Peter.

mphil...@live.com

unread,

Jan 6, 2014, 8:55:34 PM1/6/14

to mathja...@googlegroups.com

Hi David,

Thanks for the code. It works great in Chrome, but it does not appear to work in IE. Do you know of a different way I can do this?

Thanks!

Peter Krautzberger

unread,

Jan 6, 2014, 10:59:27 PM1/6/14

to mathja...@googlegroups.com

Hi,

Please provide a live sample (e.g. using jsfiddle) and specify at least browser and OS version where you see the problem.

Thanks,

Peter.

Davide P. Cervone

unread,

Jan 16, 2014, 4:42:11 PM1/16/14

to mathja...@googlegroups.com

Well, it worked in IE9 when I wrote it. But it does appear that IE10 and IE11 have trouble with it.

It turns out that the issue is in capitalization. The SVG should be lower case for it to match the SVG tag in IE10+. So it should be

<style>
.colored .MathJax_SVG svg > g,
.colored .MathJax_SVG_Display svg > g {

fill: #F00;
stroke: #F00;
}
</style>

instead. At least that works for me.

Davide

Reply all

Reply to author

Forward