Custom Font For J2ME

In this post we will go throw in doing our custom font to use inside our J2ME applications..

The main advantage of this font class is that you can control the size of the font and its appearance over different application and not leave this render operation to the mobile device implementation.

There are 2 different ways to do this custom J2ME fonts:

1.Image-based Font:


In this way we have image that contain all our possible images and cut our needed clip from the picture according to the needed font, the image should have the following properties if possible:
1.Transparent .png background.
2.Size of each letter should be the same.
3.Space between each letter and the other should be the same either 0 or fixed space size like 1 point.
4.Best to have small font image and large font image.
5.Font color may be included in the picture also, so you need to have some thing like this:
font_small_black.png
font_small_red.png
font_large_black.png
font_large_red.png

6.The Place of the letter should be easily calculated for easiness of the operation, so we can use letter location=Asci code or ASCI code - fixed number , so we can decode each letter easily.

Dummy code for this:

letterSize=7;
spacing=1;
public void drawStatement(Graphics g,String stat,int x, int y){
loop over stat length ....{
....get current letter
....call private method drawLetter(g,char c,x,y)
x+=letterSize+spacing;
}
}

private void drawLetter(Graphics g,char c){
int position=c-30;
//draw clip of the letter
}

2.Vector/Draw Font:

In this way , we will need to draw each letter ourself , so it will be slower thing to do, and only needed for small needed statements over the screen ...


public class TextWriter {
private static TextWriter writer=new TextWriter();
private TextWriter() {
}
public static TextWriter getWriter(){
return writer;
}
public void drawString(Graphics g ,String str,int x , int y){
if(str!=null){
int n=str.length();
for(int i=0;i drawLetter(g,str.charAt(i),x+9*i,y);
}
}
}
private void drawLetter(Graphics g,char c,int x,int y){
switch(c){
case 'A':
case 'a':
g.fillRect(x,y,1,5);
g.fillRect(x,y+6,1,5);
g.fillRect(x+6,y,1,5);
g.fillRect(x+6,y+6,1,5);
g.fillRect(x+1,y,5,1);
g.fillRect(x+1,y+5,5,1);
break;
case 'O':
case 'o':
g.fillRect(x,y+1,1,4);
g.fillRect(x,y+6,1,4);
g.fillRect(x+6,y+1,1,4);
g.fillRect(x+6,y+6,1,4);
g.fillRect(x+1,y,5,1);
g.fillRect(x+1,y+10,5,1);
break;
case 'Q':
case 'q':
g.fillRect(x,y+1,1,4);
g.fillRect(x,y+6,1,4);
g.fillRect(x+6,y+1,1,4);
g.fillRect(x+6,y+6,1,4);
g.fillRect(x+1,y,5,1);
g.fillRect(x+1,y+10,5,1);
g.drawLine(x+4,y+7,x+7,y+11);
break;
case 'D':
case 'd':
g.fillRect(x,y,1,5);
g.fillRect(x,y+6,1,5);
g.fillRect(x+6,y+1,1,4);
g.fillRect(x+6,y+6,1,4);
g.fillRect(x+1,y,5,1);
g.fillRect(x+1,y+10,5,1);
break;
case 'S':
case 's':
g.fillRect(x,y,1,5);
g.fillRect(x+6,y+6,1,5);
g.fillRect(x+1,y,5,1);
g.fillRect(x+1,y+5,5,1);
g.fillRect(x+1,y+10,5,1);
break;
case 'R':
case 'r':
g.fillRect(x,y,1,5);
g.fillRect(x,y+6,1,5);
g.fillRect(x+6,y,1,5);
g.drawLine(x+3,y+6,x+6,y+10);
g.fillRect(x+1,y,5,1);
g.fillRect(x+1,y+5,5,1);
break;
case 'U':
......etc...
}
}

We can choose a lot of custom font methodologies to draw the font.