Text to Pixel Font!
January 16th, 2011
No comments
So, this is a silly little proof of concept I came up with to kill 20 minutes in between projects. Takes regular text and turns it into 1px sized divs. That’s right, the div’s actually form the pixels of each letter! 
Awesome, right!? Check it out!
How’s it done? Easy:
* Get the text of an element
* Move through it, 1 character at a time
* Match the character with a pattern (currently only supports lowercase)
* Convert the pattern to markup
* Replace the text with excessive amounts of html
$(document).ready(function() { var jsTexty = {}; jsTexty.Make = function(e) { var strLetterString = $(e).text(); var strReplaceHtml = ''; for(var i = 0; i<strLetterString.length; i++) { var strThisLetter = strLetterString.substr(i,1); var arrLetterCode = jsTexty.GetLetterCode(strThisLetter); strReplaceHtml += jsTexty.LetterCodeToHtml(arrLetterCode); } $(e).html(strReplaceHtml + '<div class="clear"></div>'); }; jsTexty.LetterCodeToHtml = function(arrLetterCode) { var strReplaceHtml = '<div class="lbBlock">'; for(var i = 0; i<arrLetterCode.length; i++) { var strThisRow = arrLetterCode[i]; for(var j = 0; j<strThisRow; j++) { var strThisLetterBlock = strThisRow.substr(j,1); if(strThisLetterBlock==='1') { strReplaceHtml += '<div class="lbSolid"></div>'; } if(strThisLetterBlock==='0') { strReplaceHtml += '<div class="lbEmpty"></div>'; } } strReplaceHtml+='<div class="clear"></div>'; } return strReplaceHtml + '</div>'; } jsTexty.GetLetterCode = function(strSingleLetter) { switch(strSingleLetter) { case ' ': var arrLetterCode = [ '0000', '0000', '0000', '0000', '0000' ]; break; case 'a': var arrLetterCode = [ '0110', '1001', '1111', '1001', '1001' ]; break; case 'b': var arrLetterCode = [ '1110', '1001', '1110', '1001', '1110' ]; break; case 'c': var arrLetterCode = [ '0111', '1000', '1000', '1000', '0111' ]; break; case 'd': var arrLetterCode = [ '1110', '1001', '1001', '1001', '1110' ]; break; case 'e': var arrLetterCode = [ '1111', '1000', '1110', '1000', '1111' ]; break; case 'f': var arrLetterCode = [ '1111', '1000', '1110', '1000', '1000' ]; break; case 'g': var arrLetterCode = [ '0111', '1000', '1011', '1001', '0111' ]; break; case 'h': var arrLetterCode = [ '1001', '1001', '1111', '1001', '1001' ]; break; case 'i': var arrLetterCode = [ '111', '010', '010', '010', '111' ]; break; case 'j': var arrLetterCode = [ '0001', '0001', '0001', '1001', '0110' ]; break; case 'k': var arrLetterCode = [ '1001', '1010', '1100', '1010', '1001' ]; break; case 'l': var arrLetterCode = [ '1000', '1000', '1000', '1000', '1111' ]; break; case 'm': var arrLetterCode = [ '10001', '11011', '10101', '10001', '10001' ]; break; case 'n': var arrLetterCode = [ '10001', '11001', '10101', '10011', '10001' ]; break; case 'o': var arrLetterCode = [ '0110', '1001', '1001', '1001', '0110' ]; break; case 'p': var arrLetterCode = [ '1110', '1001', '1110', '1000', '1000' ]; break; case 'q': var arrLetterCode = [ '0000', '0110', '1001', '0111', '0001' ]; break; case 'r': var arrLetterCode = [ '1110', '1001', '1110', '1001', '1001' ]; break; case 's': var arrLetterCode = [ '0111', '1100', '0110', '0011', '1110' ]; break; case 't': var arrLetterCode = [ '11111', '00100', '00100', '00100', '00100' ]; break; case 'u': var arrLetterCode = [ '1001', '1001', '1001', '1001', '0110' ]; break; case 'v': var arrLetterCode = [ '10001', '10001', '01010', '01010', '00100' ]; break; case 'w': var arrLetterCode = [ '10101', '10101', '10101', '10101', '01010' ]; break; case 'x': var arrLetterCode = [ '10001', '01010', '00100', '01010', '10001' ]; break; case 'y': var arrLetterCode = [ '10001', '01010', '00100', '00100', '00100' ]; break; case 'z': var arrLetterCode = [ '1111', '0001', '0010', '0100', '1111' ]; break; case '.': var arrLetterCode = [ '000', '000', '000', '110', '110' ]; break; case ',': var arrLetterCode = [ '000', '000', '000', '110', '010' ]; break; case '!': var arrLetterCode = [ '010', '010', '010', '000', '010' ]; break; case '(': var arrLetterCode = [ '010', '100', '100', '100', '010' ]; break; case ')': var arrLetterCode = [ '010', '001', '001', '001', '010' ]; break; case '?': var arrLetterCode = [ '01110', '00001', '00110', '00000', '00100' ]; break; } if(!arrLetterCode) { var arrLetterCode = [ '1111', '1111', '1111', '1111', '1111' ]; } return arrLetterCode; }; // ACTIVATE $('#doit').click(function(){jsTexty.Make('#letterBox');}); });
Categories: CSS, Fun, JavaScript