CODEWITHSUNDEEP
phpcssfont-size
PhilC
PhilC

Reputation: 418

Font Size with php and/or CSS

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?

Upvotes: 0

Views: 4469

Answers (4)

J D
J D

Reputation: 1818

Simple CSS property,

font-variant:small-caps;

Upvotes: 1

maiorano84
maiorano84

Reputation: 11980

Pure PHP solution:

<?php
$str = '<h2><big>S</big>ome <big>t</big>ext</h2>';
echo strtoupper($str);
?>

CSS Solution:

<h2><span class="larger">S</span>ome <span class="larger">T</span>ext</h2>
<style type="text/css">
h2{text-transform:uppercase;}
.larger{font-size:larger;}
</style>

ADDITIONAL METHOD: If you want to be able to output a particular format with a variable number of words, you can do something like this:

<?php
$string = 'VariaBle Number oF WORds!';
$words = explode(' ', $string);
$modified = array();
foreach($words as $word)
{
    $modified[] = '<big>'.substr($word, 0, 1).'</big>'.substr($word, 1, strlen($word));
}
echo strtoupper(implode(' ', $modified));
?>

Upvotes: 1

AndrewR
AndrewR

Reputation: 6758

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%;}

Upvotes: 4

John Conde
John Conde

Reputation: 219924

Use the CSS first letter pseudo-element by wrapping each first letter in a <span> tag:

p span:first-letter
{ 
    font-size: 16pt;
}

Upvotes: 3

Related Questions