MathML with CSS fallback

dabblet.css

/**
 * MathML with CSS fallback
 */

math {
	font-family: 'Cambria Math', Cambria, MathJax_Main, 
	             STIXGeneral, DejaVu Serif, DejaVu Sans, 
	             Times, Lucida Sans Unicode, OpenSymbol,
	             Standard Symbols L, serif;
}

math[display=block] {
	display: block;
	margin: 1em 0;
	text-align: center;
}

	.no-mathml math msub > mrow,
	.no-mathml math msub > mi:last-child {
		vertical-align: sub;
		font-size: 65%;
	}
	
	.no-mathml math mfrac {
		display: inline-block;
		vertical-align: middle;
		text-align: center;
	}
		
		.no-mathml math mfrac > mrow:first-of-type {
			border-bottom: .08em solid;
		}
	
		.no-mathml math mfrac > mrow {
			display: block;
		}
		
.mathml .no-mathml,
.no-mathml .mathml {
	display: none;
}

body {
	font-size: 160%;
	padding: 20px 0;
	text-align: center;
}

p {
	margin-top: 4em;
	font: 60% sans-serif;
}

dabblet.html

<math display="block">
	<mrow>
		<msub>
			<mi>r&prime;</mi>
			<mi>top-left</mi>
		</msub>
		<mo>=</mo>
		<mi>min</mi>
		<mo>(</mo>
		<msub>
			<mi>r</mi>
			<mrow>
				<mi>top-left</mi>
			</mrow>
		</msub>
		<mo>,</mo>
		<mi>width</mi>
		<mo>&times;</mo>
		<mfrac>
			<mrow>
				<msub>
					<mi>r</mi>
					<mi>top-left</mi>
				</msub>
			</mrow>
			<mrow>
				<msub>
					<mi>r</mi>
					<mi>top-left</mi>
				</msub>
				<mo>+</mo>
				<msub>
					<mi>r</mi>
					<mi>top-right</mi>
				</msub>
			</mrow>
		</mfrac>
		<mo>)</mo>
	</mrow>
</math>
<p>
	Your browser 
	<strong class="mathml">supports</strong>
	<strong class="no-mathml">does NOT support</strong>
	MathML natively
</p>

dabblet.js

/* Modernizr 2.6.2 (Custom Build) | MIT & BSD
 * Build: http://modernizr.com/download/#-cssclasses-mathml
 */

window.Modernizr = (function( window, document, undefined ) {

    var version = '2.6.2',

    Modernizr = {},

    enableClasses = true,

    docElement = document.documentElement,

    mod = 'modernizr',
    modElem = document.createElement(mod),
    mStyle = modElem.style,

    inputElem  ,


    toString = {}.toString,    tests = {},
    inputs = {},
    attrs = {},

    classes = [],

    slice = classes.slice,

    featureName,



    _hasOwnProperty = ({}).hasOwnProperty, hasOwnProp;

    if ( !is(_hasOwnProperty, 'undefined') && !is(_hasOwnProperty.call, 'undefined') ) {
      hasOwnProp = function (object, property) {
        return _hasOwnProperty.call(object, property);
      };
    }
    else {
      hasOwnProp = function (object, property) { 
        return ((property in object) && is(object.constructor.prototype[property], 'undefined'));
      };
    }


    if (!Function.prototype.bind) {
      Function.prototype.bind = function bind(that) {

        var target = this;

        if (typeof target != "function") {
            throw new TypeError();
        }

        var args = slice.call(arguments, 1),
            bound = function () {

            if (this instanceof bound) {

              var F = function(){};
              F.prototype = target.prototype;
              var self = new F();

              var result = target.apply(
                  self,
                  args.concat(slice.call(arguments))
              );
              if (Object(result) === result) {
                  return result;
              }
              return self;

            } else {

              return target.apply(
                  that,
                  args.concat(slice.call(arguments))
              );

            }

        };

        return bound;
      };
    }

    function setCss( str ) {
        mStyle.cssText = str;
    }

    function setCssAll( str1, str2 ) {
        return setCss(prefixes.join(str1 + ';') + ( str2 || '' ));
    }

    function is( obj, type ) {
        return typeof obj === type;
    }

    function contains( str, substr ) {
        return !!~('' + str).indexOf(substr);
    }


    function testDOMProps( props, obj, elem ) {
        for ( var i in props ) {
            var item = obj[props[i]];
            if ( item !== undefined) {

                            if (elem === false) return props[i];

                            if (is(item, 'function')){
                                return item.bind(elem || obj);
                }

                            return item;
            }
        }
        return false;
    }
    for ( var feature in tests ) {
        if ( hasOwnProp(tests, feature) ) {
                                    featureName  = feature.toLowerCase();
            Modernizr[featureName] = tests[feature]();

            classes.push((Modernizr[featureName] ? '' : 'no-') + featureName);
        }
    }



     Modernizr.addTest = function ( feature, test ) {
       if ( typeof feature == 'object' ) {
         for ( var key in feature ) {
           if ( hasOwnProp( feature, key ) ) {
             Modernizr.addTest( key, feature[ key ] );
           }
         }
       } else {

         feature = feature.toLowerCase();

         if ( Modernizr[feature] !== undefined ) {
                                              return Modernizr;
         }

         test = typeof test == 'function' ? test() : test;

         if (typeof enableClasses !== "undefined" && enableClasses) {
           docElement.className += ' ' + (test ? '' : 'no-') + feature;
         }
         Modernizr[feature] = test;

       }

       return Modernizr; 
     };


    setCss('');
    modElem = inputElem = null;


    Modernizr._version      = version;

    docElement.className = docElement.className.replace(/(^|\s)no-js(\s|$)/, '$1$2') +

                                                    (enableClasses ? ' js ' + classes.join(' ') : '');

    return Modernizr;

})(this, this.document);


  // MathML
  // http://www.w3.org/Math/
  // By Addy Osmani
  // Based on work by Davide (@dpvc) and David (@davidcarlisle)
  // in https://github.com/mathjax/MathJax/issues/182

  Modernizr.addTest('mathml', function() {
    // Hack to make sure that the body exists
    // TODO:: find a more reasonable method of
    // doing this.


        var hasMathML = false;
        if ( document.createElementNS ) {
          var ns = "http://www.w3.org/1998/Math/MathML";
          var div = document.createElement("div");

          div.style.position = "absolute";

          var mfrac = div.appendChild(document.createElementNS(ns,"math"))
                         .appendChild(document.createElementNS(ns,"mfrac"));

          mfrac.appendChild(document.createElementNS(ns,"mi"))
               .appendChild(document.createTextNode("xx"));

          mfrac.appendChild(document.createElementNS(ns,"mi"))
               .appendChild(document.createTextNode("yy"));

          document.body.appendChild(div);

          hasMathML = div.offsetHeight > div.offsetWidth;

          // Clean up the element
          document.body.removeChild(div);
        }
        return hasMathML;

  });

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}