/*
Multiple color font
Copyright 2012 Eric Schrijver / OSP
http://ospublish.constantvzw.org/workshop/write-me-a-shadow/
Based on colorfont.js:
Copyright 2011 Manufactura Independente (Ana Carvalho & Ricardo Lafuente)
http://manufacturaindependente.com/colorfont/
Licensed under the terms of the WTFPL.
http://sam.zoy.org/wtfpl/
Usage:
In your HTML, for the element that you want to appear in multiple colours, specify an attribute called ‘data-fonts’. The attribute takes a list in JSON format, the elements of which are lists of a font-file and a colour.
For example:
Workshop ERBA Valence 3-4 mai 2012
*/
$(document).ready(function(){
$("[data-fonts]").each(function() {
$(this).css({position:'relative'});
var fonts = $.parseJSON($(this).attr("data-fonts"));
var text = $(this).html();
var html = ' ';
$.each(fonts, function(index, fontobject){
// fontname is fontfile without path and extension:
var fontfile = fontobject[0];
var font = fontobject[0].split('/').pop().split('.').slice(0,-1).join('.');
var colour = fontobject[1];
html += '' + text + '';
var fontface = '@font-face {\n';
fontface += " font-family: '" + font + "';\n";
fontface += " font-weight: normal;\n";
fontface += " src: url('" + fontfile + "');\n";
fontface += "}\n";
$("body").prepend("");
})
$(this).html(html);
// http://stackoverflow.com/questions/6060992/element-with-the-max-height-from-a-set-of-elements
var heights = $(this).children("span").map(function ()
{
return $(this).height();
}).get();
console.log(heights);
var maxHeight = Math.max.apply(null, heights);
console.log(maxHeight);
$(this).css('height', maxHeight);
});
});