h
a
c
k
l
o
g

typeface.js: interesting…

Written by Patrick Hall, October 28th, 2008

For many languages, font support is a deal killer.

If you’re a user and your language has a non-Roman script, say, and if that script is relatively unusual, such as Bengali or Georgian or Tigrinya or something like that, and you waltz into a cyber cafe that doesn’t happen to be in a place where your language is on the agenda, then you’re pretty much out of luck.

It’s my contention that people who happen to use a language which is written in a broadly supported script simply have no idea of how frustrating and oppressive such a state of affairs is.

Imagine not being able to sign your name in an email!

Things are improving, but not fast enough. Interesting ideas come and go, and here’s one that’s just appeared:

With typeface.js you can embed custom fonts in your web pages so you don’t have to render text to images.
typeface.js is easy…
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. This is a work in progress, but functional enough at least to render the the graphic text on this site.

typeface.js — Rendering text with Javascript, canvas, and VML

The idea may seem a bit nutty, but it’s not, really. After all, a font file is ultimately just some code anyway. So one could imagine finding some representative free fonts for each of the writing systems out in the world, and distributing freely so that content creators could publish away in Bengali or Georgian or Tigrinya or whatever.

Except, not really. The problem is that this thing seems to be designed more for folks who want to have nice fonts in headings and blow-up quotes than in running text. The deal killer for me: cut and paste doesn’t work. So, it may as well be an image.

The real solution is free (libre) fonts for every writing system, widely distributed across operating systems, and also available as embedded fonts. Neither of those approaches is new, but that’s what it’s going to take, I think, to really make the web egalitarian.

UPDATE: Should have checked with Richard Ishida’s site first: he’s got some links to collections of free fonts via his page on Script examples.

2 Comments for 'typeface.js: interesting…'

  1. Comment received October 28th, 2008 from F Wolff

    For many languages where font support is an issue, proper rendering support is often an equal or greater issue. I don’t see any mention that any issues in Complex Text Layout are handled (stacking diacritics, bi-di, context/language dependent glyphs, ligatures, reordering). If all these issues are handled, it would be uber-cool, but without, we are talking about a smaller subset of languages that will be served by this. So I guess this might work for Georgian and Tigrinya, but probably not for Bengali (just to use the examples you mention).

    It still is very cool though…

  2. Comment received October 28th, 2008 from Andrew

    As F. Wolff indicated, the real show stopper isn’t availability of fonts, but availability of a suitable font rendering/text layout system.

    There are work arounds, you could use a javascript/flash combination to detect the presence of specific fonts on a users computer (For complex script).

    Alternatively more widely integrated web font technology support into web browsers allowing fonts to eb automatically downloaded, would be good. typeface.js is a temporary hack in the absence of widespread implementations of web fonts (CSS2 and CSS3) and the two competing approached to web fonts. IF support for SVG fonts were added to web browsers, this could also help the situation.

    But the stumbling block will always be complex script rendering.

Leave a comment

(required)

(required)

Comment moderation may delay the posting of your comment. XHTML: You can use the following tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> . Don't forget to close them after use.