10 Mar

Rendering Text with Javascript, Canvas and VML

Fonts, MIT License

Leave a Comment

Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.

Typeface.js uses browsers’ vector drawing capabilites to draw text in HTML documents. The typeface.js project has two components: the perl module for converting fonts, and the javascript library for drawing in the browser. The perl module extracts glyph outline information from truetype fonts and writes that data in JSON format. The javascript library then traverses the HTML document and renders text using <canvas> or VML to draw the glyphs.

This code is and always will be free and open source. This includes both the typeface.js javascript library, as well as the perl module with functionality to convert truetype fonts to typeface ones.

Requirements: Firefox 1.5+, Safari 2+, Internet Explorer 6+
Demo: http://typeface.neocracy.org/
License: MIT License

Sponsors

Comments

http://bertobox.com/ bertobox

I tried the demo in Safari 4 Beta and while it renders the text in the correct fonts, I don’t like that I am not able to select the text. I’m not sure if they could even be links, in that sense. :-\

Still, it seems to work great at rendering the text, there was no delay in my case! good job developers!
http://www.savemp3.net cris

thanks for the nice post.
http://www.steinhaug.com/ Kim Steinhaug

Now this was really cool, I will without a doubt include this in several projects! Seems this is a great alternative for flash based versions. Why use JS+Flash when all you need is JS?

Great find!
http://chepelle.altervista.org/wordpress/ carlo

good!!!
http://inkubis.com inkubis

wew…

nice info

thankyu
Allan

perfect! great find there… thank you so much!
Jonny

If you are running into permission issues when converting a font, download this application:

http://www.andrew.cmu.edu/user/twm/embed/

I found it through the typeface.js forum…and it worked perfect.
http://www.webexcellence.net Sudirman

Well, I have been using this for 3 months or so. But, I’m afraid I have to seek & switch to another one, since typeface isn’t working on Opera 10 and IE8.
Jonny

Did some more playing around with this. I’m very impressed with how it works, although the script still needs a little work. For example, the script is run on the page load. This is fine until you want to dynamically update text on the page somewhere. I can’t really find an easy way to re-render a portion of the page either.

Whatever the case, this is a really interesting approach to making custom fonts available online.
http://www.mashupdesign.com pisakec

very cool! but I don’t think it look good on seo. soure code is full of code instead of simple sematic.any idea?
Serge

This is fantastic. Probably one of the most elegant implementations of text rendering I’ve seen.
Mike

@Jonny: Regarding updating the page dynamically, the typeface.js website refers to a process named “_typeface_js.renderDocument()” that can be called from script. Maybe a dynamic page could update the text, then call this render process to set the text in the desired font.
Pingback: typeface.js: hacer render de texto y fuentes con javascript : Notitodo
Pingback: typeface.js: hacer render de texto y fuentes con javascript | dominios, diseño web, ecommerce - Mantis Technology Solutions Blog
Pingback: Lenguajes X » typeface.js: hacer render de texto y fuentes con javascript
http://idProjections.com/ Kyle

Although this is a very handy tool I kept hitting the permissions issue with any font I used.

After doing a little more searching i ran across http://cufon.shoqolate.com/ and it seemed to work out pretty well.
http://www.kunterilalan.com designer

this is one hell of a real challenge

Just looking at the front-view on their page which talks about not only kerning and spacing, but the ttf conversion(!), such an effort would render all our previous efforts on the GD libraries or similar in an attempt to substitue fonts with on-the-fly generated images just a total waste!
http://kooms.wordpress.com sophy

This is so cool Typeface.js.Can Typeface.js embed Unicode font like Khmer Unicode font?
Pingback: Nilesh Manohar & Erzsebet Marothi » Cufón - Another sIFR alternative for Font Embedding
http://www.salesworks.com/blog/ Colin Greig

I’m looking forward to the day when this can be accomplished cross-browser with no issues.

PS: Time to separate your trackbacks from your comments in wordpress. =)
Pingback: Cufòn una nuova sfida a sIFR? | Napolux.com
Pingback: John Doe's personal blog
http://www.bloggeriesta.co.cc bloggeriesta

awesome..cool!

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

© Copyright 2012 WebAppers | About | Archives | Privacy Policy | Advertise | Contact