So I turned to jQuery to wrap the first letter of the first paragraph with a <span> tag that I could style however I wanted. I found inspiration for this script on the Learning jQuery website, but I couldn’t find a pre-made script that would do exactly what I needed. So here is my script, hopefully it will help someone else out.

Stylesheet

.init-cap {
 font-size: 1.5em; /* Set the size of the raised letter */
 line-height: 1.2em; /* Adjust the line spacing to match the rest of the text */
 }

Javascript

$(document).ready(function() {
 $(’.cap p:first’).each(function() {
  var text = $(this).html();
  var first_letter = text.substr(0,1);
  if ( /[a-zA-Z]/.test(first_letter) ) {
   $(this).html(’<span class="init-cap">’ + first_letter + ‘</span>’ + text.slice(1));
  }
 });
});

What we are doing is selecting the first paragraph inside each element with the class “cap” applied to it. We then chop the first letter off that paragraph, check to be sure it is really a letter (rather than a tag, for instance), and add it back on wrapped inside a <span> tag. By adjusting the CSS, this could easily be used for drop-caps, as well.

I have been using PixelPost for my photoblog for nearly two years, since I got tired of the size limit of photos in Blogger. PixelPost always served me well, and as a purpose-built photoblog package, it can’t be beat. However, it has suffered from a (seeming) lack of developer attention lately, and is now showing it’s age.

Since there is no native export functionality in PixelPost, I had to write a custom script to dump the database into the MoveableType export format that EE will import. That worked pretty well, although there were a few things I had to go in and fix by hand. When I have some spare time, I will try to clean up the script and make it available for anyone in my situation. (Or contact me if you want a copy of the file to play with.)

If you were subscribed to my photography RSS feed, please update your subscriptions to the new link: http://elivz.com/photo/feed/. It should redirect the old address, but I may not keep the redirect active forever.

Hope you enjoy! I am going up to Portland, ME tomorrow, so I should have some new photos to post, as well.

Amanda has some final scanning and printing of photos to do at Duke in preparation for her show in August. I will also be working on some design projects, but I expect to have plenty of free time. So give me a call, we’ll have a drink on my porch, go for a walk, or you can make me dinner (all of our dishes and cookware will still be here in Somerville).

The easiest solution would have been to use an <img /> tag in the flow of the text. There were two problems with this: The first is my philosophical issue with using an image tag when semantically I want text. The second problem is making the image change color when the user hovers their mouse over it, like all the other links on the page. Of course I could have set up and onMouseOver script that would switch the images, but I didn’t like that, either. The classic image-replacement trick of saving both the normal and the “hot” images in one file and then adjusting the background-image-position in css is so much faster and more elegant.

So I started looking at image replacement techniques. Unfortunately, all the standard methods require the replaced image to be a block-level element. This obviously won’t work in my case, since it would put each image on a separate line. With a bit of experimentation, I found a method that allows me to keep the replaced image as an inline element, keeps the link and tooltip active, and even lets me underline the image on mouseover, just like a normal link.

First try

I am going to be working with this xHTML for my first experiments:

<p>This is a line of text with a <a class="replaced" id="butterfly">butterfly</a> in the middle.</p>

I want to replace the word butterfly with an image of a butterfly:

There is a CSS position property called “inline-block” that would seem to combine the necessary qualities of both “inline” positioning—keeping the replaced image inside the flow of text—and “block” positioning—creating a defined space that an image can be placed in. And it does, except that it is not part of the CSS specification and Firefox doesn’t support it. However, Firefox does support their own implementation, called “-moz-inline-box”. So combining those with the standard image-replacement code, we get:


.replaced {
display: inline-block;
display: -moz-inline-box;
background-repeat: no-repeat;
background-position: 0 0;
overflow: hidden;
text-indent: -9999px;
}
#butterfly {
width: 22px;
height: 18px;
background: url(butterfly.png) no-repeat;
}


Which gives us:

This is a line of text with a butterfly in the middle.

That’s close—the image shows up in the middle of the sentence, as desired, but in Firefox and IE the image is still overlaid with text.

Second Try

Adding two new rules to the stylesheet will make it work in Firefox:

.replaced {
display: inline-block;
display: -moz-inline-box;
background-repeat: no-repeat;
background-position: 0 0;
overflow: hidden;
text-indent: -9999px;
font-size: 0;
vertical-align: text-top;
}

This is a line of text with a butterfly in the middle.

But Internet Explorer, the bad boy of the browser world, only shows a little glob at the top of where the image should be. Fortunately, my default solution to all IE bugs works in this case. Adding zoom: 1 gives the image ”layout” and causes it to re-appear. (Incidentally, both display: inline-block and setting the dimensions should trigger hasLayout, but for some reason they don’t in this case.) Zoom is a Microsoft proprietary extension to CSS, so it won’t validate, but neither will display: -moz-inline-box. If that bothers you, move them to alternate style sheets…I’m not too worried about it.

Underlining on hover

On my site, like many others, an line appears under links when you place your mouse over them. Since I wanted to directly replace the text in my sentence with an image, it would make sense that it would also have the underline. If you have a rule in your stylesheet for a:hover already, the image-replaced link will inherit it automatically, but the line will be directly under the image rather than a few pixels lower like it would be with normal text. So I add some padding to the bottom on hover. I also adjust the background position to show the second, hightlighted, image that is below the normal one.

#butterfly:hover {
background-position: 0 -18px;
border-bottom: 1px solid;
padding: 0 0 2px;
}

This is a line of text with a butterfly in the middle.

Looks great, right? Except if you are using Firefox, which refuses to add the padding to the bottom. As reported by Firebug, Firefox actually decreases the height of the element to cancel out the added padding. Weird. The only solution I have found requires adding an extra <span>, which I generally avoid. I moved a number of CSS rules to the new span and added three extra rules. The line height of the span is set to the height of the image, to prevent it from showing part of the highlighted image below. Also, IE7 no longer shows the “hand” cursor, so I added a rule to fix that. Lastly, I added -3 pixels of margin to the bottom to offset the padding and border.

The final code is:

<p>This is a line of text with a <a class="replaced" id="butterfly"><span>butterfly</span></a> in the middle.</p>

And the final result is:

This is a line of text with a butterfly in the middle.

This is my new home on the internet, where I will be posting articles about web (and other kinds of) design, and some personal notes along the way as well. To begin with, I plan to write up some tips and things I learned in the course of creating this site&mdashthere are a few you may find useful.

I still have a few things left to do to get this site looking its best. Some things are a little funky in Internet Explorer (particularly version 6, but you shouldn’t be using IE6 anyway). But I will get those cleaned up in the next few days.

In the mean time…have a look around. Check out my portfolio, subscribe to my blog feed, send me a note.