TypeSelect: OrangeCoat's First Open Source Project

Posted July 13, 2009 by Adam Gautsch

TypeSelect Screen Shot
We are proud to announce TypeSelect, our first open source web project. TypeSelect is based on Typeface.js which is a JavaScript-based rendering script for displaying non-standard typefaces on the web. But wait, there's more! With TypeSelect you can now select the text allowing for copying and pasting.

Like Ron Burgundy, this is kind of a big deal. There are several solutions out there that allow browsers to display different fonts. However, only some patchy @font-face support and a wonky Flash-based option called SIFR actually allow for any sort of text-selection. TypeSelect achieves these features while only using JavaScript and CSS.

Why do this?

Having an easy-to-manage and robust solution for displaying unique typefaces online is one of our white whales. It's a constant pain to compromise a design by using an inappropriate typeface and it's just as irksome for visitors to not be able to copy and paste text.

Call me TypeSelect

The hunt began several months ago when Evan cracked open Typeface.js and started to overlay HTML proving the basic concept behind TypeSelect. Huzzah, the concept worked and the hunt was on and running at full-speed.

Over the next couple of weeks the project grew and changed. Several wrong turns and road blocks changed the direction and ultimately created a much better result.

Here are a few of the highlights, as to not bore you with all the gory details

  • Figuring out which works best, printing the entire word or individual letters (full words won the day)
  • Selection irregularities between browsers (still haven't sorted all that out yet)
  • Getting the kerning to work correctly (an issue that almost sunk the ship)
  • Fighting that damnable Internet Explorer 1
  • Opera refusing to work at all

These issues were attacked by Evan and Intern Rick with single-minded determination. The result is the current release we pushed live a few days ago.

It's not perfect. We understand this, but we've put a good deal of time and brain power into TypeSelect and now we want to see how others can help improve the technology.

This is why we are open sourcing the entire offering. We want others to be involved, make it better, and help TypeSelect solve a problem that has vexed most web professionals.

So, please visit TypeSelect.org. If you like what you see, help spread the word

If you're inspired by this project, let us know. We're looking for people who can help carry the torch and solve some riddles.

End Notes

1. Dear IE, "from hell's heart I stab at thee; for hate's sake I spit my last breath at thee" (Back)


Michael Allen ~ July 23, 2009

So, when does ye olde orangecoat.com get some TypeSelect love? I see you're still using the sIFR that was originally implemented, and I'm curious how TypeSelect would perform given the number of replacements it would have to do on this site. Would make for a compelling use-case.

Evan Tishuk ~ July 27, 2009

Our performance tests show that TypeSelect doesn't really hit a wall until it starts rendering about 100 words. I think it would do fine on this site -- probably faster actually. The reason we didn't integrate it here was because we've been too busy with other work. We're planning on doing some refresh/maintenance soon, and it will definitely make it into the newer design.

James Womack ~ July 23, 2009

The typeselect homepage has a misspelling in the following paragraph:

By leveraging typeface.js, jQuery, the canvas, toDataURL, CSS background properties and real overlayed text, Type Select is able to combine custom fonts with your browser's native text selection funcationality. You can now interact with beautifully rendered typefaces just like you do with normal text.

funcationality == functionality

Jala Neti ~ July 27, 2009

I'm not sure how I feel about this, but it is certainly better than resorting to flash! Downloading fonts should make your site slower though.

Keith Storm ~ August 03, 2009

We have tested an implementation on http://civiccenter.fountaininn.org. So far so good. It loads up pretty fast for us.

Adam Gautsch ~ August 05, 2009

Looks great Keith. Thanks for sharing the link.

Josh Jones ~ August 29, 2009

I love it! Great that you can do stuff like this without flash!

Lovingly crafted by orangecoat with some rights reserved, and a promise not to spam you.

Back to top