Type Select

Selectable Text Replacement

Beautifully rendered & selectable typefaces controlled by CSS. You shouldn’t have to compromise the design or the user's experience to have selectable text.

How does it work?

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.

Why is this important

Web professionals have been stuck with 9 "web safe" fonts for too many years. There have been some clever solutions (SIFR, FLIR, Typeface.js, Cufon), but text selection has been a tough nut to crack. We think this approach can become a viable workaround until browser technology catches up.

Intentions

Type Select is offered as a free proof-of-concept under the MIT License. There are plenty of shortcomings that can be hammered out by all you JavaScript wizards out there. If you see an opportunity to improve Type Select, please participate in the continuing development (see road map for some goals).

Features

  • Selectable text support for Firefox/Mozilla, Safari, Chrome
  • Easier to install and configure than SIFR
  • Use CSS to control typeface properties
  • No server-side modules or plugins required
  • Graceful degradation in IE6+
  • Support for double-click and triple-click selection
  • UTF-8 Characters

Current Limitations

  • Styling on descendant text elements is ignored (first priority in next version)
  • No support for :hover or line breaks
  • Opera doesn't play nice with funky font-families
  • Restricted to free and public domain typefaces
  • Text is not selectable in IE

Contact

Follow

Promote

Lovingly created in the oven at ORANGECOAT and offered to the world for enjoyment by all.