The state of selectable text-replacement

Javascript, 12 October 2009, 3 minute read

In “Cufón vs. Typeface.js, which one is better?“, I declared that the first one to support selectable text wins. We’re a couple of months further now and both Typeselect and Typeface.js 0.13 appeared, adding support for selectable text. What is the state of selectable text-replacement?

Typeselect

Let’s take a look at the new kid on the block. Typeselect is based on version 0.12 of Typeface.js, and defines it’s goal boldly in a custom, text-selectable font on it’s homepage:

You shouldn’t have to compromise the design or the user’s experience to have selectable text.

Amen!

Typeselect acts as a layer above Typeface.js. You should take this as literal as possible, since the way Typeselect works is by adding transparent text on top of your replaced text. Script-wise, added to Typeface.js are jQuery 1.3.2 and their own js file, typeselect.js that takes care of the actual selection of text.

Including Typeselect in your website

<head>
…
  <script type="text/javascript" src="js/typeface-custom.js"></script>
  <script type="text/javascript" src="fonts/nilland_regular.typeface.js"></script>
  <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="js/typeselect.js"></script>
…
</head>

While it takes two more javascript files when compared to Typeface.js and Cufón, chances are that you already use jQuery and you can always choose to combine multiple javascript files. When we move on though, actually changing the font is pretty easy. By adding the class select to the elements you want to replace, and adding your typeface.js converted font to the css, the font will be replaced!

<div class="myclass select">
…
h1,  h2 {
  font-family:nilland, Georgia, Serif;
  font-style:italic;
}

Future?

It seems that Typeselect aims to be a layer above typeface.js and Cufón to provide selectable text for both. Apart from that, better rendering of the fonts is on the roadmap as well as a host of other things. Only… Typeface.js currently has it’s own, very similar, implementation of selectable text built right in. Actually, as far as I can see, it’s identical. So without Cufón support, I’m not sure if Typeselect is the best choice you can make.

Typeface.js

Typeface.js added text selection in version 0.13 in the same way as Typeselect: selectable text is implemented by overlaying real, transparent text on top of the rendered text. Pretty smart! AS you can see on Typeface.js’ download page, it works really well.

However, by doing this, performance goes down a bit. Not enough to really notice it, but if you want to disable it, there’s an ~~app~~ option for that. By adding the following to your <head> in a script element, selecting text gets disabled:

_typeface_js.configure({ disableSelection: true })

Cufón?

So, where does that leave Cufón? Well, text selection is planned in version 1.2. Right now Cufón is at version 1.08, so we’ll have to wait a little longer.

Conclusion

For now, Typeface.js is pretty much the best way to use good looking fonts while also allowing selectable text, cross-browser. However, with some work, @font-face can be made working in Firefox 3.5, Safari 3.1+, Opera 9+, Internet explorer 4+ and Chrome 0.3+. So, basically every browser. However, it is a lot of work compared to using Typeface.js, Cufón or Typeselect.

Personally I think that in most browsers, using the javascript replacement results in better looking text, and it’s definitely easier to implement. In terms of forward compatibility, @font-face is a better choice. It’s up to you!

Kilian Valkhof

Building tools that make developers awesome.