MathJax Help and Configuration (2024)

Show Mobile Notice Show All NotesHide All Notes

In order to display the mathematics on this site I use MathJax. The mathematics "source" is LaTeX and the MathJax "processor" converts that source into "viewable" mathematics. Below is a little more information about the decision to do this if you are curious as to why the change in how math is displayed on the site.

For example, the following LaTeX code,

\[ a x^{2} + b x + c = 0 \hspace{0.5in} \Rightarrow \hspace{0.5in} x = \frac{-b \pm \sqrt{b^{2}-4ac}}{2a} \]

will produce the following (probably) very familiar mathematical formula.

\[a x^{2} + b x + c = 0 \hspace{0.5in} \Rightarrow \hspace{0.5in} x = \frac{-b \pm \sqrt{b^{2}-4ac}}{2a} \]

Quick note about the LaTeX in the pages... If you are thinking of using the "source" of the mathematics to learn LaTeX. Don't do it! The tool I used to convert the source documents into LaTeX generally did a good job but the result is often UGLY LaTeX "code" and not how I would have done it if I was writing it in LaTeX from the start. It put a lot of extra "junk" into the LaTeX that just isn't needed most of the time and if I had taken the time to remove that and generally clean it up it would have, quite likely, taken me closer to 3 YEARS (!! Yikes !!) to convert all the pages.

Okay, on to some of the configuration options that MathJax provides. Please note as well that the options here are provided by the MathJax folks and not me and as such I can't provide tech support for something in these options that doesn't work. Sorry.

If you right click on any equation (such as the one above) a menu will open that will allow you to "configure" a handful of MathJax options. Here is a listing of the menu items and descriptions of each of them (well, descriptions of those that I'm confident that I know what they are anyway...). MathJax will set a cookie on your computer to remember any changes you make to the default settings.

• Show Math As
  • MathML Code - This will open a window showing the MathML code required to display the same mathematics.
  • TeX Commands - This will open a window showing the LaTeX code that I used to display the mathematics.
  • Annotation - Not sure to be honest as I've never actually gotten this submenu to open. My best guess is that it is only active under specific circ*mstances and I don't know that those are...
  • Show TeX hints in MathML - This will add in a few extra commands in the MathML Code above and it is my understanding it helps make the spacing in the mathematics look more like the LaTeX spacing.
  • Add original form as annotation - This will add in a command in the MathML Code above that gives the original LaTeX command.
• Math Settings
  • Zoom Trigger - Options for expanding the mathematics.
    • Hover - The mathematics will expand whenever you hover your mouse over the mathematics. Note that there will be a small delay just to make sure that you aren't just moving the mouse across the screen and it just happened to go over a piece of mathematics.
    • Click - Simply click the mathematics to get it to expand.
    • Double-Click - Double click the mathematics to get it to expand.
    • No Zoom (default setting) - The mathematics won't expand.
    • Trigger Requires : Alt - The mathematics will only expand if you press the Alt key as you hover/click/double-click the mathematics depending on your choice of the actual trigger.
    • Trigger Requires : Control - The mathematics will only expand if you press the Control key as you hover/click/double-click the mathematics depending on your choice of the actual trigger.
    • Trigger Requires : Shift - The mathematics will only expand if you press the Shift key as you hover/click/double-click the mathematics depending on your choice of the actual trigger.
    • Quick note on the "Trigger Requires". More than one requirement can be selected. So, for instance if you select both Alt and Shift then you will need to have both the Alt and Shift keys pressed to trigger the mathematics expanding. Also, from my experiments on this it seems like if you select Hover as the trigger it will always expand and ignore any choices you've made for requirements.
  • Zoom Factor - This gives a variety of options from 125% to 400% on how much the equation should be expanded when triggered.
  • Math Renderer - This controls the method used by MathJax to actually render the mathematics.
    • HTML-CSS - This method should produce high quality output in pretty much all browsers. It's main advantage over the other methods is that it supports quite a few "legacy" browsers, such as Internet Explorer 6. However, the drawback of using this method is that is probably the slowest processing method. It uses web based fonts downloaded from MathJax. It should only need to download the fonts once and then keep them in your browsers cache and so won't delay the display of the mathematics.
    • Common HTML (default method) - This method should produce high quality output for modern browsers and it should be consistent across browsers and operating systems. For Internet Explorer the method will work for IE9+ and will gracefully fall back to other methods on older versions. This method is faster than most of the other output processors. It uses web based fonts downloaded from MathJax. It should only need to download the fonts once and then keep them in your browsers cache and so won't delay the display of the mathematics.
    • Preview HTML - This is a very fast processor but tends to produce low quality output. It does not use web based fonts but instead fonts installed on the local computer. Because of this the output may well vary based upon computer you are on. Note that, by default on this site, when a page first loads it first uses this method to quickly convert the LaTeX into readable mathematics before applying the actual processor.
    • MathML - This method uses MathML to display the math. However, in order for it to actually display mathematics your browser must support MathML. Currently Firefox is only browser with native support for MathML and even then does not include all "standard" features. It is not suggested that you use this method and the results are liable to be very sub par with some of the mathematics that simply won't render properly. If you this method on a browser that doesn't support MathML it will simply change the equations to the source LaTeX code.
    • SVG - This uses Scalable Vector Graphics to render the mathematics. Most major browsers support SVG but some older browsers don't so it should only be used on a "modern" browser. It should produce high quality output but has some issues with variable length tables in web pages (in particular they won't resize if the window size is changed).
    • Plain Source - This will simply skip the rendering and only show the LaTeX source code. Note that in some instances on this site that may end up with the LaTeX code for equations that are side by side overlapping and becoming unreadable.
    • Fast Preview - This option is selected by default and will first render the mathematics with Preview HTML before rendering it into final form with the selected method
  • Scale All Math... - This will open a dialog allowing you to scale all the mathematics on the page. Note that you can reduce or expand the mathematics.
• Accessiblity
  • Assistive MathML - I'm not quite sure what this option is to be honest. I believe it allows screen readers to read the mathematics using MathML and is enabled by default.
  • Include in Tab Order - This allows all the mathematics to be selected via the tab button and is enabled by default.
  • Collapsible Math - This enables users to be able to "collapse" certain portions of the mathematics and is not enabled by default.
  • Auto Collapse - This is supposed to auto collapse some of the mathematics so allow for easier fitting into smaller viewports and is not enabled by default.
  • Explorer - This can be activated (by clicking on the Active option at the top of the submenu) and enables a variety of accessibility options
    • Walker - Controls the style of exploration of expressions. It uses the following key bindings.
      • SHIFT+SPACE : Starts the application. This requires focus to be set on the equation (can be set with tab) and some screen readers might need to have have reading mode disabled prior to starting the application.
      • ESC : Stops the application. If the application is restarted it will pick up where it last left off.
      • UP/DOWN : Moves up/down the expression tree. Moving down will start at the left most sub-expression of the level you are on. Reaching the bottom/top of the tree will trigger an aural indicator.
      • LEFT/RIGHT : Move left/right through the expression tree.
      • ENTER : Toggle the collapsed state of the current sub-expression. It will regenerate speech-text upon toggling.
      • SPACE : Get positional information.
    • Highlight - Used to highlight certain complex expressions. Often used when collapsing expressions.
    • Background and Foreground - Sets the appropriate colors when the walker is used for expression exploration.
    • Speech Output - Selecting this will activates the generation of speech output and is enabled by default.
    • Subtitles - Not enabled for this site as there are no videos....
    • Generation - Determines how verbose the speech output should be.
    • Mathspeak and ChromVox Rules - Determines how verbose these screen readers should be.
• Language - This sets the language for the MathJax interface. Note that this does NOT set the language for the text in the site itself. Currently the site is only available in English.
• About MathJax - Opens a dialog box with some basic version information.
• MathJax Help - Opens a dialog box with some very basic help information.

More Info about the change

If you've been using the site for a while you probably know that previously I used images to display the mathematics. When I first started doing this site that was the only really reliable method of displaying mathematics on the web as most browsers just had not reached the point where more sophisticated methods could be used. Things have now progressed to the point where images are not only not needed anymore but in fact produce unacceptable results on some platforms (most notably mobile platforms).

However, because of the decision to use images none of the source material that is used to actually generate the pages on the site are in a form that can easily be used to take advantage of the new tools for displaying mathematics on the web. Because of this I have put off converting to one of the newer tools. Until now. While rewriting the back end of the site to make it more agile and easier to maintain I decided to figure out a way to use the new tools. The results are web pages that should look pretty much the same regardless of platform and because images are no longer being used to display the mathematics pages should load faster and look much better on mobile devices (or at least as well as long math equations are ever going to look on mobile devices anyway....).

An added benefit is that pages should now be readable by anyone needing to use a screen reader. MathJax should be compatible with ChromeVox, Texthelp and JAWS and they are working to add other screen readers.

The only drawback is that, as noted, the original source documents were not in a format that the new technologies can use. So, to generate the pages on the site I first need to use a tool to convert all the mathematics over to LaTeX and while the tool I used generally works fairly well I had to go in and hand edit many of the equations to be "readable" by MathJax. That means that I will, on occasion, miss something and/or errors will slip into the material. If you see an equation that is just gibberish and/or just doesn't look quite right feel free to contact me and I'll take a look at it and see if I can fix it up.