3 ms·
Inspired by the idea of the "average font", I whipped up a quick scramble suit bookmarklet: javascript:/*ScrableSuit*/var __slice=Array.prototype.slice;var
by Cushman 15y ago
Inspired by the idea of the "average font", I whipped up a quick scramble suit bookmarklet:
javascript:/*ScrableSuit*/var __slice=Array.prototype.slice;var __hasProp=Object.prototype.hasOwnProperty;var __bind=function(fn,me){return function(){return fn.apply(me,arguments)}};var __extends=function(child,parent){for(var key in parent){if(__hasProp.call(parent,key))child[key]=parent[key]}function ctor(){this.constructor=child}ctor.prototype=parent.prototype;child.prototype=new ctor;child.__super__=parent.prototype;return child};var __indexOf=Array.prototype.indexOf||function(item){for(var i=0,l=this.length;i<l;i++){if(this[i]===item)return i}return-1};(function(){var Detector=function(){var baseFonts=['monospace','sans-serif','serif'];var testString="mmmmmmmmmmlli";var testSize='72px';var h=document.getElementsByTagName("body")[0];var s=document.createElement("span");s.style.fontSize=testSize;s.innerHTML=testString;var defaultWidth={};var defaultHeight={};for(var index in baseFonts){s.style.fontFamily=baseFonts[index];h.appendChild(s);defaultWidth[baseFonts[index]]=s.offsetWidth;defaultHeight[baseFonts[index]]=s.offsetHeight;h.removeChild(s)}function detect(font){var detected=false;for(var index in baseFonts){s.style.fontFamily=font+','+baseFonts[index];h.appendChild(s);var matched=(s.offsetWidth!=defaultWidth[baseFonts[index]]||s.offsetHeight!=defaultHeight[baseFonts[index]]);if(matched&&s.offsetHeight-defaultHeight[baseFonts[index]]>20)matched=false;h.removeChild(s);detected=detected||matched}return detected}this.detect=detect};var detector,font,fontFamilies,letterTags,randomFont,scramble,traverseElement,_i,_len,_ref;letterTags=[];fontFamilies=[];detector=new Detector;detector.checkFont=function(font){if(this.detect(font)){return fontFamilies.push(font)}};_ref="serif\nAdobe Jenson\nAdobe Text\nAlbertus\nAldus\nAlexandria\nAlgerian\nAmerican Typewriter\nAntiqua\nArno\nAster\nAurora\nNews 706\nBaskerville\nBell\nBembo\nBembo Schoolbook\nBenguiat\nBerkeley Old Style\nBernhard Modern\nBodoni\nBauer Bodoni\nBook Antiqua\nBookman\nBordeaux Roman\nCalifornian FB\nCalisto\nCalvert\nCapitals\nCambria\nCartier\nCaslon\nWyld\nCaslon Antique\nFifteenth Century\nCatull\nCentaur\nCentury Old Style\nCentury Schoolbook\nNew Century Schoolbook\nCentury Schoolbook Infant\nChaparral\nCharis SIL\nCheltenham\nClarendon\nClearface\nCochin\nColonna\nComputer Modern\nConcrete Roman\nConstantia\nCooper Black\nCorona\nNews 705\nDejaVu Serif\nEcotype\nElephant\nEspy Serif\nExcelsior\nNews 702\nFairfield\nFF Scala\nFolkard\nFootlight\nFreeSerif\nFriz Quadrata\nGaramond\nGentium\nGeorgia\nGloucester\nGoudy Old Style\nGoudy\nGoudy Schoolbook\nGoudy Pro Font\nGranjon\nHeather\nHercules\nHigh Tower Text\nHiroshige\nHoefler Text\nHumana Serif\nImprint\nIonic No. 5\nNews 701\nJanson\nJenson\nJoanna\nKorinna\nLegacy Serif\nLexicon\nLiberation Serif\nLinux Libertine\nLiteraturnaya\nLucida Bright\nMelior\nMemphis\nMiller\nMinion\nModern\nMona Lisa\nMrs Eaves\nMS Serif\nNew York\nNimbus Roman\nNPS Rawlinson Roadway\nOCR A Exteneded\nPalatino\nBook Antiqua\nPerpetua\nPlantin\nPlantin Schoolbook\nPlaybill\nPoor Richard\nRawlinson Roadway\nRenault\nRequiem\nRockwell\nRoman\nRotis Serif\nSabon\nScala\nSeagull\nSistina\nSouvenir\nSTIX, see also XITS\nStone Informal\nStone Serif\nSylfaen\nTimes New Roman\nTimes\nTrajan\nTrinité\nTrump Mediaeval\nUtopia\nVale Type\nVera Serif\nVersailles\nWanted\nWeiss\nWide Latin\nWindsor\nXITS\nSlab serif\nApex\nCity\nCholla Slab\nEgyptienne\nGuardian Egyptian\nMuseo Slab\nRockwell\nNilland\nSans serif\nAbadi\nAgency FB\nAkzidenz Grotesk\nAptifer\nArial\nArial Unicode MS\nAvant Garde Gothic\nAvenir\nBank Gothic\nBarmeno\nBauhaus\nBell Centennial\nBell Gothic\nBenguiat Gothic\nBerlin Sans\nBeteckna\nBlue Highway\nCafeteria\nCalibri\nCentury Gothic\nCharcoal\nChicago\nClearface Gothic\nClearview\nCo Headline\nCo Text\nCorbel\nCoolvetica\nDax\nDejaVu Sans\nDotum\nDroid\nEcofont\nEras\nEspy Sans\nNu Sans\nEurocrat\nEurostile\nSquare 721\nFF Meta\nFF Scala Sans\nFlama\nFormata\nFreeSans\nFranklin Gothic\nFrutiger\nFrutiger Next\nFutura\nGeneva\nGill Sans\nGill Sans Schoolbook\nGotham\nHandel Gothic\nDenmark\nHaettenschweiler\nHelvetica\nHelvetica Neue\nSwiss 721\nHighway Gothic\nHiroshige Sans\nHobo\nImpact\nIndustria\nInterstate\nJohnston\nNew Johnston\nKabel\nLegacy Sans\nLiberation Sans\nLucida Sans\nMeiryo\nMicrogramma\nModern\nMotorway\nMS Sans Serif\nMuseo Sans\nMyriad\nNeutraface\nNews Gothic\nNimbus Sans L\nNina\nOptima\nParisine\nPricedown\nPrima Sans\nPT Sans\nRail Alphabet\nRevue\nRotis Sans\nScala Sans\nSegoe UI\nSkia\nSouvenir Gothic\nStone Sans\nSyntax\nTahoma\nTiresias\nTrade Gothic\nTransport\nTrebuchet\nTrump Gothic\nTw Cen\nTwentieth Century\nUbuntu\nUnivers\nZurich\nVera Sans\nVerdana\nVirtue\nSemi-serif\nAmsterdam Old Style\nDivona\nNyala\nPortobello\nRotis Semi Serif\nTema Cantante\nMonospaced\nAndale Mono\nArial Monospaced\nBitstream Vera\nConsolas\nCourier\nCourierHP\nCourier New\nCourierPS\nFontcraft Courier\nDejaVu Sans Mono\nDroid Sans Mono\nEverson Mono \nEverson Mono Unicode\nFedra Mono\nFixed\nFixedsys\nFixedsys Excelsior\nInconsolata\nHyperFont\nLetter Gothic\nLiberation Mono\nLucida Console\nLucida Sans Typewriter\nLucida Typewriter\nMICR\nMenlo\nMiriam Fixed\nMonaco\nMonofur\nMonospace\nMS Gothic\nMS Mincho\nNimbus Mono L\nOCR-A\nOCR-B\nOrator\nOrmaxx\nPragmataPro\nPrestige Elite also known as Prestige\nProFont\nProggy Programming Fonts\nSmall Fonts\nSydnie\nTerminal\nTerminus\nTex Gyre Cursor\nUM Typewriter\nUbuntu Mono\nVera Sans Mono\nWilliam Monospace\nBrush Scripts\nBalloon\nBrush Script\nDragonwick\nChoc\nDom Casual\nMistral\nPapyrus\nSegoe Script\nTempus Sans\nUtopia\nYear Supply of Fairy Cakes\nCalligraphic\nAmazone\nAMS Euler\nApple Chancery\nAquiline\nAristocrat\nBickley Script\nCivitype\nCodex\nEdwardian Script\nForte\nFrench Script\nKuenstler Script\nMonotype Corsiva\nOld English Text MT\nPalace Script\nPark Avenue\nScriptina\nShelley Volante\nVivaldi\nVladimir Script\nZapf Chancery\nZapfino\nHandwriting\nAndy\nAshley Script\nChalkboard\nComic Sans\nCézanne\nDom Casual\nFontoon\nJefferson\nKristen\nLucida Handwriting\nRage Italic\nRufscript\nScribble\nSoupbone\nTekton\nOther script\nCinderella\nCupola\nCurlz\nMagnificat\nScript\nStone Informal\nBlackletter\nAmerican Text\nCloister Black\nFraktur\nGoudy Text\nLucida Blackletter\nDingbat Symbol fonts\nApple Symbols\nBookshelf Symbol 7\nCambria Math\nCommercial Pi\nComputer Modern\nCorel\nHM Phonetic\nLucida Math\nMathematical Pi\nOpenSymbol\nSymbol\nSymbolPS\nWingdings\nWingdings 2\nWingdings 3\nWebdings\nZapf Dingbats\nDisplay Decorative fonts\nAbracadabra\nAd Lib\nAllegro\nAndreas\nArnold Böcklin\nAstur\nBalloon Pop Outlaw Black\nBanco\nBauhaus\nBeat\nBraggadocio\nBroadway\nCaslon Antique\nChiller\nCooper Black\nCurlz\nEllington\nExocet\nFIG Script\nForte\nGigi\nHarlow Solid\nHarrington\nHorizon\nJim Crow\nJokerman\nJuice\nLo-Type\nMagneto\nMegadeth\nNeuland\nPeignot\nSimulation Mimicry fonts\nBagel\nLithos\nPapyrus\nSkia\nMiscellaneous\n3x3\n8514oem\nAshley Inline\nBraggadocio\nContinuum Medium\nFixedsys\nGrasset\nKahana\nLED\nPythagoras\nSystem\nTema Cantante\nTerminal\nWestminster".split('\n');for(_i=0,_len=_ref.length;_i<_len;_i++){font=_ref[_i];detector.checkFont(font)}traverseElement=function(parent){var child,letter,text,_j,_k,_len1,_len2,_ref1,_ref2,_results,_results1;if((_ref1=parent.tagName)==='SCRIPT'){}else if(parent.childElementCount>0){_ref2=parent.children;_results=[];for(_j=0,_len1=_ref2.length;_j<_len1;_j++){child=_ref2[_j];_results.push(traverseElement(child))}return _results}else if(parent.innerText.length>0){text=parent.innerText;parent.innerHTML='';_results1=[];for(_k=0,_len2=text.length;_k<_len2;_k++){letter=text[_k];child=document.createElement('span');child.innerText=letter;child.style.fontSize=parent.style.fontSize;parent.appendChild(child);_results1.push(letterTags.push(child))}return _results1}};traverseElement(document.body);randomFont=function(){return fontFamilies[Math.floor((Math.random()*1000000)%fontFamilies.length)]};scramble=function(){var tag,_j,_len1,_results;_results=[];for(_j=0,_len1=letterTags.length;_j<_len1;_j++){tag=letterTags[_j];_results.push(tag.style.fontFamily=randomFont())}return _results};return setInterval(scramble,100)}).call(this);
This splits the whole page up into 1-character <span>s, and randomizes the font on each one every 100ms. The result is surprisingly readable-- and not at all guaranteed not to crash your browser, I don't recommend trying it on any page more complex than the HN frontpage.
Original CoffeeScript source: https://gist.github.com/2473373 https://gist.github.com/2473373