How Can We Achieve Text Wrapping Around Irregular Images Using Divs and CSS?

Text Wrapping Around Irregular Images

In today's web design landscape, it's increasingly common to encounter non-rectangular images, such as maps of countries or intricate vector graphics. The visual impact of these images can be enhanced by wrapping text around them, but this poses a unique challenge: how can text flow naturally while maintaining a consistent distance from the image's irregular border?

Floating Dives to Define the Wrapping Area

A creative solution to this problem was proposed by Tory Lawson in his 2011 blog post, "Wrapping text around non-rectangular shapes." Lawson's method involves creating a series of divs that float next to the shape and block off the area where the text will wrap around.

Measuring and Dividing the Shape

To define the wrap area, an image editing software like Fireworks is used to lay a grid on top of the image and draw a bounding line around the desired text boundary. The width of this line is then measured and divided into equal intervals (e.g., every 10 pixels).

Creating the Divs

Once the measurements are determined, a HTML list is used to create a series of divs. Each div represents a vertical interval in the wrap area and is floated to the right, creating a "blocker" effect that prevents text from flowing over the shape.

CSS Styling

The final step involves applying CSS styles to the divs and the text. The wrapper div is assigned a width and height that encompasses the entire image, and the background-image property is set to the shape's image. The spacer divs are assigned a height corresponding to the interval measurements and are floated right to create the blocking effect. Finally, the text is styled with an inline display and a color to make it visible on the image.

Example Code

<div>
<pre class="brush:php;toolbar:false">#wrapper {
  width: 634px;
  height: 428px;
  display: block;
  background-image: url("headshot.jpg");
}
.spacer {
  display: block;
  float: right;
  clear: right;
}
p {
  display: inline;
  color: #FFF;
}

Conclusion

While there may not be an easy CSS solution to text wrapping around irregular shapes, Lawson's method provides a viable approach. By carefully measuring the shape and creating divs to block off the wrap area, it's possible to achieve a visually appealing result where text flows naturally and maintains a consistent distance from the shape's border.