We have a feature in Kerika that had been behaving more like a bug for one of our users, and the root cause of her dissatisfaction turned out to be a very obscure problem with the way Firefox runs on Linux.

First, some background: one very cool feature in Kerika is that you can see little thumbnails of pages so you can tell at a glance what each item contains. Here’s an example of a project, as it appears on a user’s “All Projects” page:

Kerika displays the project as a small thumbnail. You can see these thumbnails in several places in Kerika: for example, when you are viewing a project page where items represent sub-projects, or when you are using the Breadcrumbs to navigate back up the hierarchy of projects and pages.

To create these thumbnails, we have a “Render Server” that runs on a Linux virtual machine on Amazon’s cloud. The Render Server automatically produces a new thumbnail of your project about 3 minutes after you have finished making your changes to the page.

(Why not instantly? Because in our experience, people often make a bunch of relatively small changes within a few seconds: for example, they might move something on their page several times, fairly quickly, before they are completely satisfied with where they have placed the item. If we created a new image with every single action a user takes, we would flood people with updated images every few seconds; instead, we wait for a couple of minutes until after the user has finished making changes before updating the thumbnail of the page.)

Well, this Render Server runs Firefox 9. There are a class of fonts that are supposed to be “browser safe”: i.e. all browsers are supposed to support these fonts. This class is commonly thought to include about a dozen fonts, including Trebuchet MS, but in reality the set of browser-safe fonts may actually be much smaller. And, it turns out, Firefox 9 on Linux doesn’t support Trebuchet MS after all!

Which brings us to our user and her very obscure bug… She had been using Trebuchet MS as a font for her project pages, and her pages included a number of diamond shapes. Kerika has a feature that resizes shapes automatically to fit all the text contained within the shape, so that, for example, if you increase the font size, the shape will resize automatically to accommodate the larger footprint of the text.

Whenever our user made a changes to her page, after about 2 minutes the Render Server would automatically try to create a new thumbnail of the image. But… since Firefox on Linux doesn’t support Trebuchet MS, Firefox would fall back to the closest font it had, which was Times New Roman. The footprint of Times New Roman is quite different from that of Trebuchet MS, so the diamond shapes need to be slightly taller and less wide, and the Render Server would automatically adjust the shape when it created the thumbnail for the page.

As a result, our user found that her diamonds were changing size in some random manner, which was both puzzling and annoying. The bug was obscure indeed, because it ultimately had to do with Firefox not supporting Trebuchet MS on Linux even though that font is supported by Firefox on Windows and Macs.

Luckily, our team includes some unusually smart people! One of them spotted the quirk fairly quickly and the fix is going to be relatively easy: we are already providing our users with an extended set of fonts, and for these we provide Firefox with the necessary CSS to render the fonts. We hadn’t been providing the custom CSS for Trebuchet MS, thinking that it was already supported by Firefox, but now we will.

In case you are interested, here are the fonts we currently support:

We have a feature in Kerika that had been behaving more like a bug for one of our users, and the root cause of her dissatisfaction turned out to be a very obscure problem with the way Firefox runs on Linux.

First, some background: one very cool feature in Kerika is that you can see little thumbnails of pages so you can tell at a glance what each item contains. Here’s an example of a project, as it appears on a user’s “All Projects” page:

Kerika displays the project as a small thumbnail. You can see these thumbnails in several places in Kerika: for example, when you are viewing a project page where items represent sub-projects, or when you are using the Breadcrumbs to navigate back up the hierarchy of projects and pages.

To create these thumbnails, we have a “Render Server” that runs on a Linux virtual machine on Amazon’s cloud. The Render Server automatically produces a new thumbnail of your project about 3 minutes after you have finished making your changes to the page.

(Why not instantly? Because in our experience, people often make a bunch of relatively small changes within a few seconds: for example, they might move something on their page several times, fairly quickly, before they are completely satisfied with where they have placed the item. If we created a new image with every single action a user takes, we would flood people with updated images every few seconds; instead, we wait for a couple of minutes until after the user has finished making changes before updating the thumbnail of the page.)

Well, this Render Server runs Firefox 9. There are a class of fonts that are supposed to be “browser safe”: i.e. all browsers are supposed to support these fonts. This class is commonly thought to include about a dozen fonts, including Trebuchet MS, but in reality the set of browser-safe fonts may actually be much smaller. And, it turns out, Firefox 9 on Linux doesn’t support Trebuchet MS after all!

Which brings us to our user and her very obscure bug… She had been using Trebuchet MS as a font for her project pages, and her pages included a number of diamond shapes. Kerika has a feature that resizes shapes automatically to fit all the text contained within the shape, so that, for example, if you increase the font size, the shape will resize automatically to accommodate the larger footprint of the text.

Whenever our user made a changes to her page, after about 2 minutes the Render Server would automatically try to create a new thumbnail of the image. But… since Firefox on Linux doesn’t support Trebuchet MS, Firefox would fall back to the closest font it had, which was Times New Roman. The footprint of Times New Roman is quite different from that of Trebuchet MS, so the diamond shapes need to be slightly taller and less wide, and the Render Server would automatically adjust the shape when it created the thumbnail for the page.

As a result, our user found that her diamonds were changing size in some random manner, which was both puzzling and annoying. The bug was obscure indeed, because it ultimately had to do with Firefox not supporting Trebuchet MS on Linux even though that font is supported by Firefox on Windows and Macs.

Luckily, our team includes some unusually smart people! One of them spotted the quirk fairly quickly and the fix is going to be relatively easy: we are already providing our users with an extended set of fonts, and for these we provide Firefox with the necessary CSS to render the fonts. We hadn’t been providing the custom CSS for Trebuchet MS, thinking that it was already supported by Firefox, but now we will.

In case you are interested, here are the fonts we currently support: