October 1, 2009 11:56 am

Fraction Fever 2

A while back I described an idea for a different approach to implementing a fraction feature. Since then, I have gotten feedback from Karsten Luecke and others, the algorithm has been improved and a large number of fonts have been released that use this implementation. The revised code is below. It now handles things like 2009/10/01, 1/22/333/4444/55555/666666/7777777 and so on. I haven’t modified this in a few months so I consider it “stable.” As before, feel free to use this if you want to, but do so at your own risk, it is provided “AS IS”, my company, Type Supply, and I are not liable for anything, etc., etc. etc.

The revised code:

@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 {

   lookup FractionBar {
        ignore sub slash
            @figures
            @figures
            @figures
            @figures
            @figures
            @figures
            @figures
            @figures
            @figures
            @figures
            slash';
        ignore sub slash'
            @figures
            @figures
            @figures
            @figures
            @figures
            @figures
            @figures
            @figures
            @figures
            @figures
            slash;
        ignore sub slash
            @figures
            @figures
            @figures
            @figures
            @figures
            @figures
            @figures
            @figures
            @figures
            slash';
        ignore sub slash'
            @figures
            @figures
            @figures
            @figures
            @figures
            @figures
            @figures
            @figures
            @figures
            slash;
        ignore sub slash
            @figures
            @figures
            @figures
            @figures
            @figures
            @figures
            @figures
            @figures
            slash';
        ignore sub slash'
            @figures
            @figures
            @figures
            @figures
            @figures
            @figures
            @figures
            @figures
            slash;
        ignore sub slash
            @figures
            @figures
            @figures
            @figures
            @figures
            @figures
            @figures
            slash';
        ignore sub slash'
            @figures
            @figures
            @figures
            @figures
            @figures
            @figures
            @figures
            slash;
        ignore sub slash
            @figures
            @figures
            @figures
            @figures
            @figures
            @figures
            slash';
        ignore sub slash'
            @figures
            @figures
            @figures
            @figures
            @figures
            @figures
            slash;
        ignore sub slash
            @figures
            @figures
            @figures
            @figures
            @figures
            slash';
        ignore sub slash'
            @figures
            @figures
            @figures
            @figures
            @figures
            slash;
        ignore sub slash
            @figures
            @figures
            @figures
            @figures
            slash';
        ignore sub slash'
            @figures
            @figures
            @figures
            @figures
            slash;
        ignore sub slash
            @figures
            @figures
            @figures
            slash';
        ignore sub slash'
            @figures
            @figures
            @figures
            slash;
        ignore sub slash
            @figures
            @figures
            slash';
        ignore sub slash'
            @figures
            @figures
            slash;
        ignore sub slash
            @figures
            slash';
        ignore sub slash'
            @figures
            slash;
        sub @figures slash' @figures by fraction;
   } FractionBar;

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

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

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

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

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

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

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

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

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

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

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

   sub @figures space' @numerators by thinspace;

} frac;

PS: No, I don’t always break lines like this in my feature code. I did it to fit the column width here. Remove the unnecessary line breaks if you want to.

July 15, 2009 8:16 pm

.webfont Proposal

A quick note about web font progress: Erik van Blokland and I have been working on a new web font format. You can read all about it on the W3C WWW-Font mailing list.

Update: Lots of foundries are liking it.

October 9, 2008 9:37 am

Comparing Font Binaries

Yesterday I had to dive into a large number of fonts to fix a tiny bug. It sounds easy enough, but font mastering these days is a process of educated guessing, pure guessing, crashing software, MacGyver like problem solving and finger crossing. As a result of this chaos, I’ve gotten into the habit of testing font binaries. In this case, I wanted to compare the new files to the old files to make sure that the only differences were related to the bug fix. This is actually very easy to do. I usually dump the OpenType files to XML with Just van Rossum’s indispensable TTX and compare the files with TextWrangler/BBEdit/FileMerge/Whatever. However, in this case I had a large number of files to look at and it would have taken me days to sort through all of them. Python to the rescue.

I put together a script (below) that dumped all files to XML with FontTools, compared them and reported the results. You’ll need to have FontTools installed and you’ll need to run this in Terminal (or something that pipes a script to Terminal like TextMate) on the Mac. (Somewhere else on Windows.)

import os
import glob
from difflib import Differ
from fontTools.ttLib import TTFont

# Paths to the directories containing the fonts to compare.
oldDirectory = "/path/to/a/directory/of/old/fonts"
newDirectory = "/path/to/a/directory/of/new/fonts"

# Find all OTF file names.
pattern = os.path.join(oldDirectory, "*.otf")
fileNames = glob.glob(pattern)
fileNames = [os.path.basename(path) for path in fileNames]

# A function that filters out unwanted reports.
# It returns True if the line should be ignored
# and False if the line is relevant.
def ignoreLine(line):
    # OS/2 checksum
    if line.startswith("-     <checkSumAdjustment value="):
        return True
    if line.startswith("+     <checkSumAdjustment value="):
        return True
    # OS/2 created
    if line.startswith("-     <created value="):
        return True
    if line.startswith("+     <created value="):
        return True
    # OS/2 modified
    if line.startswith("-     <modified value="):
        return True
    if line.startswith("+     <modified value="):
        return True
    # fallback
    return False

# A place to store all reports.
report = []

# Run through all fonts.
for fileName in fileNames:
    # Construct the needed paths.
    oldFontPath = os.path.join(oldDirectory, fileName)
    newFontPath = os.path.join(newDirectory, fileName)
    oldTtxPath = os.path.splitext(oldFontPath)[0] + ".ttx"
    newTtxPath = os.path.splitext(newFontPath)[0] + ".ttx"
    # Create ttx for both of the fonts.
    ttxText = []
    paths = [
        (oldFontPath, oldTtxPath),
        (newFontPath, newTtxPath)
    ]
    for fontPath, ttxPath in paths:
        # Open the font.
        font = TTFont(fontPath)
        # Write ttx.
        font.saveXML(ttxPath)
        # Close the font.
        font.close()
        # Read the ttx.
        f = open(ttxPath)
        ttx = f.read()
        f.close()
        # Store the ttx.
        ttxText.append(ttx)
        # Remove the ttx path.
        os.remove(ttxPath)
    oldTtx, newTtx = ttxText
    # Find differences between the two ttx reports.
    diffs = []
    differ = Differ()
    oldTtx = oldTtx.splitlines()
    newTtx = newTtx.splitlines()
    result = differ.compare(oldTtx, newTtx)
    for line in result:
        # Only pay attention to the lines beginning
        # with - and +. (See the difflib documentation
        # for information output.)
        if not line[0] in ("-", "+"):
            continue
        # Pass the line to the line filter to see
        # if it is relevant.
        if not ignoreLine(line):
            diffs.append(line)
    # If diffs were found, add them to the report.
    if diffs:
        report.append("-" * len(fileName))
        report.append(fileName)
        report.append("-" * len(fileName))
        report += diffs

# Finally, print the report.
print "\n".join(report)

The output looks like this:

-------------
Some-Font.otf
-------------
-     <fontRevision value="2.0"/>
+     <fontRevision value="2.001"/>
-       Version 2.000;PS 002.000;hotconv 1.0.50;makeotf.lib2.0.16970
+       Version 2.001;PS 002.001;hotconv 1.0.50;makeotf.lib2.0.16970
-       Version 2.000;PS 002.000;hotconv 1.0.50;makeotf.lib2.0.16970
+       Version 2.001;PS 002.001;hotconv 1.0.50;makeotf.lib2.0.16970
-       <version value="002.000"/>
+       <version value="002.001"/>

July 8, 2008 3:01 pm

Studio Lettering

At long last, Ken Barber’s Studio Lettering is available to the public. I wrote the OpenType features for these fonts, so I thought that I’d give a quick behind the scenes tour. If you are interested, Ken and I will be explaining more of the overall logic in detail at the next ATypI conference.

This Took Forever

Ken and I started talking seriously about the features when I was still working at House. I think the first time we sat down and started sketching out the desired behavior was right after the Ed Benguiat collection was released in late 2004. We kicked ideas around for the next couple of years while Ken worked on the drawing. In 2005 we presented some of our initial work at ATypI in Helsinki. From that point on, Ken would call me from time to time to talk about ideas he had while drawing and I made small experiments to check the viability of the ideas. The development of the final features didn’t begin until late last year when Ken and Ben Kiel came down to the Type Supply World Headquarters to officially get the ball rolling. I worked on the features steadily up until the middle of last week. Yes, we were making changes up until the last minute. Big changes in some cases.

Alternates for Alternates of Alternates

The features in in Swing are by far the most complex features I have ever written. That font uses most of the tricks that I’ve developed over the years: meta classes, triggers, fixer lookups, rotation schemes and so on. A couple of weeks ago, Ken called me and asked how a certain alternate glyph was being inserted. I replied that I honestly had no idea. I explained to him that these features are a lot like Plinko on the Price is Right. The text comes in, bangs around various algorithms and comes out at the end. Where it ends up is dependent on a long list of variables. I know how the individual algorithms work, but the overall thing? No idea.

The algorithm that inserts the size alternates was written from the ground up at least five times. The very first version implemented a rather complicated pseudo-random pattern insertion scheme that Ken and I cooked up. We had this wild idea that we could swap entire glyph runs with alternate patterns and create something that was nearly indistinguishable from lettering produced by an organic life form. The code for this was bonkers, but it worked really well in our initial tests. However, as we got deeper into developing these features the pattern complexity started to backfire. It was too complicated to predict what would come out of the various cycles of the algorithm. This caused problems when inserting positional forms and ligatures. Also, it made my head hurt really bad. I rewrote and rewrote until we got to a point that gave us a more controlled randomness. We really crashed into the edge of the OpenType universe and I have the scars to prove it.

The other fonts have lots of nifty features as well. All of them have lots of language specific alternates, initial and terminal forms, lots of ligatures and alternates for alternates of alternates.

Ben did a heroic job of corralling Ken’s late night glyph stampedes, wrestling the kerning into a usable form and dealing with my surly rants when I realized that I would have to rewrite features to accommodate the latest alternate Estonian alternates. We owe Ben a trophy.

Ken Barber, Living Legend

I can’t talk about these fonts without pointing out how great they are. Set aside the OpenType features (seriously, turn the features off) and these things still look perfect. I spent many hours on this project flipping through the various glyphs and marveling at how well drawn everything was. The third alternate German d that in all likelihood no one will ever see? Not a point out of place and not a curve unperfected. The fit and finish in these fonts is phenomenal. Ken is working on a level that few people ever attain and I can’t wait to see what he does next.

PS: Jokes for Lettering Nerds

For the last few months, people at House kept mentioning “the photos of Ken.” I had no idea what they were talking about and my inquiries were always met with, “We’ll email them to you.” I finally saw them yesterday and one in particular amuses me to no end. Ken is a student of lettering history and he loves to pay tribute to the masters here and there. Well, one of the photos is direct homage to the great Mortimer Leach. It replicates the portrait of Mr. Leach that is displayed in the forward of his outstanding Lettering for Advertising.

Bravo Mr. Barber, bravo.

April 16, 2008 9:57 am

Fraction Fever

I’ve never liked the way fraction feature is usually implemented in OpenType fonts. I thought I was the only person until Kent Lew wrote to me with the same frustration. We talked about it a bit and I worked up a possible solution. Here goes…

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.

September 21, 2007 7:20 am

FeatureProof Beta 1

Among the avalanche of code I just open sourced is a humble little application called FeatureProof. This application is an environment for testing features in OpenType fonts.

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.

7:13 am

code.typesupply.com

I’m happy to announce that I’ve decided to open source a large portion of of my font development code repository. This batch of code includes core libraries for building font development applications, FontLab scripts and one full fledged application. At last count it was around 25,643 lines of Python code.

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.

September 10, 2007 10:36 pm

Type Supply Website (The Making of)

I recently launched a new site for my company. I put a lot of thought and work into it, and a few people have asked me questions about the tools I used, why I did some things the way that I did and stuff like that. I love behind-the-scenes, making-of stories, especially about nerdy stuff, so I present to you: The Making of the Type Supply Website (2007 Edition).

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.