Every bitmap image on the web is rectangular, no matter what appears in the image, so text wraps around a floated image box in the same way every time. Using a few tricks and a bit of work in PhotoShop, there is a way to create the appearence that web page text is wrapped around a curved shape.

Step One: Find Your Image

Ideally the image used for this technique has the same background as your web page, or is transparent against it. For this exercise I am using this bust of Demosthenes, masked and edited in PhotoShop.

Step Two: Divide Your Image Up Into Horizontal Slices

The thinner each slice and the more slices you make, the better the result. Typically I place a series of PhotoShop guides across the image, separated by 10 ~ 50 pixels. (Turn on rulers (CMD+R) and the PhotoShop grid (CMD+’), set the grid separation in PhotoShop Preferences (CMD+K (sigh – Adobe, please change this to the standard Mac preference shortcut of CMD+, :: growl ::)) under Guides, Grid and Slices to the amount you wish, ensure that Snap is on (CMD+SHIFT+;) and draw out guides from the top ruler. (You might want to have more guides present where the image changes substantially in width.) Then choose the Slice tool (C on your keyboard pressed a few times, assuming you set up PhotoShop preferences in the right way) and click Slices From Guides on the option bar.

Step Three: Constrain The Edge of Each Slice

Turn off Grid and Snap. Using the Slice Select tool (C again on your keyboard), pull either the right or the left side of every slice to barely contain the image within the slice boundary. Note: the side you adjust must be the same for every slice. You might want to turn on the Hide Auto Slices option to clarify things.

Step Four: Export The Slices

Save the entire image as a PSD, as doing so preserves all the choices we have made so far and imposes a naming convention on our slices. Choose File / Save for Web & Devices in PhotoShop, and select all of the slices in one of the option windows using the Slice Select tool. (Note that PhotoShop’s interface doesn’t make it look like you can drag a marquee over all the slices to select them all, but you can). Set every slice to the same optimization settings.

When saving the slices, choose to export User Slices, Images only and Other… for settings. Use the following settings in the window that appears:

doc. name + hyphen + slice_no (01, 02, 03…), all other settings, with the exception of ext, to none. Make sure you save the images in a folder.

Step Five: Bring The Images Into Your Web Page

Import the images into your web page. I prefer to do so using DreamWeaver or Coda, then use Find/Replace in the application to change width and height from attributes to styles. You might want to follow the hints below:

• If every image is the same height, you don’t need to provide that information as part of the inline style for each (use a declaration in a stylesheet instead).
• Only the first image really requires an alt value. The alt attribute values can be left blank for the other images.
• Apply the same class to all the image slices (alternatively, have another method of referencing only those slices, such as a descendant selector.)

  There should be no spaces between the image tags.

Your final markup would typically look something like this (only the first two image slices are shown):

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit…
<img src="images/demosthenes-01.jpg" alt class="ragged-float"  style="width:326px;height:24px;"><img src="images/demosthenes-02.jpg" alt class="ragged-float" style="width:347px; height: 26px;" />

Step Six: Complete The CSS

The resulting web page will look terrible. To fix it, apply the following CSS (here I am assuming that you have edited the right edge of every slice in PhotoShop… i.e. you want the image on the left and wrapped text on the right).

img.ragged-float {
	float: left; clear: left;
	margin-right: 2em;
}

How does this work? Remember that clear: left means “do not allow anything to float to the left of this element”. It forces each slice onto its own line, with the text happily wrapped to the right.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.