Custom Monospaced Font

If you want to use custom fonts the easiest one to start with is Monospaced.

As each character has the same width a simple math can define the correct point to draw.

Lets start with just numbers, from zero (Unicode value 48) to nine (Unicode value of 57).

Below is a PNG image of a very small font with three pixels width and five pixels height.

The following class can be used to draw numbers using this image.

import javax.microedition.lcdui.Graphics;

import javax.microedition.lcdui.Image;

public class MonospacedFont {

private Image image;

private char firstChar;

private int numChars;

private int charWidth;

public MonospacedFont(Image image, char firstChar, int numChars) {

if (image == null) {

throw new IllegalArgumentException("image == null");

}

// the first visible Unicode character is '!' (value 33)

if (firstChar <= 33) {

throw new IllegalArgumentException("firstChar <= 33");

}

// there must be at lease one character on the image

if (numChars <= 0) {

throw new IllegalArgumentException("numChars <= 0");

}

this.image = image;

this.firstChar = firstChar;

this.numChars = numChars;

this.charWidth = image.getWidth() / this.numChars;

}

public void drawString (Graphics g, String text, int x, int y) {

// store current Graphics clip area to restore later

int clipX = g.getClipX();

int clipY = g.getClipY();

int clipWidth = g.getClipWidth();

int clipHeight = g.getClipHeight();

char [] chars = text.toCharArray();

for (int i = 0; i < chars.length; i++) {

int charIndex = chars[i] - this.firstChar;

// current char exists on the image

if (charIndex >= 0 && charIndex <= this.numChars) {

g.setClip(x, y, this.charWidth, this.image.getHeight());

g.drawImage(image, x - (charIndex * this.charWidth), y,

Graphics.TOP | Graphics.LEFT);

x += this.charWidth;

}

}

// restore initial clip area

g.setClip(clipX, clipY, clipWidth, clipHeight);

}

}

Here is a sample code that uses this class.

Image img;

try {

img = Image.createImage("/monospaced_3_5.PNG");

MonospacedFont mf = new MonospacedFont(img, '0', 10);

mf.drawString(g, "9876543210", 40, 40);

} catch (IOException e) {

e.printStackTrace();

}

From here you can go on defining bigger images with more letters.