Tuesday, October 17, 2006

JavaScript Pixel Font Generator

One of the coolest things of generic Flash textFields are pixel fonts.
I love those tiny smally colly fonts ... that's why I've decieded to create a pixel font render engine.

concept
matrix and grids ... sure, and if You think that a grid "is a table" you've just found the render engine concept:
a lot of table cells with or without a background color.
Since the better way to draw something on web pages is a nice CSS style, created tables are quite totally CSS based, then You can joke with cell width, height, padding, spacing and colors and then You can have different effects with a single font table.
This strange object will contain one or more dedicated cell string that you can create using a really simple SWF GUI application like this one, then everyone should have a personal JavaScript pixel font * :)
Pixel Font Render class will use these information to create a lot of string dedicated for an innerHTML interaction.


Why innerHTML ?
I'va a personal DOM based version of render engine but for some reason IE (7 too) didn't creates as expected runtime tables as FireFox or Opera 8 did.
Another reason is that DOM isn't faster as innerHTML and multiple elements creation should be a browser killer.


Why You wrote "be sure to use a fast browser" ? Are there limits ?
Tables are not really performances friend, then You can't use this engine to replace every string in your web pages because any browser could manage big big tables quickly.


(then) What js pixel font should be used for ?
Use your immagination but I just could tell you these things:
  • web page decorations
  • menu customizzation
  • graphic enanchment
  • dynamic Chapcha
  • footer pages informations
  • header titles

... and probably more.



If You've not viewed the example page (or You didn't understand how does it work) You could clik this link and then You can click DEMOSTRATION header.
Please be sure You're not using an old browser or an old PC, that page should stress old hardware :(



* please, send me Your pixel font to create a demostration page with different fonts and to allow users to download one of them

No comments:

Post a Comment