User guide

Step 1: Update DirectX

Alphabix requires the latest version of DirectX 9.

DirectX is available as a free download from Microsoft:
Update DirectX

If the web installer refuses to work, or if you would like to install DirectX on an offline computer, you can download the DirectX end-user redistributable.

Learn more about DirectX

Step 2: Download Alphabix

versionAlphabix 2.0.1
size1 MB
date releasedTuesday, February 25th, 2014

DOWNLOAD ALPHABIX

If you do not like installers you can download the program as a ZIP file.

If the program complains about not being able to find D3DX9_34.dll you will have to install the latest version of DirectX.

Ordering info

A single user license of Alphabix costs € 29.95

What you get

When you buy Alphabix you receive your own personal license keys. Entering them into the program with the menu item Settings > Enter License Keys... will turn the evaluation version into the fully functional version.

Order Alphabix

Glyph height, font height and normalization

Bitmap

A bitmap is a picture, photo, drawing or texture that can be stored as a PNG, BMP or JPG file.

Glyph

A font is built out of glyphs. A glyph can be a letter, a number or a symbol. In Alphabix a glyph can be any bitmap.

Glyph height

The glyph height is the height in pixels of the glyph bitmap. In Alphabix, all glyphs have the same height. Of course some glyphs look bigger than others, but transparent pixels are added to make all bitmaps the same height.

Cap height

The cap height is the average height of the upper case letters. You can set the cap height in the glyphs editor (choose Edit > Glyphs Editor...).

Baseline

The baseline the is distance between the bottom of the glyph and the bottom of the letter A. You can set the baseline in the glyphs editor (choose Edit > Glyphs Editor...).

CSS Font size and normalization

The Alphabix Javascript renderer makes sure the cap height is always 70% of the CSS font size and the baseline is always rendered at the same vertical position for fonts with the same font size. This way you do not have to worry your design breaks when you change fonts.

File > New...

Starts a new font project.

File > Open...

Opens a font (.BF).

File > Save as...

Saves the font (.BF). Learn more about saving fonts

File > Import HTML...

Imports an Alphabix webfont (.JS) as exported with the menu item File > Export as HTML....

File > Import Photofont...

Imports a photofont (.PhF).

File > Export as HTML...

Exports the font for use on a webpage. To save diskspace and traffic costs you might want to change the glyph height before exporting with the menu item Edit > Change Glyph Height....

Learn more about using Alphabix fonts on webpages

File > Export as single Files...

Exports every glyph as a single bitmap (.PNG).

File > Export as Cubes...

Exports cut-outs for letter cubes. Enter the names you would like to write and the cut-outs are generated fully automatically. The algorithm has been optimized to write as many names with as little cubes.

Settings menu

Settings > Set Background Colour

Sets the background colour of the preview window. This setting has no effect when saving your font, it is only used for the preview.

Settings > Enter License Keys...

Opens a dialog that allows you to enter your license keys.

Edit menu

Edit > Add/Change Characters...

Adds characters to your font.

Edit > Add/Change Picture...

Replaces a glyph by a picture. Learn more about replacing glyphs by pictures

Edit > Glyphs Editor...

Opens the glyphs editor. Left click with your mouse to edit the spacings. Right click to edit the baseline and the caps height.

Edit > Kerning Editor...

Opens the kerning editor. You can drag the glyphs with your mouse.

Edit > Change Glyph Height...

The glyph height is the height in pixels of the glyph. In Alphabix, all glyphs have the same height. You can scale the glyphs to the desired height with this menu item.

The cap height is the average height of all the upper-case letters. For most fonts the cap height is 70% of the glyph height. You can set the cap height in the Edit > Glyphs Editor... dialog.

Edit > Remove non-ASCII Characters

Removes all characters with a unicode value higher than 127

Edit > Trim vertically

Removes whitespace above and below all glyphs.

Edit > Add Shadow

Adds shadows to all the glyphs.

Help menu

Help > User Guide...

Displays this user guide.

Help > Ordering Information...

Displays the order page.

Help > About Alphabix...

Shows general information.

How do I convert a vector font into a bitmap font?

  • Choose File > New... or press <F2>
  • Left click on a character to add that character
  • Right click on a character to remove that character

How do I replace a glyph by a picture?

  • Choose Edit > Add/Change Picture... or press <F4>
  • Select a picture by pressing the Browse button
  • Type the character you would like to replace in the Character textbox

Alphabix can automatically load successive pictures when you name your files like this: A.png, B.png, C.png,...

Examples of filenames that Alphabix recognizes as the letter 'A' are: A.png, GoldenA.png, 65.png (the unicode value of A is 65), Golden65.png.

How do I save my bitmap font?

  • Choose File > Save as... to save your font

Saving your font creates 2 files: a texture file and a datafile.

The texture file is a picture saved in the standard PNG format and contains a collage of all the glyphs.

The datafile is a .BF (BluffTitler Font) file and contains the positions and sizes of the glyphs in the texture file and other info needed to render the font.

How do I load my bitmap font into BluffTitler?

  • Create a new text layer by choosing Layer > Add Layer > Add Text Layer
  • Choose Media > Change Font or press <F6>
  • Press the Select Bitmap Font button and select the .BF file you have created with Alphabix

In most situations you do not want the bitmap font to be lightened. You can do that by pressing the Change Effect... button and selecting the NotLightened.fx or NotLightened_NoZBuffer effect.

How do I turn my pictures into a bitmap font?

When you save your letters as transparent PNG files, you can import them into Alphabix by choosing Edit > Add/Change Picture... (or by pressing <F4>)

When you have used a non-digital drawing technique like paper and pencil you will have to scan or photograph every glyph.

Alphabix can automatically load successive pictures when you name your files like this: A.png, B.png, C.png,...

How do I use BluffTitler to create a bitmap font?

  • Start BluffTitler
  • Create a new show by choosing File > New Show
  • Change the text into a single character
  • Add all the effects you like
  • Select the render window and press 'b'
  • Import the pictures into Alphabix with the Edit > Add/Change Picture... menu item.

How do I use my bitmap fonts on a webpage?

Choose File > Export as HTML... to export your font for use on a webpage. It's best to save your font to a temporary empty folder.

When you name your font MyFont and choose the minimal version, the following 4 files are generated:

1) MyFont.png

All the glyphs are packed into this bitmap.

2) alphabix-1.0.js

This is the Alphabix Javascript library. This file is always the same, it has no relation with any font. You can include in your HTML file with this syntax:

<script src='alphabix-1.0.js'></script>

The Alphabix library uses jQuery, so make sure this library is included as well. Any version will do:

<script src='http://code.jquery.com/jquery-1.10.1.min.js'></script>

3) MyFont.js

This Javascript file contains the metrics of your font, including the positions of your letters in the PNG file and kerning information.

This Javascript file also contains the location of the glyphs PNG file. When this PNG is not placed next to your HTML file, you have to adjust its path in this MyFont.js file:

MyFont['Bitmap']="images/MyFont.png";

4) MyFont.html

This is an example page to get you started. It has been kept as simple as possible to make it easier for you to figure out how it works.

How does a minimal HTML page using an Alphabix font look like?

A minimal webpage that uses an Alphabix font looks like this:

<!DOCTYPE html>
<html>
 <head>
  <script src='http://code.jquery.com/jquery-1.10.1.min.js'></script>
  <script src='alphabix-1.0.js'></script>
  <script src='MyFont.js'></script>
 </head>
 <body>
  <h1 style='font-family:MyFont'>Test</h1>
 </body>
</html>

After including the Javascript files, making an element use your Alphabix font works exactly the same as making it use a normal font:

style='font-family:MyFont'

Which CSS rules are supported?

The Alphabix Javascript library takes the following CSS rules into account:

  • font-family
  • font-size
  • letter-spacing
  • line-height
  • text-align (left,right,center)
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
  • white-space
  • min-height
  • max-height
  • min-width
  • max-width
  • display (block, inline-block)

Help

What are the differences between the demo and the full version?

In the demo (evaluation) version the vowels (a,e,i,o,u) are not exported. Apart from that, all features are enabled allowing you to fully test Alphabix.

Does the demo run forever?

Yes. You can test Alphabix for as long as you want.

Program history

Version 2.0.1

Released: Tuesday, February 25th, 2014
Price: € 29.95, free upgrade for registered users!

Changes since version 1.2:

  • Completely redesigned GUI, font engine, HTML text renderer and BluffTitler text renderer
  • Introduction of the Alphabix Javascript HTML5 text renderer library
  • Import Photofont (.PhF). Render Photofonts on your website using HTML5 and Javascript. No Flash required!
  • Glyph dialog
  • Kerning dialog
  • Change glyph height dialog

Version 1.2

Released: 2013-1-25
Price: € 19.95, free upgrade for registered users!

  • New menu item: File > Export as Letter Cubes Cut-Outs...
  • Spacing left en right options in <F4> dialog
  • bugfix: ampersand (&) problem fixed!

Version 1.0

Released: 2008-12-1
Price: € 19.95

  • First release!