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
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
ReplyDeleteThe 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 :)
well, if this is just for fun, than it could be a funny idea.
ReplyDeletewhat 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.
your idea is quite cool but CSS based divs will not be customizable as table is.
ReplyDeleteProbably, 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 :)
where's the link to your js?
ReplyDelete(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;}
divs are fully customazable! colors, any position, any size. What do you want of the more? :D
ReplyDeleteHERE you could find a DOM only(not innerHTML) implementation .
ReplyDelete@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.
you must have a TBODY
ReplyDelete... 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")
Just look on DEMOSTRATION trasformation
ReplyDeleteI 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.