My JavaScript book is out! Don't miss the opportunity to upgrade your beginner or average dev skills.

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

8 comments:

Andrea Giammarchi said...

just a first comment by myself ... i'll work for a canvas based version that will be (I hope) really faster but will not be compatible as this browser killer version :D

The good thing is that created fonts will work perfectly with canvas based version, the bad one is that canvas aren't, today, so portable (I need to look at google porting, maybe they've solved).

See you :)

Yaroslaff "Inviz" Fedin said...

well, if this is just for fun, than it could be a funny idea.

what about absolute positioning? It's very fast.

Create a relative-positioned block with sizes of future sign and put pixels into there. You can have an optimization curve in this way: for example 3 pixels in a line could be handled as 1x3 div. Abso-Rela is very crossbrowser stuff.

But again this is just crazy XD.

Andrea Giammarchi said...

your idea is quite cool but CSS based divs will not be customizable as table is.

Probably, as Daniele said, the better way is to use canvas ... but CSS semplicity will be a problem again.

However, demostration page is slow because render generates thousand of chars but in every day pages this render should be used only for few elements and delay will not be visible as is on demo page that's not a real every-day web page :)


A joke ? probably ... a new way to write fonts ? Maybe.

When Flash exports one Pixel Font its overload is about 25Kb, with this engine the packed overload is about 3Kb for a "complete" ASCII table.

I hope I'll find time to create a better canvas version to compare results :)

kentaromiura said...

where's the link to your js?
(o I just find it:http://www.devpro.it/pixelfont/PixelFontRender.js
)

P.s. I just wrote a 100% compatib
le function with the swf you linked.
here the code:
http://freeforumzone.leonardo.it/viewmessaggi.aspx?f=19716&idd=182

ps you need a little css like this or what you like:

.font{
border-collapse:collapse;
padding:0;margin:0;border:0;
}
.font tbody tr td{background-color:#aaffaa;width:1px;height:1px;font-size:1px;};
.font tbody tr .on{background-color:lightsteelblue !important;}
.on{background-color:lightsteelblue !important;}

Yaroslaff "Inviz" Fedin said...

divs are fully customazable! colors, any position, any size. What do you want of the more? :D

kentaromiura said...

HERE you could find a DOM only(not innerHTML) implementation .
@Andrea: for IE you must have a TBODY or it don't display nothing if you use only dom function ;)

[I found this issue when I was write my innerDom / Inner].

my implementation is optimized for speed(it use cloneNode and wait till the end to append to the page) you can do a bench if you want, but innerHTML is surelly faster.

Andrea Giammarchi said...

you must have a TBODY
... c'mon kenta, you have to use a TBODY with other browsers too ... and I'm not a newbye ;)


@ inviz
you often write without understand me ... you CAN'T have the same effect with divs and multiple widths or height.

Just look on DEMOSTRATION trasformation and replace with your method if you can ... it's not possible (not using your "solution")

Andrea Giammarchi said...

Just look on DEMOSTRATION trasformation
I mean exactly the header DEMOSTRATION string after pixel font




However, I've just created a canvas version that's 10x faster than this one but I'm working to make this version IE friendly, stay tuned.