Oberon/ETH Oberon/Tutorial/FontEditor

These tutorial pages were written by André Fischer (afi) with editorial assistance of Hannes Marais, were hosted at the ETHZ and remain under the ETH license. Related content is found in the system via Book.Tool. Extended content is also available on paper. Some tutorial pages are in the WayBack archive.

Font Editor User's Guide

[ Text | Contents | Index | Master index ]

Objective

Learn how to create and modify fonts using the special purpose editor and the companion panel FontEditor. This simple and handy tool, is very useful to draw custom fonts. The font editor is an Oberon system extension using the facilities provided by the Rembrandt tool.

Estimated time: 30 minutes.

Installation

The FontEditor is delivered with Oberon for Windows as an archived application which must be installed first. Verify with System.Directory Win.FontTools* ~.

Using the FontEditor panel

A type-font (or font, in short) is a collection of screen or printer characters sharing a common typeface. Oberon is delivered with two custom designed font families created by Mr. H. Meier: "Syntax" and the more recent one named "Oberon". Each family consists of several collections of varying size (8, 10 12, 14, 16, 20 and 24 points - 1 point = 1/72 inch) and style (normal, italic, bold, and for "Syntax" only medium bold).

Further font families are delivered with the Oberon system:

"Math" in the sizes 10, 12, 14, 16, 20 and 24 points of the normal style
"Greek" in the sizes 10, 12, 14, 16, 20 and 24 points of the normal style
"Courier" in the sizes 8, 10 and 12 points of the normal style. This is the only non-proportional font available.

Note that, besides these font families, Oberon for Windows may also use installed TrueType fonts - see UserGuide.Text.

Open the FontEditor panel by executing the command:

Desktops.OpenDoc FontEditor.Panel

The top part of the panel presents a table of 256 buttons, one for each of the 256 8-bit combinations. Buttons are captioned with the corresponding displayable (or printable) character where applicable, and with the corresponding hexadecimal value otherwise. Note that only the buttons 00 to 7F are the standardized ASCII codes. The assignment of the buttons 80 to 96 (special language characters) is a property of Oberon.

Enter the name of one of the Oberon fonts, such as "Syntax12.Scn.Fnt" or "Oberon14.Pr3.Fnt" for a 300 dpi printer font, in the text field gadget below the table and (middle) click on the [Load] button. An implementation limitation makes it impossible to edit 600 dpi printer fonts with this tool. The bitmaps are too big; the 600 dpi fonts delivered with the system were contructed with another tool.

Move the mouse focus onto one of the buttons of the table, and press the middle mouse key to select the corresponding character, which then appears in original size in the white area at the lower right of the panel. Drag on that key and watch how the various characters are previewed in the white area. Release the key when the mouse focus is positioned on the character to edit. A picture viewer is opened to edit the character.

The buttons in the lower part of the panel have the following meaning:

[Load] loads the font specified in the text field above the button. This font replaces the current one, if one is loaded, and it can now be inspected and modified.

[Store] stores the current font in the file named in the text field above the button. Font file names (must) have the following name suffixes:

- .Scn.Fnt for display (Sreen) fonts
- .Pr2.Fnt or Pr3.Fnt for printer fonts with the respective resolutions of 200 or 300 dots per inch.

[Store Char *] stores the character appearing in the marked viewer in the current font. The viewer's NamePlate must contain the character itself or its hexadecimal value for a displayable character. For a non-displayable character it must be its hexadecimal value.

[Show String] opens an unnamed picture viewer displaying the string entered previously in the text field at the right. It is a preview which may be zoomed and to some extent edited (select, move and copy), but changes cannot be saved. This is useful for verifying the modifications to the currently loaded font.

New Viewer: When this check box is checked, the result of any of the three operations described below is presented in a new picture viewer. If it is not, the result appears in the current viewer.

[Flip H] flips the selection around the median line.

[Flip V] flips the selection around the median line.

[Turn 90] rotates the selection anticlockwise by 90 degrees.

Using the editor

Using the FontEditor panel, you have learned how to start editing a character by clicking on one of the buttons in the font table. The character picture is presented in a picture viewer having properties very similar to the picture viewer described in the Rembrandt tutorial.

The character appears magnified at its maximum, in a white area with a grid. This area does not necessarily cover the entire viewer. Every square corresponds to one pixel in real size. The mouse focus, or cursor, is a cross formed by intersecting horizontal and vertical line segments. It appears as soon as the mouse focus crosses the boundary of the picture. Pressing the left mouse key lets the caret appear, a cross rotated by 45 degrees, which snaps on the grid and marks the insertion point. Dragging on the key, tracks the caret. The caret can also be set by clicking the left key.

Character metrics

File:OberonFontEditor1.png

The imaging model of characters defines that a character is contained in a box defined by a set of metric data x, y, w, h and dx, in a system of coordinates represented by the two red orthogonal lines. The origin of the coordinates is called the reference point and the X-axis is called the base line. (x, y) is a vector from the current reference point to the origin of the box. w and h are the width and the height of the box, and dx is the distance to the reference point of the next character on the same base line, that is the abscissa of the blue line.

The metrics of a character can be retrieved by program, as is shown below:

PROCEDURE ShowC*;
  VAR
    dx, x, y, w, h: INTEGER;
    pat: LONGINT;
    ch: CHAR;
BEGIN
  ch := "g";
  Fonts.GetChar (Fonts.This("Syntax12.Scn.Fnt"),
  ch, dx, x, y, w, h, pat);
  Out.Int(x, 3), ....
  (* Visualizing the values produces,
     for the example letter in the example font,
     x = 1, y = -3, w = 5, h = 10 and dx = 6 *)
END ShowC;

Font metrics

The abstract data type Font, defined in the Fonts module, represents a collection of characters. The font attributes are:

Fonts.height: the minimum distance between lines. This distance is modified when the Vertical offset is modified.

Fonts.minX, Fonts.maxX, Fonts.minY, Fonts.maxY: are the extremal values of the box enclosing all characters when their base points are aligned at (0, 0).

The metrics of a font can be retrieved by program, as is shown below:

PROCEDURE ShowF*;
  VAR
    F: Fonts.Font;
BEGIN
  F := Fonts.This("Syntax12.Scn.Fnt");
  Out.Int(F.height, 3); ...
  (* Visualizing the values produces, for the example font,
    F.height = 14, F.minX = 0, F.maxX = 13,
    F.minY = -4 and F.maxY = 10 *)
END ShowF;

Vertical offset

When text is edited, characters normally have their base line aligned. Characters may however be offset by a few points above or below the base line of the neighbouring characters to let them appear as superscript or subscript characters for instance. Example: sin2 x + cos2 x = 1. or aij

This is obtained by using the TextDocs.ChangeOffset command. In that case the distance to the neighbouring lines is not equal to Fonts.height anymore, but is increased.

Zooming a picture

In addition to the standard buttons, the title bar features two extra buttons used for zooming.

[+] magnifies the selection, or the entire picture if there is none. The button may be clicked 5 times in succession to obtain a magnification of 16. This makes it very easy to edit a character picture dot-wise.

[-] reduces the size of the character picture. The button may be clicked a maximum of 5 times in succession until the original size is restored, and not beyond.

Editing with the mouse

Editing of a character is essentially done with middle mouse key clicks. However, the system behaviour differs depending on which of the two modi "Pixel" or "Metric" has been selected. These two buttons are radio buttons.

[Pixel] When Pixel is selected, position the mouse focus on a square of the grid. If the square is white, it changes to black when the middle mouse key is clicked. If it is black, it changes to white. Instead of editing the pattern dot-wise, you may drag on the middle key to process all the dots on a trajectory. If you started on a black square, it and all further dots are changed to white, and conversely. Changes are immediately reflected in the small white area in the panel.

Useful hint: to ease character retouching, make a copy of the viewer first, then magnify either of the two views as required. Whatever is retouched in the zoomed picture will be reflected in the original.

[Metric] When Metric is selected, the colored metric lines can be moved. Position the mouse cursor at the proximity of the line to move, press the middle mouse key, and drag on it in the direction of the line until the line is "captured". From that moment, a vertical line can be moved sideways, or the horizontal line up and down, in discrete intervals of the snapping grid. Release the key when the line is correctly positioned.

The mouse commands otherwise comply with the Oberon standard.

	Left key	Middle key	Right key
alone	(track and) set caret	see above	Track selection
+ left			Delete selection
+ middle	Set caret and copy selection to caret		Copy selection over to caret

Selection

Clicking the right mouse key (anywhere in the viewer) selects the entire picture. The cursor changes to a flat hand and the entire white area is surrounded by a fat frame. Clicking again, deselects the picture and restores the cursor.

Pressing the key and dragging on it, tracks the selection which is delimited by a rubber band rectangle. When the key is released, a fat selection frame is drawn. When copying a selection, the caret may be set in a picture viewer different from the viewer containing the selection.

Moving a picture

Moving the white area in the viewer can be done in two ways. First, select the entire area with a right mouse click, then press the middle mouse key and drag. Second, if the area does not cover the viewer entirely, place the mouse focus outside the area, press the middle mouse key (the cursor changes to a flat hand), and drag. In both cases, when the white area is correctly positioned, release the key.

When editing is completed, close the picture viewer(s) and store the character in the current font.

Printing the character picture

To print a character picture, mark it and either:
- click the [Print *] button in the Rembrandt panel or
- execute the command: Desktops.PrintDoc printDevice * ~

Using the Windows Font resource tool

If you are using Oberon for Windows, and have created or modified a font with the font editor, you can improve the performance of your display system by compiling Windows font resources from the Oberon raster font. Note that this applies to custom fonts developed or modified using the FontEditor tool. All the fonts distributed with Oberon for Windows are already available as Windows font resources in the sub-directory System. Oberon for Windows uses Windows fonts for printing.The conversion is performed using the sole command in the FontRes module.

FontRes.Convert { OberonFontFile => [Path]WindowsFontFile} ~ | ^ processes a list of name pairs, separated by "=>". The Oberon display font file oberonFontFile is converted to a Windows FON resource. If the file already exists, it is overwritten. The name of a FON file consists of four parts: NNNNNSSF.FON where:

NNNNN first five letters of the font family name (e.g. Synta for Syntax, Math for Math)
SS one or two digits for font size
F optional character for face style (b = bold, i = italics, m = medium)
FON standard name extension

FontRes.Tool contains all that is necessary to convert the entire Syntax font family if need be, and this text can be modified for converting other fonts.

Note: The Windows .FON file format used to produce the resource is documented in the Microsoft Windows Programmer's Reference, Vol. 4, Chapter 4: Font File Format.