Datamation 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.
What Is a Font?
A font can be defined as a set of typewritten characters, all using a consistent style or design. You may be familiar with fonts from other operating systems, such as Arial or Helvetica. Perhaps you’ve used them on the web? Regardless, fonts are an integral part of today’s computing environment.
Fonts don’t have the ability to display themselves. Most fonts are contained within data files, which are then called by executables. (These data files are often in binary format, which means that they can’t be read by a text editor).
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.
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.
Bitmapped Fonts
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_HEIGHT |
and
FONT_WIDTH |
as being 8.
COLOR |
can be any color value, as long as it’s within the parameters of your chosen screen mode. Finally,
BYTESPERPIXEL |
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#include #include #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.
Different 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);
Finding Bitmapped Fonts
You can find this font, and more, at the official SVGAlib website: www.svgalib.org
|
Creating Bitmapped FontsYou 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. 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: 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! Scalable FontsAfter all that effort, though, you still can’t avoid the fact that bitmapped fonts are less than perfect. They *are* easy to use, but they just don’t cut it, so far as serious presentations go. Wouldn’t it be nice to be able to use regular fonts like those found in the Windows and Mac world? Finally, you can. Thanks to a recent and highly successful project called FreeType (www.freetype.org), TrueType fonts are now available for console graphics. The actual routines for screen rendering were ported from X11 to SVGAlib by the SVGAlib maintainer, Matan Ziv-Av. Thanks, Matan! The first step is to download, compile, and install the FreeType libraries. These go into the /usr/local/lib directory, so you’ll probably need to run ldconfig afterwards to re-synch (re-cache) the libraries in your system. Note that you’ll have to edit your Makefile if you don’t have X11 installed on your system — you’ll need to remove all references to the X Windows test programs, or you’ll get some compile-time errors. Next, you can download the SVGAlib demos from Matan Ziv-Av’s site: http://www.cs.bgu.ac.il/~zivav/misc/freetype-svga.tar.gz This will show you how to integrate FreeType into your own programs. Before you can display anything, however, you’ll need a TrueType font. I simply copied arial.ttf from my Windows machine. You’ll find all your fonts in C:WINDOWSFONTS, assuming you have a standard install. ConclusionHopefully 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
Jay Link is twenty-something and lives in Springfield, IL. He administrates InterLink BBS – an unintentionally nonprofit Internet service provider – in his fleeting spare moments as well as working various odd jobs to pay the rent. |
