embedfont

How to embed TTF fonts

Due to an excellent external tool created by Jan Flanders, it's possible to embed TTF fonts into jeash, without linking the original TTF file. This allows you to embed fonts into a javascript file.

This process works by inspecting the TTF file, and creating flash shapes on the fly. These flash shapes are loaded by jeash at runtime, and rendered / cached through the usual jeash rendering pipeline. So without further ado, apply the following steps:

Building hxswml

Building hxswfml is not difficult, just run haxe on the buildNEKO.hxml build file:

haxe buildNEKO.hxml

The resulting bytecode is in ./bin/neko/hxswfml.n - you can execute this file using the neko interpreter.

Creating an embeddable serialized font hash

Creating a font that can be read by jeash, is simply a matter of running hxswfml on the desired TTF font file.

neko hxswfml.n ttf2hash fontFile.ttf -glyphs 32-126
'

This will create a file in the same directory named after the font name encoded in the header of the TTF file, with the .hash extension. This is in effect a haxe serialized font shape file, which you can now specify when compiling a jeash project, if you want to use this font.

The -glyphs argument will encode only a subset of all the available font character codes. To check which ascii codes this argument will affect refer to an ascii code table.

Embedding the font hash into a jeash project

To embed the hash file into a jeash project add the -resource switch to the jeash build file:

-resource fontFile.hash@myFontname
-lib jeash
--remap flash:jeash
-main Main
-js main.js

whereby, the first token before the @ symbol is the font hash generated in the previous step, whereas the second token is the name of the font you will refer to in the code.

Using the embedded font in your code

Once your build file is set up, you can then use the font in normal flash code:

class Main
{
    static function main ()
    {
        var format = new flash.text.TextFormat();
        format.font = "myFontname";

        var textField = new flash.text.TextField();
        textField.text = "Hello jeash Haxe!";
        textField.setTextFormat(format);
        flash.Lib.current.addChild( textField );
    }
}

This should render the text in the font you just created.
<html>
    <head>
        <title>Jeash font example</title>
    </head>
    <body>
        <div id="haxe:jeash" style="width:800px; height:200px"></div>
        <script type="text/javascript" src="main.js"></script>
    </body>
</html>

version #10752, modified 2011-07-18 22:46:05 by grumpytoad