The Current Situation

The standard fraction feature algorithm works like this:

1. Convert all numbers in the string to numerators.
2. Starting at the beginning of the string, convert any numerator following a slash or a denominator to a denominator.
3. Convert all instances of a slash to a fraction bar.

This works perfectly well from a programming standpoint, but from a user standpoint it is cumbersome. The user is required to select the precise text to which to apply fractions. This is a lot of work in practice. For example, it requires nine (9!) steps for the designer to set fractions in this simple list of ingredients.

Select “1/2”

Activate the fractions feature.

Select “1/4”

Activate the fractions feature.

Select “7/8”

Activate the fractions feature.

Select “1/3”

Activate the fractions feature.

Remove the spaces.

That is a lot of work. Now think about doing that in a 150 page cookbook.

A Possible Solution

So, what can be done? I kicked around the idea and came up with this algorithm:

1. Convert every instance of a slash preceded and followed by a figure to a fraction bar.
2. For every found fraction bar or numerator, look back one glyph. If the found glyph is a figure, convert it to a numerator. Do this for the 10 glyphs preceding the fraction bar until a non-figure is encountered.
3. For every glyph following a fraction bar or a denominator, if the glyph is a figure, convert it to a denominator. Do this until a non-figure is encountered.
4. Convert every space preceded by a figure and followed by a numerator to a thin space.

In code it looks like this:

@figures = [
    zero
    one
    two
    three
    four
    five
    six
    seven
    eight
    nine
];
@numerators = [
    zero.numerator
    one.numerator
    two.numerator
    three.numerator
    four.numerator
    five.numerator
    six.numerator
    seven.numerator
    eight.numerator
    nine.numerator
];
@denominators = [
    zero.denominator
    one.denominator
    two.denominator
    three.denominator
    four.denominator
    five.denominator
    six.denominator
    seven.denominator
    eight.denominator
nine.denominator
];

feature frac {
    sub @figures slash' @figures by fraction;

    lookup Numerator_1 {
        sub @figures'
        fraction by @numerators;
    } Numerator_1;

    lookup Numerator_2 {
        sub @figures'
        @numerators
        fraction by @numerators;
    } Numerator_2;

    lookup Numerator_3 {
        sub @figures'
        @numerators
        @numerators
        fraction by @numerators;
    } Numerator_3;

    lookup Numerator_4 {
        sub @figures'
        @numerators
        @numerators
        @numerators
        fraction by @numerators;
    } Numerator_4;

    lookup Numerator_5 {
        sub @figures'
        @numerators
        @numerators
        @numerators
        @numerators
        fraction by @numerators;
    } Numerator_5;

    lookup Numerator_6 {
        sub @figures'
        @numerators
        @numerators
        @numerators
        @numerators
        @numerators
        fraction by @numerators;
    } Numerator_6;

    lookup Numerator_7 {
        sub @figures'
        @numerators
        @numerators
        @numerators
        @numerators
        @numerators
        @numerators
        fraction by @numerators;
    } Numerator_7;

    lookup Numerator_8 {
        sub @figures'
        @numerators
        @numerators
        @numerators
        @numerators
        @numerators
        @numerators
        @numerators
        fraction by @numerators;
    } Numerator_8;

    lookup Numerator_9 {
        sub @figures'
        @numerators
        @numerators
        @numerators
        @numerators
        @numerators
        @numerators
        @numerators
        @numerators
        fraction by @numerators;
    } Numerator_9;

    lookup Numerator_10 {
        sub @figures'
        @numerators
        @numerators
        @numerators
        @numerators
        @numerators
        @numerators
        @numerators
        @numerators
        @numerators
        fraction by @numerators;
    } Numerator_10;

    lookup Denominator {
        sub [fraction @denominators]
        @figures' by @denominators;
    } Denominator;

    sub @figures space' @numerators by thinspace;
} frac;

How many steps does this require the user to perform? Two (2!). Actually, it could be less than two because they could activate fractions in their style sheet definition. In that case it would require them to perform zero (0!!!) steps to apply the fraction feature. In any case, here are the two steps:

Select all of the text.

Activate the fractions feature.

Done.

But

There are some drawbacks. This is what Kent and I have come up with so far:

1. This only works with fractions that have 10 or fewer numerators. In reality, is this an issue? I’m not certain, but it doesn’t seem likely. In any case, this could probably be extended to 20 numerators. I stopped at 10 to avoid the dreaded table overflow issue.
2. It requires a non-figure to act as an indication of the leading edge of the fraction. In this case I used the space. This won’t work for fractions formatted as “21/2” to represent 2 and one-half. Are fractions ever formatted this way? Maybe, maybe not.
3. If the user uses a font that implements this type of fraction feature and then switches to a font that implements an older style fraction feature, things will be broken. Any instances of this problem should be very visible to the user and manual intervention will solve it.
4. The common date format 04/16/08 will be considered a fraction and formatted as such. The user could simply turn off fractions in this text.
5. It isn’t what users are used to. This could be a legitimate issue, but if a user uses it in the way that they have been using the old fraction feature it will work properly.

That said, there are some clear advantages:

1. It makes much more sense from a user point of view. We are in the age of the “smart” OpenType font. We now make fonts that automatically insert ligatures and swashes, and users have come to expect this behavior. It seems that fractions should work the same way. I don’t think it would be a good idea for a user to activate fractions at all times, but this should make it much easier for users to apply the fraction feature to lots of text with a broad stroke.
2. This new algorithm preserves the space separating the integer and the fraction. This makes it far more usable in situations when this text needs to be sent to a feature-less environment, for example searching a PDF. If the user searches for “1 1/4” the appropriate result will be found. Using the old algorithm, plus the space removal mentioned above, the user would have to search for “11/4”. That looks like “eleven fourths” not “one and one fourth.”

I don’t think the potential problems outweigh the benefits for the user, but they should be taken into consideration. I tend to think in terms of “most case scenario” rather than “worst case scenario.” This algorithm isn’t perfect and it will fail 1% of the time. However, I think that 99% of the time it will work infinitely better than what users are used to.

Now What?

I haven’t actually deployed this in a font yet, but I’m going to give it some thought next time I write a fraction feature. Feel free to use this if you want to. If you do, please let me know how it works out.

As a child, I was fascinated by this sign. It was located along the route my family would take into Baton Rouge and I remember sitting in the backseat of our car with my face pressed against the window eagerly waiting to see it. I think this was the first time I ever paid attention to the way letters looked. This sign isn’t perfect, but it is still my favorite.

(Wow. It sure has been a long time since I posted anything. I have been more than busy…)

Most of the sign aficionados I know consider the advent of vacuformed and cut plastic signs to be the beginning of the end. They are probably right, but I’m still kind of obsessed with these things.

I adore “boring” signs like these two. They don’t need fancy swashes or anything like that to get the job done.

I suppose it’s not surprising that this place is near the taxidermist.

Some of the building owners seem to have gone out of their way to preserve old signs. They should get a trophy or something.

The ligature and the super thin parentheses on this one are stellar.

This place is covered in lettering like this. It’s crazy.

“Klein Bros.” That’s all it says. No “Hardware Store” or “Attorney at Law” or “Pet Hotel”. Thus, I have no idea what the Klein brothers do.

Nice afii10029.

I’ve been thinking about this tool since TypoTechnica 2005. During a round table discussion at that conference, Erik van Blokland and I made the case for a robust tool for testing OpenType features. Specifically, we stated that we felt that there was a huge need for a tool capable of programmatically testing OpenType features. We had been doing this with our other programming work, so it seemed natural that we should be able to do it with our OpenType feature work.

I waited for someone to build such a tool. Nothing happened, so I decided to build it myself. FeatureProof is the result. It allows you to interactively test features and analyze the results, browse the compiled feature data and execute programmatic test cases. It has become indispensable in my work.

You can download the application over at code.typesupply.com. There is a good bit of documentation there as well.

This is a beta release, so I would appreciate any bug reports.

Why am I doing this? I really care about type design. It is what I love. I don’t just love doing it myself, I love seeing other people produce excellent typefaces. So, hopefully this will help people do good work.

The code is housed at code.typesupply.com.

Enjoy.

Design

My background is in print, but I’ve designed several websites over the years so designing for the web is not a big change for me. That said, designing for the web has always been a source of minor frustration. I’ve never been able to express why until recently. Khoi Vinh articulated it perfectly a few weeks ago:

on the Web, design is not a method for implementing narrative

Exactly! I don’t have any problem dealing with the new interaction behaviors that the web has brought forth. I struggle with the fact that telling stories is very difficult on the web. I wanted my site to express my personality and get across the passion that I have for what I do. In other words, I wanted to tell the story of my work. I could have just put it all in a paragraph, made a simple image portfolio and been done with it, but that’s not how I do things. After a ton of experimentation, I settled on a fairly informal design with bright colors, lots of images and a casual tone of voice. Each typeface family has it’s own subsection where I can expound on the intricacies of ink swells and still have plenty of room to show big images of the typefaces doing what they do best. I don’t think what I settled on is groundbreaking, but I think it gets across who I am. I hope it does anyway. Please don’t tell me if it doesn’t.

Django

The earlier versions of my site consisted of static HTML that was either written by hand or generated with Corbon. That sucked. Several years ago I handled the design side of a big PHP/PostgreSQL based website. I know it’s a cliché at this point, but working with a dynamic system was an eye opener. When I decided that I wanted to do a big Type Supply site, I knew that it had to be database driven.

I’m fluent in Python. That means that I am legally required to hate PHP. (Kidding!) Thus, I had no interest in dealing with PHP again. I’ve been monitoring a few Python based web frameworks over the last couple of years. Django, TurboGears, web.py, etc. I decided to go with Django. It is a mature framework with an active development community, excellent documentation, a nice Python API and a clean template syntax. I couldn’t be happier with it. I had a working version of my site up and running within a few days. Sure, I rewrote it two times after that, but I’m a little bit of a perfectionist that way.

One of the great things about Django is its template system. Granted, some people argue for other template systems, but I think they are really starting to split hairs on this. It’s like arguing which ice cream flavor is better: vanilla or chocolate? I don’t care. I’m just happy that I have ice cream. Anyway, what was I saying? Oh yeah, the template system. One of the nice things about it is that it is possible to filter data. I’m using a handful of filters to process all of my text. My text is stored in the database in Markdown syntax. The text is pushed through the Markdown filter and then through the excellent Typogrify. Thus, my text is stored as plain text, not HTML, but I get nicely formatted HTML without doing any hard work.

On and on and on. You get the idea. I ♥ Django!

MochiKit

Up to this point I had never written any JavaScript. Not even a single alert("Hello World!") line. I always thought that I would hate it, but I was pleasantly surprised to learn that I don’t. It’s not Python, which I adore, but it isn’t bad. I wanted some simple effects on my site, fades between images, an interactive LetterSetter interface, etc. I wrote all of these from scratch. Then I wrote them from scratch again. Then I ditched all the code in favor of MochiKit. Yay MochiKit!

Coda

One of the things that has kept me away from web development has been my frustration with the tools used to develop sites. It has been a cobbled together mess. Then, along came Coda. Coda made me want to work on a new website. In fact, I had designed my new site a few months before Coda was released. It sat stagnant because the thought of jumping back into the web development whirlwind made me ill. I downloaded Coda the day it was released, licensed it a day or so later and started writing the code for my site. John Gruber wrote a thorough review of Coda that explains why it is so good. I do have one minor gripe: compiled Python files show up the file browser. Argh! My eyes! I reported this to Panic. Other than that, I’m really happy with the application.

HTML & CSS

All together now: typography on the web sucks! I’d write more on this, but I think the dead horse has been flogged enough.

One thing: Safari 3 users get a slightly different design than everyone else. Buttons have rounded corners and main elements have subtle drop shadows. I did all this stuff with the proposed CSS3 attributes that are supported by WebKit. I tried the rounded corner support in Firefox and Camino, but images inside the rounded elements were not properly clipped. Sorry Firefox.

The End

I think that’s it. I don’t develop websites very often, and it in the past it was torturous, but this was fun. I hope people like the result.

So, here I am. I tend to be shy, secretive about my work and more interested in listening than talking. However, every now and then I do have something to say. I plan on talking about things that I know well: type design, graphic design and type technology. I hope you’ll find it interesting.