/*
** This JavaScript code is inspired by the css_browser_selector script written by Rafael Lima
** and the font detector script written by Lalit Patel, though it is completely rewritten by
** Christopher Kolb.
**
** CSS Browser Selector v0.3.1
** Rafael Lima (http://rafael.adm.br)
** http://rafael.adm.br/css_browser_selector
** License: http://creativecommons.org/licenses/by/2.5/
** Contributors: http://rafael.adm.br/css_browser_selector#contributors
**
** Unnamed v0.1
** Lalit Patel
** http://www.lalit.org/lab/jsoncookies
** License: http://creativecommons.org/licenses/by-sa/2.5/
**
** USAGE
** 1. Copy and paste the line above, inside and tag
**
**
**
** 2. Set CSS attributes with the code of each font family you want to detect.
**
** Examples:
**
** html.has_times_new_roman_font_family div#header { font-size: 14pt; }
** .has_no_zapfino_font_family { font-family: "Times New Roman"; }
**
** Class selector names are of the form "has_" + name of font family + "_font_family" if
** the font family is present, or "has_no_" + name of font family + "_font_family" if the
** font family is not present. The name of the font family is in all lower case with all
** spaces converted to underscores.
**
** 3. Call css_font_family_selector(font, alternateFont) with being the name of the
** font family that you are looking for and the name of a generic font
** family (cursive, fantasy, monospace, sans-serif, serif) that is least likely
** to be a member of, and where the default for that generic font is least likely to have
** the same height and width.
*/
/*
** Create globals so that we can cache the results from a comparison in case we include this file
** from multiple places in our HTML.
*/
var _css_font_family_selector_cache;
function css_font_family_selector(font, alternateFont) {
var className;
var hasFontClassName = 'has_' + font.toLowerCase().replace(/ /, '_') + '_font_family';
var hasNoFontClassName = 'has_no_' + font.toLowerCase().replace(/ /, '_') + '_font_family';
/* If this is the first time thet we have been called, then initialize */
if (_css_font_family_selector_cache == null)
_css_font_family_selector_cache = new Object();
/* If we have seen this combination of font and alternateFont, then lookup the previous result */
if (_css_font_family_selector_cache[hasFontClassName])
className = _css_font_family_selector_cache[hasFontClassName];
else if (_css_font_family_selector_cache[hasNoFontClassName])
className = _css_font_family_selector_cache[hasNoFontClassName];
/* Determine if the browser has access to the font */
else {
var body = document.getElementsByTagName("BODY")[0];
var bodyDiv = document.createElement("DIV");
var bodyDivSpan = document.createElement("SPAN");
/* Create a sandbox to play in */
bodyDiv.appendChild(bodyDivSpan);
body.appendChild(bodyDiv);
/* Setup some defaults for the comparison */
bodyDivSpan.style.fontSize = "72px";
bodyDivSpan.innerHTML = "mmmmmmmmmml";
/* Set font-family to and measure CSS box */
bodyDivSpan.style.fontFamily = bodyDiv.style.fontFamily = alternateFont;
alternateFontHeight = bodyDivSpan.offsetHeight;
alternateFontWidth = bodyDivSpan.offsetWidth;
/* Set font-family to with graceful fallback to and measure CSS box */
bodyDivSpan.style.fontFamily = bodyDiv.style.fontFamily = font + ', ' + alternateFont;
fontHeight = bodyDivSpan.offsetHeight;
fontWidth = bodyDivSpan.offsetWidth;
/* Remove the sandbox */
body.removeChild(bodyDiv);
/*
** If the CSS box dimensions were the same then is not available and the browser fell back to the .
** Otherwise, if the dimensions are different then the font is supported. This assumes that we were smart about which
** we used compare against.
*/
className = (alternateFontHeight != fontHeight || alternateFontWidth != fontWidth) ? hasFontClassName : hasNoFontClassName;
/* Cache the results in case we are asked about these two fonts again */
_css_font_family_selector_cache[className] = className;
/* Add the className to the class name of the HTML element */
document.getElementsByTagName("HTML")[0].className += ' ' + className; /* */
/* $$("html")[0].className += ' ' + className; /* */
/* alert(alternateFont + ' vs ' + font + ', ' + alternateFontHeight + ' vs ' + fontHeight + ', ' + alternateFontWidth + ' vs ' + fontWidth + ', ' + className); /* */
/* alert(document.getElementsByTagName("HTML")[0].className); /* */
}
return className;
}