Saturday, July 11, 2009

Type Select – Selectable Text Replacement Technique

Following the earlier post I made about image replacement techniques, titled 5 Image Replacement Techniques For Custom Font Embedding, my attention was brought to this new text replacement technique called Type Select.

Type Select enables text replacement without the need for server side dependencies.  It has support for double click and triple click and CSS can be used to control the formatting of the text.

What’s impressive in this technique is that we can actually select the text like any other normal text.  The alternative techniques like Cufon and Typeface.js do not permit to select text.  Type Select uses a combination of typeface.js, jQuery, the canvas, toDataURL, CSS background properties and real overlayed text to render the text in the browser.

The only downsides to Type Select is that it is not supported Internet Explorer (like nearly all of the other technologies out there).  There is also no support for hover and line breaks and there are some other minor problems being worked upon.  If you are a Javascript genius, you might want to help out with the development.  It however works properly in Firefox, Chrome, Safari and to some extent in Opera.  If you are willing to use to use Type Select, no fear, it degrades gracefully in non-supported browsers.


Type Select is released under the MIT License and you can consult the documentation, see demos and download the project at the Type Select Website.

No comments:

Post a Comment