Search code examples
javascripthtmlcsscapitalization

Apply drop caps to each word in a link

I'd like to recreate the menu effect seen at http://www.thedecoratorsource.co.uk using CSS fonts and drop caps.

I know that I can use

p.introduction:first-letter {
font-size : 300%;
}

which will give me the first word with a larger first characerer but I want to apply it to each word. I'm guessing there isn't a way to do this with CSS(3). Would my best bet with javascript? I've already got Moo on the page so this would be my preferred method.

I don't want to add extra HTML to my links to achieve this.

Thanks

Solution

  • This isn't drop caps (that's when you have a big capital letter at the start of a paragraph that takes three or four lines). This is Small Caps.

    Easiest way is to find a small caps font, and capitalise every word. Sadly the only font I can find on google web font api that has small caps might not have the right character:

    http://code.google.com/webfonts/family?family=Walter+Turncoat&subset=latin