This page combines a PHP OpenType font parser, SVG outline paths, and Processing.js to bring you the seemingly super-simple concept of putting movable type on a panel (No really, it's movable type! You can move the letters around!). But, if you know how hard that is using standard approaches, this is awesome =)

This works for OpenType fonts of both the TrueType (using the Zephyr Script font by Casady & Greene) and Type2 (using the 淡斎行書「彩」font by NIS/JTC) varieties.

This page works because of several things:

• A slightly ahead-of-the-curve version of Processing.js with handling of Pshape based on XMLElement, and a patch to make IE9 play nice.
• Some custom code to delayed-load a processing sketch and immediately hook into it
• A PHP OpenType server-side font parser, which grabs letters from fonts and returns the outline data in JSON form.
  (like so)
• Interaction between javascript and the processing sketch using Processing.getInstanceById('canvasid')

Scripts of interest:

• the patched pre-1.0 Processing.js
• the custom pjs source loader
• the processing sketch sources:
• the main sketch code
• SVG elements class
• SVG element layer class
• SVG Glyph layer class
• SVG layer control box class
• the JS that gets executed once the sketch has loaded