The slabtype algorithm, Part 2: Initial calculations

Algorithms, Flash, Graphic Design, Interactive Design, Typography

This is the second in a four-part graphical dissection of the “slabtype” text layout algorithm I developed for Public Secrets. For an introduction to the algorithm, visit The slabtype algorithm, Part 1: Background.

Execution of the slabtype algorithm breaks down into three phases: initial calculations, iterative line splitting, and final layout. In this post, we’ll tackle the initial calculations that set the stage for the work of the algorithm.

Three constants are used to constrain the results of the initial calculations. The first is the average aspect ratio of a single character of the font we plan to use (Alternate Gothic No. 3, in this case). This is important because it gives us a way to guess how wide a particular line of text is going to be without consuming precious time by actually laying it out. I looked at a selection of characters from the font and estimated the aspect ratio accordingly.

Average character aspect ratio

Next, I decided upon a character count for the “ideal line length” of text to be fit into the slab. Since I used the “squarified” variant of the treemap algorithm to generate the enclosing boxes, I could be confident that a fixed value would give good results, but a more truly dynamic implementation would derive the ideal line length from a pixel value for the average height or width of a single character in the ideal point size for the display.

Ideal line length, in characters

We multiply the average character aspect ratio by the ideal line length to arrive at an aspect ratio for the “ideal line”:

Ideal line aspect ratio

These constants are defined once at the beginning of the program. The calculations which follow are executed each time the algorithm is invoked.

We start with the text which the algorithm is tasked with laying out.

Source text

The algorithm is then supplied with the dimensions of the slab (box) into which the text is to be placed:

Enclosing box dimensions

We divide the width of the box by the aspect ratio of the “ideal line” of text which it is to contain, resulting in a pixel value for the height of this line.

Line height, in pixels

When we divide the height of the box by the height of the ideal line, we arrive at a hypothetical line count—an estimate of how many lines the text is going to have to be broken into to fit snugly within the box.

Hypothetical line count

Since we know the number of characters in our text, we divide it by our hypothetical line count to come up with an “ideal character count” per line of text.

Ideal character count per line

As we will see in the next part, this is a very important value—it becomes a benchmark to help us decide where to split the text into lines.

Coming soon: The slabtype algorithm, Part 3: Iterative line splitting


Page 1 of 1 pages