GuidesWorking with SVGAlib Fonts

Working with SVGAlib Fonts

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.


SuperVGA Graphics Library — SVGAlib for short — is a low level graphics library for Linux that eliminates having to delve into the complexities of the X Windows system. One aspect of SVGAlib that frequently baffles programmers, however, is the use of fonts. Many coders find themselves with more questions than answers on the subject. How are SVGAlib fonts created? How are they displayed? Several programs (such as the Linux game Sasteroids) clearly use lettering on the screen, yet there’s no obvious explanation given. You won’t find any tutorials regarding SVGAlib fonts on the Net, nor will you find any mention of fonts in the standard FAQs. It almost seems like there’s been a deliberate omission — a veritable conspiracy of silence.

This article aims to give you all the basic information you need to program SVGAlib fonts, from manipulating existing character sets to creating new ones. You’ll learn where to download some good typefaces (hint: www.svgalib.org), and how to use a new external library to display TrueType fonts — the visually superior, cross-platform standard. But let’s start at the beginning, by considering some basics about fonts.


Types of Fonts


It’s important to know that there are two types of fonts available: bitmapped and scalable. These two font types are nearly identical in concept to the bitmapped and vectored graphic files commonly available. A bitmapped font (the simpler of the two) is like a BMP or GIF image. It’s stored as a matrix (or grid) of pixel values, and is displayed exactly as it’s written — no interpretation is involved. It’s a perfect copy, but as a result, it can’t be resized without a significant loss of quality. See the diagram below for an example.

Figure 1: Bitmapped Font
Figure 1: Bitmapped Font



A scalable font, on the other hand, is stored in the same manner as a vectored graphic. Rather than being mapped pixel by pixel, a scalable font’s “stylistic information” is saved in its data file. This information includes the angles of each character’s curves, and how they’re proportioned. Because no actual picture exists, it’s up to the program that reads in the font to construct it for display. This adds some processing overhead, but the end result is well worth it. Scalable fonts can be resized without losing any quality, and often have smooth (or antialiased) edges. Now, have a look at the next diagram for an example of a scalable font. It’s quite nice, isn’t it? This is Arial, a TrueType font.

Figure 2: Scalable Font
Figure 2: Scalable Font



Unfortunately, SVGAlib is only capable of displaying bitmapped fonts. (However, we can get around that later by using another library). The good news is that the code is fairly simple. To use it, you’ll have to employ SVGAlib’s sister library: vgagl.

Here’s how you prepare a bitmapped font for use, using gl_font8x8:

void *font = malloc(256 * FONT_WIDTH * FONT_HEIGHT * BYTESPERPIXEL);
gl_expandfont(FONT_WIDTH, FONT_HEIGHT, COLOR, gl_font8x8, font);
gl_setfont(FONT_WIDTH, FONT_HEIGHT, font);


This loads SVGAlib’s one internal font, gl_font8x8, into memory. The “8×8” means that each character in the font is eight pixels high by eight pixels across. That means you’ll need to define

<font color=”0000EE”>FONT_HEIGHT</font>
and

<font color=”0000EE”>FONT_WIDTH</font>
as being 8.

<font color=”0000EE”>COLOR</font>
can be any color value, as long as it’s within the parameters of your chosen screen mode. Finally,

<font color=”0000EE”>BYTESPERPIXEL</font>
is defined in vgagl.h.

The next step is to actually display your words on the screen. This is accomplished with gl_write():

gl_write(10, 10, "Hello, world.");


The first two arguments (10 and 10) place the words on the screen — they refer to the x and y corrdinates of the upper left-hand corner of the first character.

Here’s a complete program, using the four commands you just learned:

#include <stdlib.h>
#include <vga.h>
#include <vgagl.h>

#define FONT_HEIGHT 8
#define FONT_WIDTH 8

void prepare_font(void);

int main(void)
{
int x = 10,
y = 10;

char text[] = "Hello, world!";

vga_init();
vga_setmode(G320x200x256);
gl_setcontextvga(G320x200x256);

prepare_font();
gl_write(x, y, text);

vga_getch();

vga_setmode(TEXT);

return 0;
}

void prepare_font(void)
{
int color = 15; /* white */

void *font = malloc(256 * FONT_WIDTH * FONT_HEIGHT * BYTESPERPIXEL);
gl_expandfont(FONT_WIDTH, FONT_HEIGHT, color, gl_font8x8, font);
gl_setfont(FONT_WIDTH, FONT_HEIGHT, font);


Upon running this program, you should see the words “Hello, world!” displayed in white at the top of the screen. Hooray! You’ve done it. Feel free to play around — for example, try varying the placement of your text by providing different x and y values to gl_write().

It’s worth noting that gl_writen(int x, int y, int n, char *s) is identical to gl_write(), except that it only displays the first “n” characters of your string.

Should you choose to include your string directly in gl_write() or gl_writen(), you’ll have to terminate it with “” like so:


gl_write(10, 10, “Hello, World!”);

If you don’t, you won’t see any results.


Bitmapped Fonts


After you’ve experimented with gl_font8x8, you’ll probably want to try your hand with some other character sets. This, too, is easy. Other fonts are simply stored as “char” arrays, and look like this:

unsigned char font01[2048] =
{
124,130,186,162,186,130,124,0,126,129,165,129,165,153,129,126,
126,129,165,129,153,165,129,126,108,246,246,254,124,56,16,0,
16,56,124,254,124,56,16,0,16,56,84,254,84,16,56,0,
56,124,254,254,108,16,56,0,16,24,20,20,48,112,96,0,
254,254,254,238,254,254,254,0,236,138,138,170,170,170,236,0,
142,136,136,140,136,136,232,0,174,170,170,234,170,170,174,0,
238,136,136,204,136,136,136,0,238,138,138,142,140,138,234,0,
62,34,62,34,102,238,204,0,16,84,40,198,40,84,16,0,
240,248,252,254,252,248,240,0,30,62,126,254,126,62,30,0,
16,56,124,16,124,56,16,0,238,238,238,238,238,0,238,0,

...

48,48,48,240,0,0,0,0,0,0,0,255,0,0,0,0,
24,24,24,31,0,0,0,0,24,24,24,24,24,24,24,24,
136,34,136,34,136,34,136,34,85,170,85,170,85,170,85,170,
68,170,68,170,68,170,68,170,51,102,204,153,51,102,204,153,
204,102,51,153,204,102,51,153,199,143,31,62,124,248,241,227,
227,241,248,124,62,31,143,199,174,128,186,2,234,8,171,32
}


(I went ahead and eliminated some of the lines for brevity). A full font array will have information for 256 characters. Each character contained in an 8 x 8 font is comprised of eight numbers, which means that a complete 8 x 8 font has 2048 numeric values (256 * 8 = 2048).

To use a “char” font, simply substitute “gl_font8x8” with the name of your char array, like so:

gl_expandfont(WIDTH, HEIGHT, color, font01, font);


You can find this font, and more, at the official SVGAlib website: www.svgalib.org


Creating Bitmapped Fonts


You now know that each character in an 8-pixel by 8-pixel bitmapped font is defined by eight values. This, in turn, means that a 256-character font requires 2048 numbers. That’s fine, but what do those numbers mean? Would anything bad happen if you changed them? And how can you create your own fonts? Let’s find out.

Each character in an 8 x 8 font is actually comprised of eight horizontal lines, containing eight pixels apiece. Accordingly, each font number refers to one of the eight horizontal lines. The lines run from top to bottom, so the numbers refer to the lines in sequential order. For example, a capital “S” can be created with the numbers 126, 128, 128, 124, 2, 2, 252, and 0. (The 0 is to provide a buffer between multiple lines of text). See the illustration below for a better representation.

Figure 3: Bitmap Chart
Figure 3: Bitmap Chart



Did you see how the eight numbers made the letter “S”? Now, what would happen if you just used the number “124” for all eight lines? Here’s how that would look:

Figure 4: Character Array
Figure 4: Character Array



So, as you can see, the numbers in the font’s char array logically create each character in the font.

That said, how do you know which numbers do what? Is it random? No — it’s organized rather well. As you know, each of the character’s eight lines contains eight pixels. That means that there are 256 possible combinations of pixels in each line. (2 possible values [on or off] to the 8th power). So, the numbers 0 – 255 match the 256 possible horizontal lines. Further, far from being random values, they’re instead ordered in a logical, binary sequence. The first number, 0, is an entirely blank line. If “0” equals a blank pixel, and “1” equals a painted pixel, line 0 would look like this:

00000000


The next line, 1, would look like this:

00000001


In turn, lines 2 – 10 would be as follows:

00000010 = 2 (compare this with the "2" line in the letter "S" above)
00000011 = 3
00000100 = 4
00000101 = 5
00000110 = 6
00000111 = 7
00001000 = 8
00001001 = 9
00001010 = 10


Can you see the binary sequence? Of course, line 255 would be this:

11111111 = 255


Although I won’t map out all of the 256 font “strips” for you, it would be trivial for you to do this on your own. And to create your own font, you would merely need to match the eight appropriate font strip numbers to the character you were creating. (Then, repeat for the other 255 characters). For more fun, you can even skip over the characters you won’t be using by using eight zeros instead.

Of course, this process can be time consuming. Instead, you may find it useful to use a simple program called FontBuilder that I’ve developed. FontBuilder provides a basic graphical interface for drawing the characters for a new font. When you’re finished, it figures out what font strips are needed, and it writes the font file (or char array) for you. See the SVGAlib website for a copy. What a relief!


Conclusion


Hopefully this article helped to clear up the air of mystery surrounding fonts and text in SVGAlib. Once you’ve written a program or two involving fonts, you’ll find that they’re just as easy to implement as anything else in console graphics. What’s more, you might want to contribute your own bitmapped font to the SVGAlib site! Just send it to fonts@svgalib.org, and you’ll get full credit. See, isn’t Open Source fun?


Related Resources

  1. SVGAlib home page Web-based resource to download the most recent version of SVGAlib, ask for help and read tutorials.
  2. Brion Vibber’s FAQ More help for SVGAlib developers.
  3. SVGAlib mailing list The Rutgers mailing list. Very helpful.
  4. SVGAlib development site Matan Ziv-Av’s home page. You’ll find the latest beta version of SVGAlib here.
  5. FreeType A Free, Quality, and Portable Font Engine.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories