The Perfect Ampersandposted: May 22, 2012 | comments: 1
In design, people often talk about “The Perfect Ampersand.” Although there’s not a singular ampersand that’s perfect for every situation, there are a lot of awesome ampersands out there that can look miles better than the one in the regular type font that you might be using. Using just a little jQuery & CSS, it’s an easy step to get your own “perfect ampersands” as well.
An example of this is the ampersand I’ve used in my own website here:
The original text might be fine on its own, but that second ampersand looks so much better. I’ve read up a lot of blog posts about making these, and there’s a lot of different techniques out there. My only issue with them was that it required you remembering to manually add markup to every single ampersand in ever page and post you create for your website. Now, adding the extra markup isn’t hard… but it’d marginally annoying to say the least. I was looking for a much more automatic way to do this, so that I wouldn’t ever need to worry about that extra markup every again.
So today while I was looking for some jquery codes for a slightly similar reason, I was shown this jQuery plugin which seemed to be exactly what I was looking for to create my “perfect ampersand.” You can get full documentation on their site, but it’s as simple as adding their jquery plugin inside your <head> tags, picking out one of the example jquery snibbets that best suit your needs, and volia! The jquery code automatically adds all the needed markup to all your ampersands for you when the webpage loads!
This is the simple jquery snibbet I used for my website:
|
1 |
$("body *").replaceText( /&/gi, '<b class="ampersand">' + '&' + '</b>' ); |
The benefit of this is that ALL of your ampersands in each page get the markup, so none of them will be missed, and it also ignore all ampersands used in the actual HTML coding. From here you can implement any CSS rules you want to the ampersands, you could style them as a whole, or you can use CSS rules to style individual ones. For example, I use this to style all the ampersands on TrezhurIsland:
|
1 2 3 4 5 6 7 8 |
.ampersand { position:relative; line-height:0.5em; font-family:treasure; font-size:1.5em; font-style:normal; font-weight:normal !important; } |
This worked a charm for me. Not only can you use it to style-up your ampersand, but it works other characters & words as well!
So that’s my perfect ampersand.
Happy coding & I’ll see you next time!
Salmy
May 22, 2012 394 days agoThis is really awesome & convenient!