TypeSelect: OrangeCoat's First Open Source Project

Posted 8 years ago 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 ~ 8 years ago

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 ~ 8 years ago

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 ~ 8 years ago

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 ~ 8 years ago

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 ~ 8 years ago

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

Adam Gautsch ~ 8 years ago

Looks great Keith. Thanks for sharing the link.

Josh Jones ~ 8 years ago

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

For reservations, call office(800) 890-1702. Send fan mail to our work location at 101 N Main Street, Third Floor, Greenville, SC 29601 USA 34.850823 -82.398746
Lovingly crafted by orangecoat with some rights reserved, and a promise not to spam you.

Back to top