webfontloader 1.0.5

data/bin/webfontloader-demos

@@ -0,0 +1,28 @@
+#!/usr/bin/env ruby
+
+require 'rubygems'
+
+$LOAD_PATH.unshift File.expand_path(File.dirname(__FILE__) + "/../lib")
+require 'webfontloader'
+
+begin
+  require 'webfontloader/demo/server'
+rescue LoadError => e
+  abort "Please gem install sinatra"
+end
+
+begin
+  require 'vegas'
+rescue LoadError => e
+  abort "Please gem install vegas"
+end
+
+Vegas::Runner.new(WebFontLoader::Demo::Server, 'font-demos') do |runner, opts, app|
+  opts.on('--compiled_js FILE', "Dynamically build the JS with the given modules") { |file|
+    app.set :compiled_js, File.read(file)
+  }
+  opts.on('--modules [MODULES]', "Dynamically build the JS with the given modules") { |opt_modules|
+    modules = opt_modules ? opt_modules.split(",") : []
+    app.set :modules, WebFontLoader::Modules.new(*modules)
+  }
+end

data/docs/EVENTS.md

@@ -0,0 +1,115 @@
+# Events
+
+WebFont Loader provides an event system that developers can hook into. It
+gives you notifications of the font loading sequence in both CSS and
+JavaScript.
+
+## The Events
+
+  * `Loading` - This event is triggered when all fonts have been requested.
+  * `Active` - This event is triggered when all of the fonts have rendered.
+  * `Inactive` - This event is triggered when the browser does not support
+      linked fonts *or* if none of the fonts could be loaded.
+  * `Font Loading` - This event is triggered once for each font that's loaded.
+  * `Font Active` - This event is triggered once for each font that renders.
+  * `Font Inactive` - This event is triggered if the font can't be loaded.
+
+### CSS Flavored
+
+CSS events are implemented as classes on the `html` element.
+
+    html.wf-loading
+    html.wf-active
+    html.wf-inactive
+    html.wf-familyname-fvd-loading
+    html.wf-familyname-fvd-active
+    html.wf-familyname-fvd-inactive
+
+`familyname` is a sanitized version of the name of each font family. Spaces
+and underscores are removed from the name, and all characters are converted to
+lower case. For example, `Droid Sans` becomes `droidsans`.
+
+`fvd` is a *Font Variation Description*. Put simply, it's a shorthand for
+describing the style and weight of a particular font. Here are a few examples:
+
+    @font-face {
+      font-style: normal;
+      font-weight: normal;
+    }
+    => n4
+
+    @font-face {
+      font-style: italic;
+      font-weight: bold;
+    }
+    => i7
+
+If no style/weight is specified, the default "n4" (font-style: normal;
+font-weight: normal;) will be used.
+
+
+### JavaScript Flavored
+
+JavaScript events are implemented as callback functions on the `WebFont.load`
+function.
+
+    WebFont.load({
+      loading: function() {
+      },
+      active: function() {
+      },
+      inactive: function() {
+      },
+      fontloading: function(familyName, fvd) {
+      },
+      fontactive: function(familyName, fvd) {
+      },
+      fontinactive: function(familyName, fvd) {
+      }
+    })
+
+
+## Error Handling
+
+### Timeouts
+
+Since the Internet is not 100% reliable, it's possible that a font fails to
+load. You can use events to gracefully degrade in this situation.
+
+> The `Font Inactive` event will be triggered after 5 seconds if the font
+fails to render. If *at least* one font succesfully renders, the `Active`
+event will be triggered, else the `Inative` even will be triggered.
+
+### Browser Support
+
+Every web browser has varying levels of support for fonts linked via
+@font-face.
+
+> If WebFont Loader determines that the current browser does not support
+`@font-face`, the `Inactive` event will be triggered.
+
+When loading fonts from multiple providers, each provider may or may not
+support a given browser.
+
+> If WebFont Loader determines that the current browser can support
+`@font-face`, and *at least* one provider is able to serve fonts,
+the fonts from that provide will be loaded. When finished, the `Active` event
+will be triggered.
+
+> For fonts loaded from supported providers, the `Font Active` event will be
+triggered. For fonts loaded from a provider that *does not* support the
+current browser, the `Font Inactive` event will be triggered.
+
+For example:
+
+    WebFont.load({
+      providerA: 'Family1',
+      providerB: 'Family2'
+    });
+
+> If `providerA` can serve fonts to a browser, but `providerB` cannot, The
+`Font Inactive` event will be triggered for `Family2`. The `Font Active`
+event will be triggered for `Family1` once it loads, as will the `Active`
+event.
+
+

data/docs/MODULES.md

@@ -0,0 +1,49 @@
+# Modules
+
+WebFont Loader provides a generic module system so that any web font provider
+may be used. The specifics of each provider are documented here.
+
+
+## Google
+
+Using Google's Font API, name the font families you'd like to load.
+
+    WebFont.load({
+      google: {
+        families: ['Droid Sans', 'Droid Serif']
+      }
+    });
+
+Learn more about the [Google Font API][gfontapi].
+
+
+## Typekit
+
+When using Typekit, specify the Kit to retrieve by its ID. You can find this
+ID within Typekit's Kit Editor interface.
+
+    WebFont.load({
+      typekit: {
+        id: 'xxxxxx'
+      }
+    });
+
+Learn more about [Typekit][tk].
+
+
+## Custom
+
+To load fonts from any external stylesheet, use the `custom` module. Here you'll
+need to specify both the url of the stylesheet as well as the font families it
+provides.
+
+    WebFont.load({
+      custom: {
+        families: ['My Font', 'My Other Font'],
+        urls: ['/fonts.css']
+      }
+    });
+
+
+[gfontapi]: https://code.google.com/apis/webfonts/docs/getting_started.html
+[tk]: http://typekit.com/

data/docs/TRANSITIONS.md

@@ -0,0 +1,107 @@
+# Transitions
+
+In order to support smooth transitions between webfont providers, WebFont
+Loader provides a common interface to each provider. It also makes it trivial
+to load fonts from multiple providers.
+
+This is especially powerful when building your page against the [events][]
+because the same events are triggered regardless of the provider.
+
+Here are a few scenarios.
+
+## From Google Fonts to Typekit
+
+### Step 1: Use Google with WebFont Loader
+
+You can get started with web fonts quickly and easily by just using Google.
+
+    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
+    <script type="text/javascript">
+      WebFont.load({
+        google: {
+          families: ['Droid Sans']
+        }
+      });
+    </script>
+
+### Step 2: Add Typekit
+
+If you discover that Google doesn't have your preferred typeface, you may wish
+to add fonts from Typekit.
+
+(first sign up for Typekit, add fonts and retrieve your Kit ID)
+
+    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
+    <script type="text/javascript">
+      WebFont.load({
+        google: {
+          families: ['Droid Sans']
+        },
+        typekit: {
+          id: 'abc1def'
+        }
+      });
+    </script>
+
+### Step 3 Remove Google
+
+You may now discover that the number of HTTP requests has increased by pulling
+fonts from both Google and Typekit. Since Typekit has all of the fonts that
+Google has, let's drop that dependency.
+
+(first add 'Droid Sans' to your Kit with ID 'abc1def')
+
+    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
+    <script type="text/javascript">
+      WebFont.load({,
+        typekit: {
+          id: 'abc1def'
+        }
+      });
+    </script>
+
+### Step 4: Remove WebFont Loader
+
+You may wish to reduce HTTP requests further by dropping the dependency on
+WebFont Loader to work directly with Typekit. Typekit's API is fully
+compatible with WebFont Loader.
+
+    <script type="text/javascript" src="http://use.typekit.com/abc1def.js"></script>
+    <script type="text/javascript">
+      WebFont.load();
+    </script>
+
+Or as pure Typekit
+
+    <script type="text/javascript" src="http://use.typekit.com/abc1def.js"></script>
+    <script type="text/javascript">
+      Typekit.load();
+    </script>
+
+
+## Add events to self-hosted fonts
+
+### Step 1: Link to your own stylesheet
+
+If you already have fonts and the `@font-face` rules written, you might
+already be using them in your page.
+
+    <link type="text/css" rel="stylesheet" href="/fonts.css">
+
+### Step 2: Use WebFont Loader
+
+To add [events][] support, use the `custom` module to load your stylesheet,
+and name the font families that the stylesheet provides.
+
+    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
+    <script type="text/javascript">
+      WebFont.load({
+        default: {
+          families: ['My Font'],
+          urls: ['/fonts.css']
+        }
+      });
+    </script>
+
+
+[events]: EVENTS.md

data/lib/webfontloader.rb

@@ -0,0 +1,10 @@
+require 'yaml'
+
+require 'webfontloader/modules'
+
+module WebFontLoader
+  VERSION = '1.0.5'
+
+  ProjectRoot = File.expand_path(File.dirname(__FILE__) + "/..")
+
+end

data/lib/webfontloader/demo/public/ascender.html

@@ -0,0 +1,99 @@
+<!doctype html>
+<html>
+<head>
+  <title>Ascender Module Demo</title>
+  <link href="/basic.css" rel="stylesheet" type="text/css">
+  <script type="text/javascript" src="/webfont.js"></script>
+  <style type="text/css">
+    /* Use classes to prove that Ascender module triggers the event system correctly */
+    #demo {
+      visibility: hidden;
+      line-height:normal;
+    }
+    .wf-ayitapro-n4-active #demo {
+      font-family: 'AyitaPro';
+      visibility: visible;
+    }
+  </style>
+</head>
+<body>
+  <div id="demo">
+    <h1>Hello World. I am Ayita Pro.</h1>
+
+    <h2>Regular:</h2>
+    <p style="font-weight:normal; font-style:normal;">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus eleifend aliquam. Nullam eu volutpat orci. Sed scelerisque pulvinar lorem, non ornare risus varius sed. Integer in lorem ut tortor rutrum placerat. Duis quis ante nec nulla luctus tincidunt. Aenean lorem metus, venenatis id sagittis eget, sodales ut justo. Donec quis dictum erat. Nunc ac feugiat sapien. In laoreet nisl in nisl ullamcorper porttitor. Ut vitae tortor leo, nec euismod sapien. Vivamus pellentesque, est in vulputate dictum, lectus diam interdum ipsum, sit amet posuere libero dui et sapien. Curabitur sit amet pulvinar massa.
+    </p>
+
+    <h2>Bold:</h2>
+    <p style="font-weight:bold; font-style:normal;">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus eleifend aliquam. Nullam eu volutpat orci. Sed scelerisque pulvinar lorem, non ornare risus varius sed. Integer in lorem ut tortor rutrum placerat. Duis quis ante nec nulla luctus tincidunt. Aenean lorem metus, venenatis id sagittis eget, sodales ut justo. Donec quis dictum erat. Nunc ac feugiat sapien. In laoreet nisl in nisl ullamcorper porttitor. Ut vitae tortor leo, nec euismod sapien. Vivamus pellentesque, est in vulputate dictum, lectus diam interdum ipsum, sit amet posuere libero dui et sapien. Curabitur sit amet pulvinar massa.
+    </p>
+
+    <h2>Italic:</h2>
+    <p style="font-weight:normal; font-style:italic;">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus eleifend aliquam. Nullam eu volutpat orci. Sed scelerisque pulvinar lorem, non ornare risus varius sed. Integer in lorem ut tortor rutrum placerat. Duis quis ante nec nulla luctus tincidunt. Aenean lorem metus, venenatis id sagittis eget, sodales ut justo. Donec quis dictum erat. Nunc ac feugiat sapien. In laoreet nisl in nisl ullamcorper porttitor. Ut vitae tortor leo, nec euismod sapien. Vivamus pellentesque, est in vulputate dictum, lectus diam interdum ipsum, sit amet posuere libero dui et sapien. Curabitur sit amet pulvinar massa.
+    </p>
+
+    <h2>Bold Italic:</h2>
+    <p style="font-weight:bold; font-style:italic;">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus eleifend aliquam. Nullam eu volutpat orci. Sed scelerisque pulvinar lorem, non ornare risus varius sed. Integer in lorem ut tortor rutrum placerat. Duis quis ante nec nulla luctus tincidunt. Aenean lorem metus, venenatis id sagittis eget, sodales ut justo. Donec quis dictum erat. Nunc ac feugiat sapien. In laoreet nisl in nisl ullamcorper porttitor. Ut vitae tortor leo, nec euismod sapien. Vivamus pellentesque, est in vulputate dictum, lectus diam interdum ipsum, sit amet posuere libero dui et sapien. Curabitur sit amet pulvinar massa.
+    </p>
+  </div>
+  <hr>
+  <p>
+    <a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
+    <a href="/ascender.html">Reload Cached</a>
+  </p>
+  <p>
+    Note: use "localhost" when testing web fonts.
+  </p>
+  <p>
+    The goal of this page is to show how fonts load from Ascender.
+  </p>
+  <h2>JavaScript Event Progress</h2>
+  <ol id="events"></ol>
+
+  <script type="text/javascript">
+    function progress(message) {
+      var output = document.getElementById('events');
+      if (output) {
+        var e = document.createElement('li');
+        e.innerHTML = message;
+        output.appendChild(e);
+      }
+      if (window.console && window.console.log) {
+        window.console.log(message);
+      }
+    }
+
+    //Families must match families
+    //that are included in provided CSS
+    WebFont.load({
+      ascender: {
+        key:'ec2de397-11ae-4c10-937f-bf94283a70c1',
+        families:['AyitaPro:regular,bold,bolditalic,italic']
+      },
+      loading: function() {
+        progress('loading');
+      },
+      active: function() {
+        progress('active');
+      },
+      inactive: function() {
+        progress('inactive');
+      },
+      fontloading: function(fontFamily, fontDescription) {
+        progress('fontloading: ' + fontFamily + ' (' + fontDescription + ')');
+      },
+      fontactive: function(fontFamily, fontDescription) {
+        progress('fontactive: ' + fontFamily + ' (' + fontDescription + ')');
+      },
+      fontinactive: function(fontFamily, fontDescription) {
+        progress('fontinactive: ' + fontFamily + ' (' + fontDescription + ')');
+      }
+    });
+  </script>
+
+</body>
+</html>

data/lib/webfontloader/demo/public/basic.css

@@ -0,0 +1,9 @@
+body {
+  line-height: 1;
+  font-size: 14px;
+  margin: 10px;
+}
+h1 {
+  font-size: 5em;
+  margin: 0;
+}

data/lib/webfontloader/demo/public/custom.html

@@ -0,0 +1,88 @@
+<!doctype html>
+<html>
+<head>
+  <title>Custom Module</title>
+  <script type="text/javascript" src="/webfont.js"></script>
+  <style type="text/css">
+
+    h1 {
+      font-family: 'Tagesschrift';
+    }
+
+    /* All Class hooks */
+    #classes { color: #ddd; }
+    html.wf-loading #classes .Loading,
+    html.wf-active #classes .Active,
+    html.wf-inactive #classes .Inactive,
+    html.wf-tagesschrift-n4-loading #classes .TagesschriftLoading,
+    html.wf-tagesschrift-n4-active #classes .TagesschriftActive,
+    html.wf-tagesschrift-n4-inactive #classes .TagesschriftInactive {
+      color: #000;
+    }
+
+  </style>
+</head>
+<body>
+  <h1 class="tagesschrift">
+    Hello World. I am Tagesschrift.
+  </h1>
+  <hr>
+  <p>
+    <a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
+    <a href="/custom.html">Reload Cached</a>
+  </p>
+  <p>
+    The goal of this page is to show how fonts load from a custom module.
+  </p>
+  <h2>CSS Hook Status</h2>
+  <ul id="classes">
+    <li class="Loading">Loading</li>
+    <li class="Active">Active</li>
+    <li class="Inactive">Inactive</li>
+    <li class="TagesschriftLoading">Tagesschrift Loading</li>
+    <li class="TagesschriftActive">Tagesschrift Active</li>
+    <li class="TagesschriftInactive">Tagesschrift Inactive</li>
+  </ul>
+  <h2>JavaScript Event Progress</h2>
+  <ol id="events"></ol>
+
+  <!-- loading event may fire before page is completely ready -->
+  <script type="text/javascript">
+    function progress(message) {
+      var output = document.getElementById('events');
+      if (output) {
+        var e = document.createElement('li');
+        e.innerHTML = message;
+        output.appendChild(e);
+      }
+      if (window.console && window.console.log) {
+        window.console.log(message);
+      }
+    }
+    WebFont.load({
+      custom: {
+        families: ['Tagesschrift'],
+        urls : ['http://paulirish.com/tagesschrift.css']
+      },
+      loading: function() {
+        progress('loading');
+      },
+      active: function() {
+        progress('active');
+      },
+      inactive: function() {
+        progress('inactive');
+      },
+      fontloading: function(fontFamily, fontDescription) {
+        progress('fontloading: ' + fontFamily + ' (' + fontDescription + ')');
+      },
+      fontactive: function(fontFamily, fontDescription) {
+        progress('fontactive: ' + fontFamily + ' (' + fontDescription + ')');
+      },
+      fontinactive: function(fontFamily, fontDescription) {
+        progress('fontinactive: ' + fontFamily + ' (' + fontDescription + ')');
+      }
+    });
+  </script>
+</body>
+</html>