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

I couldn't get :first-letter to work, but here's a possible solution, assuming the <h1> does not contain additional tags or entities:

$('h1').html(function(i,html){
    return html.replace(/(\S)(\S*)/g, '<span class="FirstLetter">$1</span>$2');
});

CSS:

.FirstLetter {color:green}

A possible benefit here is that this should work on all browsers.
The regex is fairly simple: \S stands for a non-whitespace character. It matches word by word and captures the first letter in each word in the first group ($1), and the rest of the letters in the second group ($2), for an easy replace.

Working example: http://jsbin.com/ufovi4

Answer 2

$(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/