Making Room to Breathe: Wrapping Text Around Elements

I constantly look through websites and wonder why designers allow text and images to get a little too close. Why don’t the elements have room to breathe?

That’s where text- or word-wrapping comes in. Adding space above, below and to the sides of an object embedded in text can make a lot of difference in terms of overall look of your site and even readability.

Wrapping Benefits

The No. 1 reason to use text wrapping settings for images that touch text is to aid readability. The addition of white space around images gives text a cushion, making it easier on the eye.

Depending on your specs, text wrap can also add emphasis to images as well. By separating text and images both will more clearly stand out.

Whether text wrapping is even necessary depends on how your site is constructed. Blogs using a wide columnar design commonly use small photos embedded in text and rely on text wrap settings to make images and text work together. Many sites though have a modular construction that almost makes text wrap unnecessary because text and images are almost exclusively stacked and rarely appear side-by-side.

How Much Wrap?

How much wrap to put around an image is a little trickier. Blogging sites and software (such as WordPress and Blogger) often have a set of defaults that will wrap text for you. The wrap specs correspond to the style template you select when you set up the blog.

These text wrap styles tend to be somewhat tight but typically work effectively for the blog-format. Standard text wraps typically allow for 5 or 6 pixels of space all the way around an image. Personally, this is a little tight for my taste. For a super clean text wrap style consider wrapping text so that the vertical space on either side of an image is equal to the horizontal space above and below the image. You can accomplish this by setting the text wrap specs to mirror the leading of the body copy.

Photo and text alignment can impact the look of text wrap as well. Wrap will always seem more consistent and intentional when it falls next to text that is justified (so that all lines start/stop at the same place. Wrap will appear looser when it falls alongside ragged text.

Types of Wraps

Text wrap typically appears in one of three ways – as a square-shaped box around an image, an oddly-shaped halo around an image to match the contours of the image (for non-square images) or as a wrap that knocks out all of the lines around an image (jump text wrap).

Text wrap can occur outside of an object – to keep text from touching the borders of another frame – or inside of an object. Inside text wraps keep text contained within a frame, such as the text inside the black shape on the Impero site.

Wrap Scenarios to Avoid

Text wrap can cause readability issues if the wrap causes text to break poorly. Watch for very thin columns of text next to a wrap. You may want to rethink your photo size or placement if the wrap causes excessive hyphenation (aim for hyphens no more frequently than at the end of every three lines) or blank lines of text. (This happens when words can’t fit in the space left after the wrap is applied.)

Photo placement can also case wrapping concerns. Avoid having lots of jagged wraps throughout your page. Varying wrap widths and photo sizes can make for a jarring design. Instead, group many small images together and use a single wrap or use photos with equally-sized frames.

Consider alignment as well. Images and text wrap will appear more uniform if all of the images are placed in the same manner – to the left, center or right side of the text block. Centered images can be tough to wrap around because text will often break oddly around the object. Also using a left-aligned image and close to a right-aligned image can create an odd, difficult-to-read block of text squeezed between the images.

Code

When creating your own styles sheets, you might consider developing your own text wrap specs. You can apply classes that will create the desired alignment and spacing.

<img src="images/flower.jpg" alt="A yellow rose" class="my-align-class" />

Where my-align-class could be one of the following:

.align_left {
	float: left; 
	margin-right: 1em;
	margin-bottom: 1em;
}

.align_right {
	float: right; 
	margin-left: 1em;
	margin-bottom: 1em;
}

.align_center {
	display: block; 
	margin-left: auto; 
	margin-right: auto;
}

For wrapping text around non-rectangular shapes, you can take a look at the following tools/techniques:

• CSS Text Wrapper: Generate HTML/CSS to wrap content to any shape or curve
• CSS – Wrapping text around non-rectangular shapes

Conclusion

Text wrap is a great thing to keep in your design toolbox. In particular, it works great on sites that have large blocks of text with small images scattered throughout.

But don’t just rely on a template for wrap settings. Play with the code and add more space (or even take away a few pixels) to create a style that works best for your site.

Consider alternatives to wrapping text. Instead of dropping an image into the text, let the image float above it (look at how the images and text wrap on this site).

Text wraps can be tricky. Successful wrapping depends on the size of image, size of text and with of column where everything lives. Make sure your wrap passes the eye test and text is easier, not more difficult to read, with the addition of a text wrap.

Images courtesy of soa2002 and frankjuarez.