Renderer choice

Steve Wilson

unread,

Feb 4, 2011, 3:08:45 PM2/4/11

to MathJax Users

I first met MathJax at JMM last month, and was excited. I have
installed it, and converted quite a few web pages to use it, and am
still excited. But now I want to give the users of my web space a
choice of renderer. I know that the user can right-click on some
math, and choose HTML-CSS or MathML. Many of my pages are visited by
the mathematically and technically challenged, so they would neither
understand those terms, and in many cases have trouble finding the
selection. So has anyone created a pair of buttons for "beauty" and
"speed" (say in Javascript), so the user could just click one, with
the effect being the same as setting the math renderer? (I do
recognize there are accuracy issues, but I'm willing to deal with
those.)

Steve

Davide P. Cervone

unread,

Feb 12, 2011, 9:26:32 AM2/12/11

to mathja...@googlegroups.com

Steve:

Thanks for your kind words about MathJax. I'm glad it is working for you.

It is not too hard to do what you request, but there are a number of issues to keep in mind. First, you want to make sure that the "speed" button is disabled if the native MathML support is not available. Second, you probably want the user's choice to persist from page to page, so you will have to save the setting in the MathJax menu cookie, and you will want to check that value when the page startup up so that the initial setting is correct.

Here is a sample file that does all of that. Most of the code (all but two lines) is in order to handle the two concerns above. You need to be sure to link into MathJax's startup process at the correct times, so that you are synchronized with the actions of MathJax.

<html>

<head>

<title>MathJax Renderer Change Test</title>

MathJax.Hub.Config({

jax: ["input/TeX","output/HTML-CSS","output/NativeMML"], // load both output formats

config: ["MMLorHTML.js"], // Use MMLorHTML to see if MathML is available

MMLorHTML: {prefer: "MML"}, // try for MML in all browsers

MathMenu: {showRenderer: false}, // Don't allow renderer changes by menu

extensions: ["tex2jax.js"],

tex2jax: {inlineMath: [['$','$'],['\$','\$']]}

});

(function () {

var button;

//

// After the configuration is done (i.e. MMLorHTML has completed):

// Determine if NativeMML is supported

// When the page is ready:

// Get the button elements (for future reference)

// Disable the MML button, if NativeMML is not supported

// Check the proper button if there is a menu-selected renderer

//

MathJax.Hub.Register.StartupHook("End Config",function () {

var MMLdisabled = (MathJax.Hub.config.jax.shift() !== "output/NativeMML");

MathJax.Hub.Register.StartupHook("onLoad",function () {

button = {

"HTML-CSS": document.getElementById("HTML-CSS"),

"NativeMML": document.getElementById("NativeMML")

};

if (MMLdisabled) {button["NativeMML"].disabled = true}

var renderer = MathJax.HTML.Cookie.Get("menu").renderer;

if (renderer && !button[renderer].disabled) {button[renderer].checked = true}

});

//

// If the renderer button is disabled, do nothing

// Check the appropriate button

// Save the new renderer in the menu settings cookie

// Change the selected renderer and reprocess the page

//

window.setRenderer = function (renderer) {

if (button[renderer].disabled) return;

button[renderer].checked = true;

MathJax.Hub.config.menuSettings.renderer = renderer;

MathJax.HTML.Cookie.Set("menu",MathJax.Hub.config.menuSettings);

MathJax.Hub.config.outputJax["jax/mml"] = [MathJax.OutputJax[renderer]];

MathJax.Hub.Queue(["Reprocess",MathJax.Hub]);

};

})();

</script>

</head>

<body>

<legend>Math Options</legend>

<input type="radio" checked="true" name="renderer"

id="HTML-CSS" onclick="setRenderer(this.id)" /> <label>Beauty</label><br>

<input type="radio" name="renderer" id="NativeMML"

onclick="setRenderer(this.id)"/> <label>Speed</label>

</div>

</fieldset>

<p>

This is a test of changing rednerers.

Some inline math $\sqrt{1-x}$ and some display math $${x+1\over1-x}.$$

</p>

</body>

</html>

This sets up radio buttons that control the math rendering. You can change that to be a menu selection, or other types of buttons, as per your liking. You might also consider disabling the frameset entirely when MathML is not available (it depends on your page layout). I hope the comments are sufficient explanation of what is going on.

Davide

Steve Wilson

unread,

Feb 16, 2011, 8:23:38 PM2/16/11

to MathJax Users

I have successfully tested it with both Firefox and IE, and it works
very well. Thank you.

Now on to incorporating it into my pages ...

Steve

Reply all

Reply to author

Forward