Kilian Valkhof

Front-end & user experience developer, Jedi.

The state of selectable text-replacement

Javascript, 12 October 2009

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!

Thanks for Reading!

I am Kilian Valkhof, a front-end and user experience developer from the Netherlands.
Contact me or ping me on twitter.

  1. Nice writeup Kilian. I’ve seen TypeSelect some time ago and was thinking about checking it out in more detail. Thanks to you, now I don’t need to :-)

    Being able to select text is pretty important, let’s hope Cufon will quickly come up with their solution.

    Regarding your conclusion: @font-face is indeed a lot of (extra work) and let’s not forget two other important annoyances: licensing issues and the differences in the quality of the rendered text.

    I think @font-face is the best option in theory, but practically it is way too much hassle :-(

  2. Typeface.js is not working in Opera so it’s definitely not the best way.

  3. Hi.
    Typeselect doesn´t work i IE which makes it pretty useless. Even if I doesn´t get any visual clues that I´m selecting text with Cufón – I still can copy text with it.

  4. Yeah, but Typeface.js doesn’t work on all browsers and you need inline styling to trigger it! That’s so last century.

  5. Performance seems to be another reason (for the moment!) to choose a JS-based solution like Cufon or Typeface: http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/

    If/when many of the ‘issues’ with @font-face are resolved (which I hope/think _could_ happen quickly, seeing the current pace of development in this area) a ‘hybrid’ solution (as you’ve described or using Modernizr etc.) would seem ideal.

  6. […] The State Of Selectable Text-Replacement […]

  7. I’d just use http://www.fontsquirrel.com/fontface/generator
    The @font-face performance issues are not real issues, as Sounders discovered. It’s only blocking when there are scripts above the @font-face declaration (which you should avoid anyway!)

Be the first to know about new releases!

Newsletter subscribers will be the first to know about new apps I release or new articles I write, here or elsewhere.

Low-volume. I will only email you when I have something exciting to share.