Fancy Ampersands

Ampersands are one of those things that kinda gets overlooked in Web Design. I mean, it’s a pretty small character, & people don’t really pay that much attention to it. Not fair, right?

Though seemingly insignificant, the ampersand has a beautiful face, often masked by the sturdy Roman characters that surround it. I say it’s high time to take away the curtain and let this character show it’s stage presence.

But how can such a thing be accomplished? Let’s take a look back stage.

First let’s take the humble ampersand and seperate it from it’s surrounds:

&

Now we’ll dress it up with a bit of CSS.

First we have the font-family. Some fonts contain fancier ampersands than others. Here I’ve chosen a group of fonts that have styled it similar to what you see on this page. However, this is only available in the italic variant, so we set that property too. Finally, because headings are usually bold, and we don’t want that to stop the fanciness, we make sure that is set to normal.

Alright, now it’s all well and good to be able to manually improve our ampersands appearance when we want to, but wouldn’t it just be easier to have this done automatically, no having to add a span around each ampersand individually?

Yes, it would, and it only takes a bit of PHP.

What the regular expression below does, is look inside $content for any occurrences of & that are not inside of a tag (&‘s are commonly found in url’s, and replacing those will break the link). I’ve also made one that checks for the numeric reference aswell.


.amp {
font-family: "Goudy Old Style", Baskerville, "Palatino Linotype", Palatino, serif;
font-style: italic;
font-weight: normal
}


$content = preg_replace("@(?![^<]+>)&amp;@", "<span class=\"amp\">&amp;</span>", "$content");
$content = preg_replace("@(?![^<]+>)&#038;@", "<span class=\"amp\">&#038;</span>", "$content");

If you’re using WordPress you could place the following in your functions.php file:


add_filter('the_content', 'fancy_amp');

function fancy_amp($content) {
  $content = preg_replace("@(?![^<]+>)&amp;@", "<span class=\"amp\">&amp;</span>", "$content");
  $content = preg_replace("@(?![^<]+>)&#038;@", "<span class=\"amp\">&#038;</span>", "$content");
  
  return $content;
}

And that’s it!

robert phillips said:

May 19^th, 2010
11:14 PM

It *almost* works for me.

I’m trying to use it in the tagline (what Headway calls it), aka “blog description”.

Exact copy/paste into functions.php.

I think the problem is with my CSS, but I’m running out of ideas:

h1#tagline,
span.amp {
font-family: “Goudy Old Style”, Baskerville, “Palatino Linotype”, Palatino, serif;
font-style: italic;
font-weight: normal
}

thanks!

%%robert

Alex Green replied:

May 20^th, 2010
1:03 PM

Hi Robert,

The above php code to insert into functions.php applies only to the content of a post or page. For the tagline, the easiest way would be to open header.php and replace the text that says get_bloginfo('description') with the actual tagline, with the span around the ampersand.

Also, if you want to apply the same styling to ampersands in the title of posts/pages, copy the above code, and replace the_content with the_title.

robert phillips replied:

May 20^th, 2010
10:15 PM

Thanks, Alex!

It’s odd. I did copy/paste using Text Wrangler, following your instructions to the letter. Tried it with Headway and a couple of really basic frameworks such as Carrington. Aside — some themes don’t even have get_bloginfo(‘description’).

What I found when I could insert all the php code is this. Of course the page elements get the span. But — still — the Description does not have the span injected.

Given that you’re very into wp typography (unlike virtually every themer who *claims* to be into it; consider Thesis, for example ), there’s obviously no issue with your code. And the search/replace using TextWrangler is a no brainer.

But something is amiss.

If you’ve got any quick ideas, I’m game to keep trying. But if it’s not time-effective for you, I surely understand.

But I’m starting to think that for practical purposes, I should just fire up Photoshop and set the type like I want it into a transparent background jpg header image. We both know that *must* work.

%%robert

Alex Green replied:

May 20^th, 2010
11:16 PM

I agree that doing the description in Photoshop would be a good idea, especially as it involves site branding and will be consistent cross browser.

I had a look at the Carrington blog theme, and you’ll find the line you need to change in header/header-default.php, on line 65. I just remembered that most themes will be using bloginfo('description'), without the get_, which might be why you couldn’t find it.

Just replace the php with your text (eg. & this is my blog), and that should work.

Add some flair to your blog through CSS & PHP

6 people have left a comment

Leave a Reply