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.org/1998/Math/MathML';
but how to detect support for <mfrac>
and <mtable>
?
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());
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());
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());
In jqmath , I construct a hidden <mfrac>
element and compare its computed height to that of a non-fraction. See the M.checkMathML function in jqmath-0.1.js for actual code. It is complicated 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.
This still does not seem to be straight forward.
http://www.w3.org/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.org/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.org/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
Following this document conforming browsers must implement several properties (aka bindings) for specific MathML elements in the DOM. You can therefore simply create a MathML mtable element and check, if the browser adds, eg, the rowalign
property:
var tmp = document.createElementNS('http://www.w3.org/1998/Math/MathML',
'mtable');
if (tmp.hasOwnProperty('rowalign')) {
return true;
} else {
return false;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.