Can Text Wrap Around Irregularly Shaped Images?

Can Text Be Wrapped Around Non-Rectangular Images?

Wrapping text around non-rectangular images is a common challenge in web design. Consider the case where you have maps of different countries and you want the text to wrap around the country's shape, maintaining a consistent distance from the border. Is it possible to achieve this?

The Solution

Yes, it is possible to wrap text around non-rectangular images using a technique outlined by Tory Lawson in his 2011 blog post, "Wrapping text around non-rectangular shapes." This method involves floating divs to block off the shape's area:

Step 1: Define the Wrap Area

• Determine the desired distance between text and image border.
• Open the image in an editing program and overlay a grid.
• Draw a bounding shape representing where the text should end, considering padding (e.g., 5px).

Step 2: Create a Width Measurement List

• Measure the width of the wrap area at regular intervals (e.g., every 10 pixels).
• Record these measurements on a piece of paper.

Step 3: Create Divs

• Create a div to act as a wrapper for the image and text.
• Create additional divs for each width measurement.

CSS

#wrapper { 
   width: [image width];
   height: [image height];
   display:block;
   background-image:url("[image path]");
}
.spacer{
   display:block;
   float:right;
   clear:right;
}
p {
   display:inline;
   color:#FFF;
}

Note: This approach is not as straightforward as using a CSS "text-wrap" option, but it allows for precise control over the text wrap behavior.

The above is the detailed content of Can Text Wrap Around Irregularly Shaped Images?. For more information, please follow other related articles on the PHP Chinese website!