Home > CSS, Fun, JavaScript > Text to Pixel Font!

Text to Pixel Font!

January 16th, 2011 Leave a comment Go to 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! :D Awesome, right!? Check it out!

jsTexty Example

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 :D 

$(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');});
});
Be Sociable, Share!
Categories: CSS, Fun, JavaScript Tags:
  1. No comments yet.
  1. No trackbacks yet.