Scrable Suit

scrablesuit.coffee

doctype 5
html ->
  head ->
    title 'Scramblesuit'
  body ->
    p ->
      """http://iotic.com/averia/:
      This is the story of the creation of a new font, Avería: the average of all the fonts on my computer. The field of typography has long fascinated me, and I love playing with creative programming ideas, so it was perhaps inevitable that the idea came to me one day of “generative typography”. A Google on the subject brought up little, and I put the idea to the back of my mind until it occurred to me that perhaps the process of averaging, or interpolating, existing fonts might bring up interesting results. Luckily at this point I didn't do any more web searching – instead I grabbed my laptop and came up with an initial idea for finding what the average of all my fonts might look like – by overlaying each letter at low opacity. The results can be seen in the below image.
      """
    coffeescript ->
      # Inline this JS file for the bookmarklet:
      `/** """ <- github's coffeescript coloring doesn't understand `
 * JavaScript code to detect available availability of a
 * particular font in a browser using JavaScript and CSS.
 *
 * Author : Lalit Patel
 * Website: http://www.lalit.org/lab/javascript-css-font-detect/
 * License: Apache Software License 2.0
 *          http://www.apache.org/licenses/LICENSE-2.0
 * Version: 0.15 (21 Sep 2009)
 *          Changed comparision font to default from sans-default-default,
 *          as in FF3.0 font of child element didn't fallback
 *          to parent element if the font is missing.
 * Version: 0.2 (04 Mar 2012)
 *          Comparing font against all the 3 generic font families ie,
 *          'monospace', 'sans-serif' and 'sans'. If it doesn't match all 3
 *          then that font is 100% not available in the system
 * Version: 0.3 (24 Mar 2012)
 *          Replaced sans with serif in the list of baseFonts
 */
 
 * Patched by Adrian Cushman to reject fonts that are too tall.

/**
 * Usage: d = new Detector();
 *        d.detect('font name');
 */
var Detector = function() {
    // a font will be compared against all the three default fonts.
    // and if it doesn't match all 3 then that font is not available.
    var baseFonts = ['monospace', 'sans-serif', 'serif'];

    //we use m or w because these two characters take up the maximum width.
    // And we use a LLi so that the same matching fonts can get separated
    var testString = "mmmmmmmmmmlli";

    //we test using 72px font size, we may use any size. I guess larger the better.
    var testSize = '72px';

    var h = document.getElementsByTagName("body")[0];

    // create a SPAN in the document to get the width of the text we use to test
    var s = document.createElement("span");
    s.style.fontSize = testSize;
    s.innerHTML = testString;
    var defaultWidth = {};
    var defaultHeight = {};
    for (var index in baseFonts) {
        //get the default width for the three base fonts
        s.style.fontFamily = baseFonts[index];
        h.appendChild(s);
        defaultWidth[baseFonts[index]] = s.offsetWidth; //width for the default font
        defaultHeight[baseFonts[index]] = s.offsetHeight; //height for the defualt font
        h.removeChild(s);
    }

    function detect(font) {
        var detected = false;
        for (var index in baseFonts) {
            s.style.fontFamily = font + ',' + baseFonts[index]; // name of the font along with the base font for fallback.
            h.appendChild(s);
            var matched = (s.offsetWidth != defaultWidth[baseFonts[index]] || s.offsetHeight != defaultHeight[baseFonts[index]]);
            // Modified here to reject 
            if (matched && s.offsetHeight - defaultHeight[baseFonts[index]] > 50)
              matched = false;
            h.removeChild(s);
            detected = detected || matched;
        }
        return detected;
    }

    this.detect = detect;
};
/* """ */
`
      letterTags = []
      fontFamilies = []

      detector = new Detector
      detector.checkFont=(font)->
        if @detect font
          fontFamilies.push font

      # big list of font names taken from http://en.wikipedia.org/wiki/List_of_typefaces
      detector.checkFont(font) for font in """
  serif
Adobe Jenson
Adobe Text
Albertus
Aldus
Alexandria
Algerian
American Typewriter
Antiqua
Arno
Aster
Aurora
News 706
Baskerville
Bell
Bembo
Bembo Schoolbook
Benguiat
Berkeley Old Style
Bernhard Modern
Bodoni
Bauer Bodoni
Book Antiqua
Bookman
Bordeaux Roman
Californian FB
Calisto
Calvert
Capitals
Cambria
Cartier
Caslon
Wyld
Caslon Antique
Fifteenth Century
Catull
Centaur
Century Old Style
Century Schoolbook
New Century Schoolbook
Century Schoolbook Infant
Chaparral
Charis SIL
Cheltenham
Clarendon
Clearface
Cochin
Colonna
Computer Modern
Concrete Roman
Constantia
Cooper Black
Corona
News 705
DejaVu Serif
Ecotype
Elephant
Espy Serif
Excelsior
News 702
Fairfield
FF Scala
Folkard
Footlight
FreeSerif
Friz Quadrata
Garamond
Gentium
Georgia
Gloucester
Goudy Old Style
Goudy
Goudy Schoolbook
Goudy Pro Font
Granjon
Heather
Hercules
High Tower Text
Hiroshige
Hoefler Text
Humana Serif
Imprint
Ionic No. 5
News 701
Janson
Jenson
Joanna
Korinna
Legacy Serif
Lexicon
Liberation Serif
Linux Libertine
Literaturnaya
Lucida Bright
Melior
Memphis
Miller
Minion
Modern
Mona Lisa
Mrs Eaves
MS Serif
New York
Nimbus Roman
NPS Rawlinson Roadway
OCR A Exteneded
Palatino
Book Antiqua
Perpetua
Plantin
Plantin Schoolbook
Playbill
Poor Richard
Rawlinson Roadway
Renault
Requiem
Rockwell
Roman
Rotis Serif
Sabon
Scala
Seagull
Sistina
Souvenir
STIX, see also XITS
Stone Informal
Stone Serif
Sylfaen
Times New Roman
Times
Trajan
Trinité
Trump Mediaeval
Utopia
Vale Type
Vera Serif
Versailles
Wanted
Weiss
Wide Latin
Windsor
XITS
  Slab serif
Apex
City
Cholla Slab
Egyptienne
Guardian Egyptian
Museo Slab
Rockwell
Nilland
  Sans serif
Abadi
Agency FB
Akzidenz Grotesk
Aptifer
Arial
Arial Unicode MS
Avant Garde Gothic
Avenir
Bank Gothic
Barmeno
Bauhaus
Bell Centennial
Bell Gothic
Benguiat Gothic
Berlin Sans
Beteckna
Blue Highway
Cafeteria
Calibri
Century Gothic
Charcoal
Chicago
Clearface Gothic
Clearview
Co Headline
Co Text
Corbel
Coolvetica
Dax
DejaVu Sans
Dotum
Droid
Ecofont
Eras
Espy Sans
Nu Sans
Eurocrat
Eurostile
Square 721
FF Meta
FF Scala Sans
Flama
Formata
FreeSans
Franklin Gothic
Frutiger
Frutiger Next
Futura
Geneva
Gill Sans
Gill Sans Schoolbook
Gotham
Handel Gothic
Denmark
Haettenschweiler
Helvetica
Helvetica Neue
Swiss 721
Highway Gothic
Hiroshige Sans
Hobo
Impact
Industria
Interstate
Johnston
New Johnston
Kabel
Legacy Sans
Liberation Sans
Lucida Sans
Meiryo
Microgramma
Modern
Motorway
MS Sans Serif
Museo Sans
Myriad
Neutraface
News Gothic
Nimbus Sans L
Nina
Optima
Parisine
Pricedown
Prima Sans
PT Sans
Rail Alphabet
Revue
Rotis Sans
Scala Sans
Segoe UI
Skia
Souvenir Gothic
Stone Sans
Syntax
Tahoma
Tiresias
Trade Gothic
Transport
Trebuchet
Trump Gothic
Tw Cen
Twentieth Century
Ubuntu
Univers
Zurich
Vera Sans
Verdana
Virtue
  Semi-serif
Amsterdam Old Style
Divona
Nyala
Portobello
Rotis Semi Serif
Tema Cantante
  Monospaced
Andale Mono
Arial Monospaced
Bitstream Vera
Consolas
Courier
CourierHP
Courier New
CourierPS
Fontcraft Courier
DejaVu Sans Mono
Droid Sans Mono
Everson Mono 
Everson Mono Unicode
Fedra Mono
Fixed
Fixedsys
Fixedsys Excelsior
Inconsolata
HyperFont
Letter Gothic
Liberation Mono
Lucida Console
Lucida Sans Typewriter
Lucida Typewriter
MICR
Menlo
Miriam Fixed
Monaco
Monofur
Monospace
MS Gothic
MS Mincho
Nimbus Mono L
OCR-A
OCR-B
Orator
Ormaxx
PragmataPro
Prestige Elite also known as Prestige
ProFont
Proggy Programming Fonts
Small Fonts
Sydnie
Terminal
Terminus
Tex Gyre Cursor
UM Typewriter
Ubuntu Mono
Vera Sans Mono
William Monospace
  Brush Scripts
Balloon
Brush Script
Dragonwick
Choc
Dom Casual
Mistral
Papyrus
Segoe Script
Tempus Sans
Utopia
Year Supply of Fairy Cakes
  Calligraphic
Amazone
AMS Euler
Apple Chancery
Aquiline
Aristocrat
Bickley Script
Civitype
Codex
Edwardian Script
Forte
French Script
Kuenstler Script
Monotype Corsiva
Old English Text MT
Palace Script
Park Avenue
Scriptina
Shelley Volante
Vivaldi
Vladimir Script
Zapf Chancery
Zapfino
  Handwriting
Andy
Ashley Script
Chalkboard
Comic Sans
Cézanne
Dom Casual
Fontoon
Jefferson
Kristen
Lucida Handwriting
Rage Italic
Rufscript
Scribble
Soupbone
Tekton
  Other script
Cinderella
Cupola
Curlz
Magnificat
Script
Stone Informal
  Blackletter
American Text
Cloister Black
Fraktur
Goudy Text
Lucida Blackletter
  Dingbat Symbol fonts
Apple Symbols
Bookshelf Symbol 7
Cambria Math
Commercial Pi
Computer Modern
Corel
HM Phonetic
Lucida Math
Mathematical Pi
OpenSymbol
Symbol
SymbolPS
Wingdings
Wingdings 2
Wingdings 3
Webdings
Zapf Dingbats
  Display Decorative fonts
Abracadabra
Ad Lib
Allegro
Andreas
Arnold Böcklin
Astur
Balloon Pop Outlaw Black
Banco
Bauhaus
Beat
Braggadocio
Broadway
Caslon Antique
Chiller
Cooper Black
Curlz
Ellington
Exocet
FIG Script
Forte
Gigi
Harlow Solid
Harrington
Horizon
Jim Crow
Jokerman
Juice
Lo-Type
Magneto
Megadeth
Neuland
Peignot
  Simulation Mimicry fonts
Bagel
Lithos
Papyrus
Skia
  Miscellaneous
3x3
8514oem
Ashley Inline
Braggadocio
Continuum Medium
Fixedsys
Grasset
Kahana
LED
Pythagoras
System
Tema Cantante
Terminal
Westminster
""".split '\n'      

      traverseElement=(parent)->
        if parent.tagName in ['SCRIPT']
          return
        else if parent.childElementCount > 0
          for child in parent.children
            traverseElement child
        else if parent.innerText.length > 0
          text = parent.innerText
          parent.innerHTML = ''
          for letter in text
            child = document.createElement 'span'
            child.innerText = letter
            child.style.fontSize = parent.style.fontSize
            parent.appendChild child
            letterTags.push child

      traverseElement document.body

      randomFont =->
        fontFamilies[Math.floor((Math.random() * 1000000) % fontFamilies.length)]

      scramble =->
        for tag in letterTags
          tag.style.fontFamily = randomFont()

      setInterval scramble, 100