Question

I am trying to produce an effect where I have a title on a page all in Capitals. I would however like to see the first character of each word with a slightly larger font size.

For example:

MY TITLE

The M and T would be in size 16 font and the rest of the word would be in size 12. I am pulling the titles from a database (MySQL) so “MY TITLE” is just an example. It could be any wording.

I realise there is a way to do this using substr (in php) and search for where the spaces are at the end of each word. But this seems to me as though it will get a bit messy with coding.

Does anyone have a better suggestion?

Answer 1

I think something like this is what you are looking for.

PHP

<?php
$text = "My Title";
$newText = preg_replace('/(\w)(\w+\b)/', '<span class="firstLetter">$1</span>$2', $text);

echo $newText;  // <span class="firstLetter">M</span>y <span class="firstLetter">T</span>itle

CSS

.firstLetter{font-size: 125%;}