<- previous    index    next ->

Lecture 7, Text Sizes and Fonts, International

Text size is measured in "points".
One "point" is 1/72 of an inch.
Thus text drawn at 72pt would be about one inch high.
(On paper!, it may be almost any size on a computer screen.)

On a computer screen, a 5 by 7 size means each letter of text
fits in a box:  5 pixels wide by 7 pixels high.

Text such as lower case letters 'p' and 'q' extend below
the baseline for placing text. Upper case letters and language
marks may extend above the normal character height.
A letter or symbol in a font is called a glyph.

The bad news about fonts is that they require a lot of work
to create and thus are almost always copyrighted.

The good news is that your computer probably has many fonts available
for your program to use.

Fonts may have casual names such as Times Roman 12pt or
Courier 10pt. The "official" computer name is presented later.

Fonts may have proportional spacing, e.g. Times Roman,
where 'm' takes more space than 'i', and additionally
may be rendered using kerning that may place "AT" closer
together than 'A' 'T'.

Fonts may have fixed spacing, e.g. Courier, where every letter,
glyph, takes the same width.

Most people prefer proportional kerned spacing when reading
a newspaper or book, yet looking at computer source code
most prefer fixed width spacing.

TestFonts.java shows Courier and Times New Roman



and writes out the available fonts TestFonts.outs

test_shape.py shows a few Python fonts 




If your application needs the user to select a font, a style and a size,
then a Font Selection Box may be the most user friendly. Below is the
Word Perfect and Microsoft Word font selection windows.





Using X Windows you can experiment with creating or modifying
a font using the X Font Editor, xfed.c
on font timr24.bdf or font courr24.bdf
"bdf" indicates Berkeley Distribution Font IIRC.
Note the line starting "FONT" that has the official name of the font.
Fonts are registered so that every font has a unique official
designation.

To find the fonts available on your X Windows system:
In X Windows use font_list.c and
font_show.c
Note the font designation format in these two programs.

font_list.out shows over 500 fonts
on one system where font_list.c was run.

On Microsoft Windows, the most common font format is True Type Font.
In C:\  the command    dir /s *.ttf    will show the available fonts.
An example of one PC shows over 1300 font files, yet there is a
lot of duplication in the 92MB of disk space used. pc_ttf.fonts

There are a number of programs for converting from one font format
to another font format. ttf2pt1 is one example.

Windows-based applications can use three different kinds of font technologies
to display and print text: raster, vector, and TrueType. 
                           ------  ------      --------

The differences between these fonts reflect the way that the glyph for
each character or symbol is stored in the respective font file.

In raster fonts, a glyph is a bitmap that application programs
use to draw a single character or symbol in the font. 

In vector fonts, a glyph is a collection of line endpoints that define
the line segments that application programs  use to draw a character
or symbol in the font.

In TrueType fonts, a glyph is a collection of line and curve commands
as well as a collection of hints. The line and curve commands are used
to define the outline of the bitmap for a character or symbol in the
TrueType font. The hints are used to adjust the length of the lines and
shapes of the curves used to draw the character or symbol. These hints and
the respective adjustments are based on the amount of scaling used to reduce
or increase the size of the glyph.

Because the bitmaps for each glyph in a raster font are designed for a specific
resolution of device, raster fonts are generally considered to be device
dependent. Vector fonts, on the other hand, are not device dependent, because
each glyph is stored as a collection of scalable lines. However, vector fonts
are generally drawn more slowly than raster or TrueType fonts. TrueType fonts
provide both relatively fast drawing speed and true device independence. By
using the hints associated with a glyph, a developer can scale the characters
from a TrueType font up or down and still maintain their original shape. As
previously mentioned, the glyphs for a font are stored in a font file.

For raster and vector fonts, the font data is divided into two
parts: a header describing the font's metrics and the glyph data. A
font file for a raster or vector font is identified by the .FON
filename extension. For TrueType fonts, there are two files for each font.
The first file contains a relatively short header and the second contains
the actual font data. The first file is identified by a .FOT extension
and the second is identified by a .TTF extension.

The OpenType font format is an extension of the TrueType font format,
adding support for PostScript font data. The OpenType font format was
developed jointly by Microsoft and Adobe. OpenType fonts and the operating
system services which support OpenType fonts provide users with a simple
way to install and use fonts, whether the fonts contain TrueType outlines
or CFF (PostScript) outlines.

The OpenType font format addresses the following goals:
  broader multi-platform support
  better support for international character sets
  better protection for font data
  smaller file sizes to make font distribution more efficient
  broader support for advanced typographic control
  
OpenType fonts are also referred to as TrueType Open v.2.0 fonts, because they
use the TrueType 'sfnt' font file format. PostScript data included in OpenType
fonts may be directly rasterized or converted to the TrueType outline format
for rendering, depending on which rasterizers have been installed in the host
operating system. But the user model is the same: OpenType fonts just work.
Users will not need to be aware of the type of outline data in OpenType fonts.
And font creators can use whichever outline format they feel provides the best
set of features for their work, without worrying about limiting a font's
usability

OpenType fonts can include the OpenType Layout tables, which allow font
creators to design better international and high-end typographic fonts.
The OpenType Layout tables contain information on glyph substitution, glyph
positioning, justification, and baseline positioning, enabling text processing
applications to improve text layout.

As with TrueType fonts, OpenType fonts allow the handling of large glyph sets
using Unicode encoding. Such encoding allows broad international support,
as well as support for typographic glyph variants.


What can happen if your GUI program is executed on a system different
from the development system?  Assuming the program runs and uses some
neat fonts, what can happen?  Well two common approaches are to just
show a blob if a font is not available on the users system or choose
a default font to try to give the user a workable system. Note that
fonts are typically installed on a specific computer. Not all users
have large numbers of fonts.  Some GUI applications carry along
their own set of fonts, as was shown  pc_ttf.fonts
in various directories.

International, language independent

If there is any chance your code might be used in a non English speaking country, do the following: Do not have any text in any graphic. Not in .jpg, .png, .tif, .gif, etc. For every string of text that might be displayed, put the text string in a file or files. Reference the file and string to draw the text. You might even include the font, font size, bold, etc. in the file. Then an international version of your program would just deliver a different file or files with that native language. Your code would not have to be changed. Also, think about avoiding local, to your country, colloquial symbols or symbols that may be objectionable to other countries. Generally avoid politics and religion if there is any chance of internationalization.

Below is only for struggling Java users:

Some example g.drawString examples using various fonts in public void paint(Graphics g) font cur16 = new Font("courier", Font.BOLD, 16); g.setFont(cur16); g.setColor(Color.green); g.drawString("courier 16 in green", 100, 50); // at x=100, y=50 More examples and one example of 256 glyphs, and unicode glyph TestFonts2.java TestFonts2.out list of font names, families For Unicode glyphs see http://www.unicode.org/charts/charindex.html

Below is only for struggling OpenGL users:

In OpenGL using GLUT the following bitmap fonts are available: GLUT_BITMAP_HELVETICA_10 GLUT_BITMAP_HELVETICA_12 GLUT_BITMAP_HELVETICA_18 GLUT_BITMAP_TIMES_ROMAN_10 GLUT_BITMAP_TIMES_ROMAN_24 GLUT_BITMAP_9_BY_15 GLUT_BITMAP_8_BY_13 Bitmap fonts do not move with the scene and do not scale when the window size changes. These are rendered using code such as 'show_text' from text_in.c void show_text(GLfloat x, GLfloat y, char msg[]) { int len, i; glPushMatrix(); glRasterPos2f(x, y); len = strlen(msg); for (i = 0; i<len; i++) glutBitmapCharacter(GLUT_BITMAP_HELVETICA_12, msg[i]); glPopMatrix(); } /* end show_text */ Then in 'display' set the color or material and render the text: glLoadIdentity(); glColor3f(0.0, 0.0, 0.0); /* black */ show_text(-0.5, -1.0, "user input, file name"); If you do not see your text: If using lighting, be sure material is applied to the text. If using lighting, be sure the 'Z' coordinate is correct to receive the light on the front of the text. In various perspective views, it may be hard to figure out where to place the text. One extreme measure is to use the second projection as in: static void drawText(int x, int y, char * msg) { int i, len; glMatrixMode(GL_PROJECTION); glPushMatrix(); glLoadIdentity(); glOrtho(0, winWidth, 0, winHeight, -1, 1); glMatrixMode(GL_MODELVIEW); glPushMatrix(); glLoadIdentity(); glColor3f(1.0f, 1.0f, 0.0f); glRasterPos2i(x, y); len = strlen(msg); for (i=0; i<len; i++) glutBitmapCharacter(GLUT_BITMAP_HELVETICA_12, msg[i]); glPopMatrix(); glPopMatrix(); } In OpenGL there are stroke fonts that move with objects and scale when the window size changes. These fonts include: GLUT_STROKE_ROMAN GLUT_STROKE_MONO_ROMAN static void drawText(GLfloat x, GLfloat y, char text[]) { char *p; glPushMatrix(); glLoadIdentity(); glTranslatef(x, y, 0.0); glScalef(0.01, 0.01, 0.0); /* 0.1 to 0.001 as required */ for(p=text; *p; p++) glutStrokeCharacter(GLUT_STROKE_ROMAN, *p); glPopMatrix(); } Then in 'display' call the 'drawText' function using: glLoadIdentity (); glEnable(GL_LINE_SMOOTH); glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); glEnable(GL_BLEND); glLineWidth(1.0); /* glColor3f or material set here */ drawText(3.0, 3.0, "Roman_stroke"); glLineWidth(2.0); drawText(2.0, 6.0, "width 2 Roman_stroke");
    <- previous    index    next ->

Other links

Many web sites on Java GUI, AWT, Swing, etc.
Many web sites on Python wx, tk, qt, etc.

Go to top