typeface.js uses browsers' vector drawing capabilites to draw text in HTML documents. For a good while, browsers have had support for vector drawing — Firefox, Safari, and Opera support the <canvas> element (as well as SVG), and IE supports VML.

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.

In browsers that support <canvas> the text is selectable, but you have to have faith. As you select there's no feedback, no highlighting to let you know that it's working. Future work will aim to implement better, cross-browser support for selecting text with highlighting.

Lo script Perl serve solo per convertire i font e renderli utilizzabili con la libreria js, e si può anche utilizzare il convertitore presente nel sito.

Ovviamente il server deve avere php4 (php5 per comprimere i javascript), e la classe php deve essere in una cartella scrivibile.

Scarica lo script con una spiegazione e alcuni esempi, oppure guarda il codice:

$.fn.SelectCustomizer = function(){
    // Select Customizer jQuery plug-in
	// based on customselect by Ace Web Design http://www.adelaidewebdesigns.com/2008/08/01/adelaide-web-designs-releases-customselect-with-icons/
	// modified by David Vian http://www.ildavid.com
    return this.each(function(){
        var obj = $(this);
		var name = obj.attr('id');
		var id_slc_options = name+'_options';
		var id_icn_select = name+'_iconselect';
		var id_holder = name+'_holder';
		var custom_select = name+'_customselect';
        obj.after("<div id=\""+id_slc_options+"\"> </div>");
        obj.find('option').each(function(i){
            $("#"+id_slc_options).append("<div title=\"" + $(this).attr("value") + "\" class=\"selectitems\"><img src=\"" + this.title + "\" /><span>" + $(this).html() + "</span></div>");
        });
        obj.before("<input type=\"hidden\" value =\"\" name=\"" + this.name + "\" id=\""+custom_select+"\"/><div id=\""+id_icn_select+"\">" + this.title + "</div><div id=\""+id_holder+"\"> </div>").remove();
        $("#"+id_icn_select).click(function(){
            $("#"+id_holder).slideToggle(200);
        });
        $("#"+id_holder).append($("#"+id_slc_options)[0]);
        $("#"+id_holder+ " .selectitems").mouseover(function(){
            $(this).addClass("hoverclass");
        });
        $("#"+id_holder+" .selectitems").mouseout(function(){
            $(this).removeClass("hoverclass");
        });
        $("#"+id_holder+" .selectitems").click(function(){
            $("#"+id_holder+" .selectedclass").removeClass("selectedclass");
            $(this).addClass("selectedclass");
            var thisselection = $(this).html();
            $("#"+custom_select).val(this.title);
            $("#"+id_icn_select).html(thisselection);
            $("#"+id_holder).slideToggle(250)
        });
    });
}

E una raccolta di 56 menu moderni di Smashing Magazine

In Google, abbiamo un detto: “lancia subito e poi itera”. Questo approccio viene normalmente limitato ai nostri tecnici, ma a quanto sembra si applica anche alla nostra posta! Come avrete letto sulla blogosfera, abbiamo premuto “invia” un po’ in anticipo su un fumetto che presentava il nostro nuovo browser open source, Google Chrome. Dato che crediamo all’accesso alle informazioni aperto a tutti, abbiamo ora reso il fumetto disponibile pubblicamente e lanceremo la versione beta di Google Chrome il 2 settembre in più di 100 nazioni

Basato sul motore di rendering WebKit (lo stesso di Safari e di Android), promette il caricamento più rapido delle pagine, un migliore utilizzo della ram (ogni tab sarà un singolo processo diverso), e l’integrazione con la suite per uffico Google Docs.