Larger first letters in uppercase

HTML & CSS
1

Hello all,

is there a tag I can add that I can add that turns all the copy into Uppercase (I can do that bit) but makes the first letter of each word a few % larger than the rest of the text?

eg:

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG

into

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG

Cheers all

2

I don’t think there’s an easy CSS way to do it, but you could do it like this if there’s not to much text to apply this to:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
	
<style type="text/css" media="all">
p {font-weight: bold;}
p b {font-size: 130%;}
</style>
	
</head>

<body>
<p><b>T</b>HE <b>Q</b>UICK <b>B</b>ROWN <b>D</b>OG <b>J</b>UMPS <b>O</b>VER <b>T</b>HE <b>L</b>AZY <b>F</b>OX</p>

</body>
</html>

Of course, the text doesn’t have to be typed in capitals, as text-transform: uppercase could be used instead.

3

Hmm… don’t think that will work as the text will be dynamic and dragged out of a database…

Thanks anyway though.

4

You can use PHP to put those tags in.

5

You can do it like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
p{
    text-transform:capitalize;
    font-variant:small-caps;
    font-weight:bold;
}

</style>
</head>

<body>
<p>Testing out this Text</p>
</body>
</html>
6

Blow me down if I didn’t try that. :rolleyes: O well, thanks Paul!

7

Blimey - that is spot on!

Cheers Paul :slight_smile: