Skip to content

Instantly share code, notes, and snippets.

@AliGH
Forked from LeaVerou/dabblet.css
Created March 26, 2013 04:39
Show Gist options
  • Save AliGH/5243182 to your computer and use it in GitHub Desktop.
Save AliGH/5243182 to your computer and use it in GitHub Desktop.
MathML with CSS fallback
/**
* 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;
}
<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>
/* 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;
});
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment