I can detect MathML support with:

var e = document.createElement('div');
    e.innerHTML = '<math></math>';
    var mathMLSupported = e.firstChild && "namespaceURI" in e.firstChild && e.firstChild.namespaceURI == '';

but how to detect support for <mfrac> and <mtable> ?

I can detect MathML support with:

var e = document.createElement('div');
    e.innerHTML = '<math></math>';
    var mathMLSupported = e.firstChild && "namespaceURI" in e.firstChild && e.firstChild.namespaceURI == 'http://www.w3/1998/Math/MathML';

but how to detect support for <mfrac> and <mtable> ?

• javascript
• mathml

• You need to put ` qoutes around HTML tags or they'll get filtered out. :) – mrbellek Commented Jan 28, 2011 at 10:18
• i need TRUE result for Firefox 4 – Victor Commented Jan 28, 2011 at 11:14
• This does not work. It returns true in Chrome, which doesn’t support MathML. – Lea Verou Commented Mar 21, 2013 at 14:08

4 Answers 4

With Element#getBoundingClientRect

function hasMathMLSupport() {
  const div = document.createElement("div");
  div.innerHTML = '<math><mfrac><mn>1</mn><mn>2</mn></mfrac></math>' +
                  '<math><mn>1</mn></math>';
  document.body.appendChild(div);
  return div.firstElementChild.firstElementChild.getBoundingClientRect().height > div.lastElementChild.firstElementChild.getBoundingClientRect().height + 1;
}

console.log(hasMathMLSupport());

With window.getComputedStyle

(does not work in Mi Browser in Night Mode as it changes color to rgba(255, 255, 255, 0.5))

function hasMathMLSupport() {
  const div = document.createElement("div");
  div.innerHTML = '<math><mrow mathcolor=\"red\"><mn>1</mn></mrow></math>';
  document.body.appendChild(div);
  return window.getComputedStyle(div.firstChild.firstChild, null).color === "rgb(255, 0, 0)";
}

console.log(hasMathMLSupport());

With Element.querySelector(":link"): (Safari 10+, Firefox ?+)

function hasMathMLSupport() {
  const div = document.createElement("div");
  div.innerHTML = '<math><mrow href=\"https://ya.ru\"><mn>1</mn></mrow></math>';
  document.body.appendChild(div);
  return !!div.querySelector(":link");
}

console.log(hasMathMLSupport());

With window.MathMLElement != null (the interface was added in MathML 4 spec)

In jqmath, I construct a hidden <mfrac> element and pare its puted height to that of a non-fraction. See the M.checkMathML function in jqmath-0.1.js for actual code. It is plicated a bit by trying to work with or without XML namespaces (depending on the browser), and allowing for a namespace prefix for the MathPlayer plugin for Internet Explorer.

Following this document conforming browsers must implement several properties (a.k.a. bindings) for specific MathML elements in the DOM. You can therefore simply create a MathML mtable element and check, if the browser adds, e.g., the rowalign property:

var tmp = document.createElementNS('http://www.w3/1998/Math/MathML',
                                   'mtable');
if (tmp.hasOwnProperty('rowalign')) {
  return true;
} else {
  return false;
}

This still does not seem to be straight forward.

http://www.w3/TR/MathML2/chapter8.html

Support for the MathML Document Object Model may be queried by calling the DOMImplementation::hasFeature method with the test string "org.w3c.dom.mathml"

This implies a simple test however Chrome and IE support this through plug ins, but Chrome returns true even when it has no plug-in

My solution is to use the w3c spec but correct for cases where the browser [chrome] has to opposite response. Then I can use MathJax if necessary, which is always, except for firefox. The script goes in the html < head > section

<script type="text/javascript">

  //Browser detector for Chrome
  //returns true if the Browser is Chrome
  function isChrome(){
    var regex = /Chrome\/[0-9]{1,2}\.[0-9]/
    var matches = navigator.userAgent.match(regex)
    //console.log( matches )
    return (matches!=null && matches.length==1)
  }

  /*
   *  Feature Detect for MathML as w3c specification
   *  <returns>boolean: true if mathML is supported in browser
   */
  function hasFeatureMathML(){
    MATHML_FEATURE = "org.w3c.dom.mathml"     //as per w3c specification
    MATHML_FEATURE_VERSION = "2.0"            //Any version number appears to work
    if(isChrome()) return false               //Opps Chrome not natively supported yet
    return document.implementation.hasFeature(MATHML_FEATURE, MATHML_FEATURE_VERSION )
  }

  /*
   * init MathML use MathJax according to
   *     http://docs.mathjax/en/latest/dynamic.html
   * with additional test to confirm necessity
   * <returns>boolean: true if mathML is supported in browser
   */
  function initMathML(){
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src  = "http://cdn.mathjax/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML";

    //doctorBob added test on next line, return if has native support for MathML
    if( hasFeatureMathML() ) return true

    document.getElementsByTagName("head")[0].appendChild(script)
    return false
  }

  //initialize in html <head> incase MathJax is required
  var browserHasMathML = initMathML()
  if( !browserHasMathML )console.log("No Native MathML using MathJax")

</script>

I didn't really look into installing the browser plugins, because not everyone has them installed. This works in IE 8, Chrome 39, Firefox 38, Komodo Edit 6