How Can I Wrap Text Around Non-Rectangular Images Using CSS?

Text Wrapping Around Non-Rectangular Images: A Guide

Can text be wrapped around images that aren't rectangular? To achieve this effect, where text seamlessly conforms to the shape of countries or other irregular shapes, let's explore a method shared by Tory Lawson in a blog post.

Step 1: Establish the Wrap Area

Begin by identifying the area where text should wrap. This can be done using an image editing software like Fireworks. Set up a grid with appropriate spacing, then draw a boundary line representing the desired text-end position, accounting for a slight padding.

Step 2: Create a List

Measure the width of this irregular shape at predefined intervals (e.g., 10 pixels). Record these measurements in a list. This list will guide the creation of divs in the next step.

Step 3: Build Divs and Apply CSS

Create div elements for each measurement in the list and nest them within a wrapper div. Float these divs to the right and ensure they clear any right-floating elements. Finally, set the height and width of the wrapper div and the background image of the irregular shape.

Code Example

Here's a simplified code example based on Tory Lawson's method:

<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;
}

By following these steps, you can effectively wrap text around non-rectangular images, allowing text to flow naturally around the contours of complex shapes. Although not as straightforward as a dedicated "text-wrap" CSS option, this method provides a workaround for creating impactful visual effects in web design.