My OperaIs the font installed?
Saturday, April 23, 2011 12:46:49 AM
During the rewrite of the cleanPages extension I stumbled over a problem, when I wanted to build in a font selector:
How can I determine, which fonts are installed on the computer?
AFAIK there is no way to retrieve the internal OS font list with an extension, so I had to find a reliable way to test which fonts are installed. There are many approaches to this problem in the web, may be the most famous is the mmmm-width-detection. It works quite good if the fonts have distinctively different m widths - but some are not different enough, so it can give false positives.
Flash works and can read out all installed fonts, but it is a "no go" for an extension, as is Java.
Luckily I don't need to know all installed fonts, but the most common, because the uncommon fonts are either pure decorative fonts, cheap rip-offs with bad quality or not complete enough and - even more luckily - I wrote a detection script for vendor prefixed CSS values some days ago which I could abuse rewrite to do the font detection.
You can test a fully working version of the script with some little extras here or at my private homepage.[/url]
Here is the basic code:
), and with some minor quirks in Mozilla Firefox 4 and Internet Explorer 9 because they (again) don't follow the standards to 100%, even in standards mode. I could not test it with other browsers and I can't test it with Mac or Linux. I would appreciate if you could report it as working with other operating systems or other modern browsers.
Any hints of how to improve it are welcome!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Are these fonts installed?</title>
<style>
body {
width: 95%;
font: 13px/21px 'helvetica neue',arial,sans-serif;
overflow-x: hidden;
margin: 15px auto;
}
#elem p{
font-size:2em;
line-height:1.3em;
margin:0;
padding:0;
}
.dimm {opacity:0.8;}
</style>
</head>
<body>
<div id='elem'>testing</div>
<script>
(function(){
var elem = document.getElementById('elem');
// get the font the browser really uses
var computed = window.getComputedStyle(elem);
// save the original style
var saved = (elem.style.fontFamily.getPropertyValue!=='undefined')?elem.style.fontFamily:'';
var fontList ='';
// array with font names to test against
var theFonts = ['Helvetica', '"Lucida Grande"', 'Tahoma', '"Microsoft Sans Serif"', 'Arial', /* here all the other font names */ ];
for (var i=0,fonts; fonts = theFonts[i++];)
{
elem.style.fontFamily = fonts;
// if the font name is identical with the name of the used font, show a test sentence
if (computed.fontFamily == fonts)
{
fontList += "<p style='font-family:"+fonts+"'>The Quick Brown Fox Jumps Over the Lazy Dog --- "+ fonts +" --- "+ i +"</p>\r\n";
}
//*
else
{
fontList += "<p class='dimm'>Not available --- "+ fonts +" --- "+ i +"</p>\r\n";
}
//*/
}
elem.style.fontFamily = saved;
elem.innerHTML = fontList;
})();
/* License:
(c) 2011 by QuHno
You can do with it what you want except removing the license and | or include it in a library like jQuery, Yui and similar JavaScript libraries.
*/
</script>
</body>
</html>
The compatibility with older browsers is nonexistent, but the code works fine in Opera 11 (off course ), and with some minor quirks in Mozilla Firefox 4 and Internet Explorer 9 because they (again) don't follow the standards to 100%, even in standards mode. I could not test it with other browsers and I can't test it with Mac or Linux. I would appreciate if you could report it as working with other operating systems or other modern browsers.
Any hints of how to improve it are welcome!
metude # Sunday, April 24, 2011 9:44:49 AM
For example: "59/122 is installed in your computer"
QuHno # Sunday, April 24, 2011 12:35:36 PM
metude # Monday, April 25, 2011 9:36:17 AM