Making Room to Breathe: Wrapping Text Around Elements

Text wrap can be a useful tool when embedding images into blocks of text and when used properly can add to your site’s readability.

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:

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.

Previous:
Next:

Tagged with:

Carrie Cousins has more than 10 years experience in the media industry, including writing for print and online publications, and design and editing. Carrie is also a sports fanatic and spends way too much time planning football and basketball trips and obsessing over stats.

View all contributions by

Website: http://about.me/carriecousins

Related Articles

Feedback 8

Comments are closed.
  1. 2

    For irregular shapes one can also take a look at jquery bacon and found another js plugin that did it kind of automatic. though it was very heavy and not well on browser coverage.

    jquery bacon which will work automatically would be awesome. still look for a really good responsive way ;) for example around round divs

  2. 3

    My advices:
    Instead of defining two styles in some class, its much better to define margin: 0 auto;
    Also, it better to define float:none; to .align_center , because some browsers could cause problems.

    Anyway good article ;)

  3. 4

    Good subject. This important part of a layout and design normally is ignored. As you mentioned it is hard to set a rule when to use it.
    But it is very obvious that if it hearts readability, or the image those are the big stop signs- Thanks for the post

  4. 5

    this is a great article! not many discussions on the web talk about text wrapping and its such a fundamental issue, nice work!

  5. 6

    Chris is right, we don’t often come across articles championing the advantages of text wrapping, although it does play a huge role in improving readability and showcasing images. The type of wrap you choose-image halo, jump or square text- can actually have an impact on how the content is perceived/consumed by the user, and build a relationship between text and image. It’s actually fascinating!

    Cheers,
    Sarah Bauer
    Navigator Multimedia

  6. 8

    Very insightful article Carrie! There are many wonderful sites out there rich in content. The greatest content, however, will always be less attractive to visitors if individual elements aren’t well-separated. This always bears repeating.

Comments are closed.