JavaScript Image Font Demo
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.
Scaleable
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.
Enjoy!
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.
