JavaScript Image Font Demo

Font Height (px):
Enter text:

A Purely JavaScript font

This script comes with 95 images, each named after the unicode value for the letter it contains. For example, the letter 'a' is stored as a tiny GIF image called '97.gif'. The images are each about 1.5k, all together about 130K. They are preloaded into this document so JavaScript can render them quickly. This program was written as part of the solution to match screen fonts with SATO printer fonts in a WYSIWYG fashion. The images are actual scans from a SATO CL408e barcode printer.

Cross Browser DHTML

No, this will not work for browsers under about v.6, but it renders well in the current IE and Mozilla both. I used the DOM method for creating the images in your document; this is the fastest way to render. InnerHTML is used only once; to clear the display.


Change the font height above, and you can see that the font scales well, for being a kludgy scan of an admittedly simple barcode font. Set the fontsize to 1000, you will see that it loads the image just as fast as if it were 10 pixels high. Still, the speed is not useful for text more than about 50 characters at a time, since DELETE and BACKSPACE actions redraw all text. Perhaps there is a more elegant way to handle these.


Now have fun with that barcode printer. This code is a stub for all kinds of applications. With some optimization, it could be used for online layout and design of more complex text than this simple font. I think all that's left is kerning. Logo