jquery - Changing the value of the first letter of each word

Question

I'm attempting to either use jQuery, CSS or PHP to increase the font size of the first letter of each word in a string. For example, I'm going to have a title in h1 tags like so:

<h1>The title of this page goes here</h1>

I'm wanting to text transform all the text to uppercase (no problem with CSS), but then increase the font size of the first letter that appears in the string. With CSS or jQuery, is there a way to select the first letter of each word and modify it?

Answer 1

$(document).ready(function() {
    var words = $('h1').text().split(' ');
    var html = '';
    $.each(words, function() {
        html += '<span style="font-size:200%">'+this.substring(0,1)+'</span>'+this.substring(1) + ' ';
    });
    $('h1').html(html);
});

Here's an example of it in action: http://jsfiddle.net/hCvsu/1/