Fallback to html-css if svg not supported

Question

I'm using MathJax to render mathml markup in the browser. I have it working fine in Chrome using the TeX-AMS-MML_SVG config, but this doesn't work in IE8.

If I switch to TeX-AMS-MML_HTMLorMML it works fine in all browsers. However the SVG rendering looks much better, so where possible i'd like that to be preferred.

Does MathJax have anything built in to support this? It seems it can fallback from MML to HTML but not SVG to HTML. I could check for SVG support via javascript, but i'm hoping there's something already in the MathJax config i'm missing.

Here's the documentation on common configurations. I'm looking for something like a MML_SVGorHTML config.

Answer 1

See the discussion on the MathJax User's Forum that describes a way to do it. Basically,

    <script type="text/x-mathjax-config">
    if (MathJax.Hub.Browser.isMSIE && (document.documentMode||0) < 9) {
      MathJax.Hub.Register.StartupHook("End Config",function () {
        var settings = MathJax.Hub.config.menuSettings;
        if (!settings.renderer) {settings.renderer = "HTML-CSS"}
      });
    }
    </script>

takes care of older versions of IE, which are about the only browsers that don't do SVG any at this point.

Answer 2

I'm currently in the process of testing this method, which is manually checking for svg support:

function supportsSvg() {
    return !!document.createElementNS && 
        !!document.createElementNS('http://www.w3.org/2000/svg', "svg").createSVGRect;
}

var mathjaxConfig = (supportsSvg()) ? 'TeX-AMS-MML_SVG' : 'MML_HTMLorMML';

Then you can insert the mathjaxConfig as normal into the url:

"../MathJax.js?config=" + mathjaxConfig

Answer 3

You can use Walter Zorn's drawing library. It renders everything as DIVs.