Format text [like a typewriter]

[andrewjbaker]

Hi all. I've written a JS function that accepts a string and applies some <span>s for formatting to make the text appear like it was written on a typewriter (when combined with a monospace font-style).

Here's an example of it in use (see the Mansfield Station (Rail) text): http://a.imageshack.us/img821/548/mt0011.jpg

Use it, chop it up, send it to your grandma, or whatever...

Code: [Select]

// typewrite.js

Array.prototype.exists = function(val) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] == val) {
            return true;
        }
    }
    return false;
}

/**
 * Format text [like a typewriter]
 */
function typewrite(s)
{
    var len = 0;

    if (s == null || (len = s.length) == 0) {
        return '';
    }

    s = s.replace('&amp;', '&'); // XXX

    var N = Math.floor(Math.random() * (len / 4));

    var v = new Array();

    for (var i = 0; i < N; i++) {
        var n = 0;
        do {
            n = 1 + Math.floor(Math.random() * (len - 1));
        } while (v.exists(n));
        v.push(n);
    }

    v.sort(function(a, b) { return (a - b); });

    var html = '';

    var colour = 2 + Math.floor(Math.random() * 8);
    colour = colour.toString(16);
    html += '<span style="color: #' + colour + colour + colour;
    if (Math.floor(Math.random() * 2) == 0) {
        html += '; position: relative; bottom: 2px';
    }
    html += '">';
    html += s.substring(0, v[0]);
    html += '</span>';

    for (var i = 0; i < v.length - 1; i++) {
        colour = 2 + Math.floor(Math.random() * 8);
        colour = colour.toString(16);
        html += '<span style="color: #' + colour + colour + colour;
        if (Math.floor(Math.random() * 2) == 0) {
            html += '; position: relative; bottom: 2px';
        }
        html += '">';
        html += s.substring(v[i], v[i+1]);
        html += '</span>';
    }

    colour = 2 + Math.floor(Math.random() * 8);
    colour = colour.toString(16);
    html += '<span style="color: #' + colour + colour + colour;
    if (Math.floor(Math.random() * 2) == 0) {
        html += '; position: relative; bottom: 2px';
    }
    html += '">';
    html += s.substring(v[v.length-1]);
    html += '</span>';

    html = html.replace('&', '&amp;'); // XXX

    return html;
}

The XXX comments are a little reminder to me that it's only handling &amp;, not other escaped HTML entities so you might wanna' adapt it handle others, where necessary.

Cheers, Andy.

[andrewjbaker]

bbgames has pointed out that you can lose the exists() declaration and replace the comparison in the do..while loop with a call to indexOf() instead.

Code: [Select]

do {
    n = 1 + Math.floor(Math.random() * (len - 1));
} while (v.indexOf(n) != -1);

Also, the reason that the first and last chunks are separate from the main loop is because I have altered the number of possible shades of gray and reduced the vertical offset to 1px in my current code. ;-)

Ta.