Fancy text wrapping around an image

By Kevin A. Freitas

Skip to final sample »

Once upon a time, I came across Eric Meyers' Curvelicions technique for achieving fancy text wrapping around an image element. Recently, while reading comments on a post on Asa Dotzler's blog, I was enlightened to a technique proposed by Lauritz Jensen to achieve said text wrapping without slicing up an image into pieces. The only unfortunate requirement for Lauritz's technique is that it requires the image around which text will wrap to have a transparent background. Not one to shrink to limitations, I came up with my own flavor that allows irregular text wrapping without slicing image or requiring transparent image backgrounds so we can be free to use JPGs, PNGs, or GIFs.

Enough introduction, let's get it on!

The setup

Choose an image with a subject around which you'd like to wrap your text. I'll use a lunar eclipse image from my astrophotography gallery (shameless plug, I know). Since the moon rests on a black background I've used a radial gradient to leave some of the blackness around the image but want to seamlessly fade it so it sits well on this page. This technique can be used for as sophisticated an edge you'd like to wrap around. Also note the height of the image chosen since this will matter later when we do our virtual chop job on it.

CSS (though not much)

Now with an image chosen we can begin to layout the XHTML and CSS needed to make this happen. First, the CSS:

div.wrap_area { position: relative; }

div.wrap_area img { position: absolute; left: 0px; top: 0px; }

div.wrap_area p { position: relative; }



div.shape_wrap div { float: left; clear: left; height: 20px; }



/*

div.wrap_area img { opacity: .5; filter: alpha(opacity=50); }

div.shape_wrap div { border: 1px solid #f0f; }

*/

Any text inside "wrap_area" will be affected by the fancy wrapping. The "shape_wrap" elements will be used to define the blocks around which the text will wrap. Adjust the "wrap_area" <img> position and the "shape_wrap" float property depending on where you'd like this all to happen. The height of these blocks can be adjusted according to how tightly you'd like your text to wrap around an image. Note: The smaller the height of your blocks, the more XHTML will be necessary to properly wrap. The commented bits can be used for diagnostic purposes -- when you want to see your wrap shape just un-comment those lines.

The XHTML is where things get a little messy:

<div class="wrap_area">

    <img src="wrap-subject01.jpg" class="no_border" alt="Lunar eclipse photo" />



    <div class="shape_wrap">

        <div style="width: 250px;"></div>

        <div style="width: 280px;"></div>

        <div style="width: 305px;"></div>

        .

        .

        .

    </div>



    <p>Numerous blocks of text</p>

    .

    .

    .

</div>

Now have a look at the sample. For this I choose a wrap block height of 17px only because I was originally going with 15px but made the desired curve with borders on, thus adding one pixel to the top and one to the bottom of each block. 2 + 15 = 17   ;)  

IE seems to deal with the height of the blocks differently than Firefox since it's basing that height more on font size and less on the CSS-set size. You can find a happy medium or add your own CSS hacks to make IE behave.

View normal | structural sample »

Tested to work in...

• Mozilla/Firefox 1.x
• IE 5, 5.5, 6
• Safari

(2004-12-23)

« Back to Articles