The JavaScript blog.


libraries ui mobile fonts

Touch Emulator, Input by Font Bureau

Posted on .

Touch Emulator

When working with iOS applications, the gesture shortcuts in the simulator quickly become second nature. Sometimes I use the iOS Simulator for web development purely to check responsive designs, mainly because it starts up more quickly than the Android emulator. Touch Emulator (GitHub: hammerjs / touchemulator, License: MIT) from Hammer.js is a way to emulate multi-touch events on the desktop, based on the W3C specifications.

Once it's installed you can listen for events in the standard way:

document.body.addEventListener('touchstart', log, false);  
document.body.addEventListener('touchmove', log, false);  
document.body.addEventListener('touchend', log, false);  

The demo is what reminded me of the iOS Simulator -- you can press shift to fake a second touch point, which allows pinch to zoom to work.

Input by Font Bureau


I recently had a spate of font experimentation in Visual Studio. I'm typically a terminal/Vim user, so I'm not used to the way Windows handles font rendering. Since then I've been tweaking my fonts everywhere, although I keep ending up back on Menlo or Meslo.

André Mora sent in Font Bureau's Input typeface:

Input is a flexible system of fonts designed specifically for code by David Jonathan Ross. It offers both monospaced and proportional fonts, all with a large range of widths, weights, and styles for richer code formatting.

There's an interesting page with more details about Input, called Questioning Monotheism:

Monospaced fonts aren't great for setting normal text, but they have become the de facto standard for setting code. Since all characters are constrained to the same fixed width, the page becomes a grid of characters, and the mechanics of typesetting are drastically simplified. However, this comes at an aesthetic cost: wide characters are forced to squeeze; narrow characters are forced to stretch. Uppercase letters look skinny next to lowercase, and bold characters don't have enough room to get very bold.

It goes on to present several arguments about how to position text for code:

By mixing typographic variation with the power of syntax highlighting, by composing text that transcends a fixed-width grid, and by choosing and combining multiple font styles, we can end all up with code and data that is ultimately easier to read and write.

You can download Input for private use, or license it for commercial publications (including websites).


plugins backbone.js extensions fonts

Gbone.js, Writing Browser Extensions, Font.js

Posted on .


Gbone.js (License: MIT) by Gobhi Theivendran is a framework built on top of Backbone.js for building mobile applications, inspired by Spine Mobile. It contains several classes that extend Backbone's classes to make it easier to build mobile applications. For example, Gbone.Stage contains multiple Gbone.Panels, and the panels are managed internally by a panel manager. They have a default skeleton like this:

<div class="container">  

Panels can be activated and deactivated, animated using a transition. Only one stage and panel can be active at one time, so the end result is similar to native Android and iOS interfaces.

There's a Gbone.js demo app, which is a rewrite of currency.io. Gbone.js works with both jQuery and Zepto.

Writing Browser Extensions - Comparing Firefox, Chrome and Opera

Writing Browser Extensions - Comparing Firefox, Chrome and Opera by Parashuram Narasimhan explores writing a browser extension for multiple browsers. The author covers a lot of topics, including manifest files, background processes, message passing, and debugging.

This tutorial is based on Parashuram's experiences writing the MediaPlus, so some of the coverage is specific to that, but it's general enough to get a good overview of how difficult it is to support all of the major browsers with a single extension.


Font.js (GitHub: Pomax / Font.js, License: MIT) by Mike Kamermans is a font API for client-side JavaScript. Fonts can be loaded on demand, and an onload callback will run once the font has been loaded:

var font = new Font();

font.onload = function() {  
  // The new font has loaded

font.src = 'http://example.com/font.ttf';  

Metrics for a font can be accessed. For example, font.metrics.leading will give the line height.