Ludwig Pettersson

Creating great quotes with a little bit of CSS & PHP

Wednesday, 23rd April 2008

One of the things I wanted to achieve in my redesign of the site was to have wrapped quote signs in my blockquotes.

This is nothing new, but i stumbled upon a really neat way of achieving it while checking out Happy Cog, simply placing the last word of the quote within a span:

<blockquote>
    <p>
        Lorem ipsum dolor sit <span class="last-word">amet</span>
    </p>
</blockquote>

Make it automatic

But to add these spans manually quickly turns ugly, we want it to be done for us - which is where PHP comes to the rescue.

<?php
/** Wrap last word in a <span> element
*/
function wrapLastWord( $text, $className = 'last-word' )
{
    $words = explode( ' ', $text );
    $lastWordKey = count($words)-1;
    $words[$lastWordKey] = '<span class="'.$className.'">'.$words[$lastWordKey].'</span>';
    return implode( ' ', $words );
}
?>

And then you call it by:

<blockquote>
    <p>
        <?php echo wrapLastWord( 'Lorem ipsum dolor sit amet' ); ?>
    </p>
</blockquote>

<!-- or -->

<blockquote>
    <p>
        <?php echo wrapLastWord( 'Lorem ipsum dolor sit amet', 'last' ); ?>
    </p>
</blockquote>

<!-- to replace the default class for the <span> element -->

This is a simple function that takes the text text and / or a class name for the <span> and wraps it around the last word.

It’s really no need to get into detail how it does it since it’s such a tiny function, but it works for simpler word wrapping and it should only be used on raw text.

The CSS

I’ve got two images, one of a left double quote and one of a right, quote.gif & quote_right.gif.

blockquote p { text-indent: 35px; background: url(../gfx/v2/notebook/quote.gif) 0 3px no-repeat;  }
blockquote span.last-word { padding-right: 35px; background: url(../gfx/v2/notebook/quote_right.gif) 100% 1px no-repeat; }

Like I said, this isn’t anything new - just my way of achieving the custom left & right quote signs and I hope someone finds it useful.