<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>rel=me &#187; fonts</title>
	<atom:link href="http://rel.me/t/fonts/feed/" rel="self" type="application/rss+xml" />
	<link>http://rel.me</link>
	<description>programming, objective-c, cocoa, iphone, c</description>
	<lastBuildDate>Mon, 02 Aug 2010 20:09:36 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Font detection with Javascript and Flash</title>
		<link>http://rel.me/2008/06/26/font-detection-with-javascript-and-flash/</link>
		<comments>http://rel.me/2008/06/26/font-detection-with-javascript-and-flash/#comments</comments>
		<pubDate>Thu, 26 Jun 2008 22:08:00 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[fonts]]></category>

		<guid isPermaLink="false">/2008/06/26/font-detection-with-javascript-and-flash</guid>
		<description><![CDATA[I was playing around with jquery and I wanted to see if it was possible to generate a cheat sheet of all the fonts on your system. Its also a good run through of how to load a SWF with a callback. View a demo (Though, its possible it might not work) The steps I [...]]]></description>
			<content:encoded><![CDATA[<p>I was playing around with jquery and I wanted to see if it was possible to generate a cheat sheet of all the fonts on your system. Its also a good run through of how to load a SWF with a callback.</p>
<p><img src="http://font-detect.s3.amazonaws.com/font-detect.png" alt="" width="583" height="335" /></p>
<p><a href="http://font-detect.s3.amazonaws.com/index.html">View a demo</a> (Though, its possible it might not <a href="http://www.codinghorror.com/blog/images/works-on-my-machine-starburst.png">work</a>)</p>
<p>The steps I used to generate this are:</p>
<ul>
<li>Load SWF</li>
<li>Javascript calls to Actionscript fonts() method via <code>ExternalInterface</code></li>
<li>Get the list of system fonts in Flash via <code>Font.enumerateFonts(true)</code></li>
<li>Curse Flash for giving you a list of font names, where half of them are garbage.</li>
<li>For each font name, in javascript, create a test which adds a DOM element temporarily with a fallback font family set. For example, <code>font-family: 'Apple Garamond Pro', 'Times New Roman';</code>, where Times New Roman is your fallback.</li>
<li>Then check the actual width (via offsetWidth). If it does not match the offsetWidth of the fallback font, then we know it rendered ok. (The original idea is from <a href="http://www.lalit.org/lab/javascript-css-font-detect">http://www.lalit.org/lab/javascript-css-font-detect</a>)</li>
</ul>
<p>The only caveat is, if the actual font width and the fallback font width do match, then you would have a false negative. So its not bulletproof.</p>
<p>The actionscript to enumerate the fonts and call back out is pretty simple:<br />
<script src="http://gist.github.com/138691.js"></script><br />
Expose the method in the constructor using ExternalInterface:<br />
<script src="http://gist.github.com/138692.js"></script><br />
<a href="http://github.com/gabriel/font-detect-js/tree/master/flash/src/FontList.as">FontList.as</a></p>
<p>I used swfobject to load the SWF. Also be sure to enable <code>allowScriptAccess</code>.</p>
<p>The javascript to test the fonts is at: <a href="http://github.com/gabriel/font-detect-js/tree/master/javascripts/font-detect.js">font-detect.js</a></p>
<p>You can use it by including:</p>
<p><script src="http://gist.github.com/138690.js"></script></p>
<p>In the end, I don&#8217;t think this is useful in practice, but I thought I would share anyway. Its on <a href="http://github.com/gabriel/font-detect-js/tree/master">github</a> too.</p>
<p><strong>Updated:</strong> Now uses call straight to actionscript, doesn&#8217;t marshall JSON first so its much faster, and other refactoring.</p>
]]></content:encoded>
			<wfw:commentRss>http://rel.me/2008/06/26/font-detection-with-javascript-and-flash/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
