This is a quick test of using a .png file to convert plain text into a font not installed on the client's system. This is still kind of 'rough' around the edges, but it seems functional enough for now. There is really only one 'real' problem with the technique - With a alpha transparent .png it will not work in IE6 or earlier. The IE6 problem is especially 'troubling' because you cannot actually position a filter. Mind you, using a palettized .png or .gif and you should be fine, but that means more 'care' must be taken on your smoothing and colors.
*** NOTE *** The following should be kept in mind when using this technique.
1) Tags inside these areas are rendered as plaintext with the
exception of BR and P, and P only works if you CLOSE the tag.
2) Entities do not function
3) You cannot select the graphical text using the mouse, though a
select all and copy WILL grab the underlying text.
4) There are no bold or italics unless you make another 'font'
5) Spaces are presented explicitly, tabs are 'hard removed'
6) The text displayed with images off should use a smaller font than the
images font to prevent the alternative content from 'peeking out' from
underneath.
7) You have no line-height controls, or margins/padding INSIDE
these containers. You want to add margins or padding, you need to make a
bunch of containers.
I created this simple html/javascript outputting all ASCII characters from #32 to #127 with a simple 1px wide grid around each character, spacing them in a 30px by 30px grid. Taking a screencap of that into an image editor, I measured six points on each letter - one on each side at the following places, top, bottom and middle. The measurement was taken from the edge they faced, aka the left points were from the left edge, the right points from the right edge. These values were put into a javascript array. The last record in the array is used to store the font name, how wide and tall each 'block' is, and of course the actual file.
I then removed the grid from the image and placed it into a palettized transparent .png - I would use an alpha .png, except that I planned to use background-position - something you cannot combine with the FILTER property needed to get such images working in IE6.
A relatively simple parsing javascript routine goes through the section we want to convert to use the 'PNGFont' instead replacing each letter with an empty span.. then the hard part begins.
KERNING - kerning is determining the proper space between characters, taking into account how a capitol T should 'hang' over a lower case o, or how a lower case g's descender may be so huge it stretches under the letter before it. This is where those points I recorded come into play.
Each box is set to 32px wide - I add the right measurement of the current character to the left measurement of the next character for each of the three 'rows' I recorded. Whichever number is smallest is assigned as margin-right, sliding the next character OVER the current one. This is why a transparant image is required so the 'overhang' shows through. After this I further adjusted it two less pixels than I recorded to get the kerning closer to the actual .ttf I was working from.
Since no two fonts kern the same, we can't just dump our 'fallback' text into each of our spans because it would overlap wrong (trust me, I tried it first) so instead we just dump a copy of the text into an absolute positioned div UNDER our images letting it kern normally. To make sure it doesn't 'peek out' from under our images, the font should be a touch smaller. Images off, we still get text... Javascript off, the text is already there and not processed. Simple.
A little .js overhead to make <BR> and <P> working, and that's it.
I hope to add auto-detection of what font to use by parsing the CSS, add in support for line-height and letter-spacing, and maybe see if I can find a way to colorize text without actually changing the image. (transparancy overlay perhaps?)
The big thing will be 'individualization' of the fonts, so each font's data can be in a separate file, possibly putting each font in it's own subdirectory.
