« Blogger Audioblogging with Movable Type | Main | Querying a MySQL database with PHP - Random Quotes »

Text Wrap

Updated March 23, 2005

Once you are uploading images to your MT weblog with ease, you might on occassion want to wrap text on either side of the image, like so:

flower2.jpg Placeholder Latin text - Vt enim quidam monumentis suis testati sunt, in Hispania pro consule et a sociis pecunias accepit emendicatas in auxilium aeris alieni et Lusitanorum quaedam oppida, quanquam nec imperata detrectarent et aduenienti portas patefacerent, diripuit hostiliter. Gallia fana templaque deum donis referta expilauit, urbes diruit saepius ob praedam quam ob delictum; unde factum, ut auro abundaret ternisque milibus nummum in libras promercale per Italiam prouinciasque diuenderet. In primo consulatu tria milia pondo auri furatus e Capitolio tantundem inaurati aeris reposuit. Gallia fana templaque deum donis referta expilauit, urbes diruit saepius ob praedam quam ob delictum; unde factum, ut auro abundaret ternisque milibus nummum in libras promercale per Italiam prouinciasque diuenderet.

There are two main ways to do text wrap:

1. Using the align attribute. One way to achieve an image wrap is to include an align attribute to your image tag. Example: <img src="http://www.yoursite.com/image.jpg align="left" hspace="5" vspace="5"> Use the hspace and vspace attributes to add margin around the image. Note that using the align attribute will do the trick, but it isn't considered good XHTML.

Image wrap using align="left" hspace="5" vspace="5" flower2.jpg Vt enim quidam monumentis suis testati sunt, in Hispania pro consule et a sociis pecunias accepit emendicatas in auxilium aeris alieni et Lusitanorum quaedam oppida, quanquam nec imperata detrectarent et aduenienti portas patefacerent, diripuit hostiliter. Gallia fana templaque deum donis referta expilauit, urbes diruit saepius ob praedam quam ob delictum; unde factum, ut auro abundaret ternisque milibus nummum in libras promercale per Italiam prouinciasque diuenderet. In primo consulatu tria milia pondo auri furatus e Capitolio tantundem inaurati aeris reposuit.

2. Adding a CSS class to your stylesheet. The proper way to do text wrap is to add a CSS class to your style sheet, and then include that class attribute in your image tag.

First add the following class to your stylesheet template:

.floatimgleft {
float:left;
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
}

Save and rebuild your stylesheet.

Then add the class attribute to the image tag of the image besides which you wish your text to wrap.

Example: <img src="http://www.yoursite.com/image.jpg class="floatimgleft">

If you float an image and you don't have enough text to wrap around the bottom of the image, add the following tag after the text you are wrapping:

<br style="clear: both;"/>

If you use the CSS stylesheet method, you can add captions to your images, while at the same time wrapping text.

Adding Captions with a Span Class (the easy way)

Instead of adding a class to the image attributes, you can wrap the image, and a caption, in a span class like so:

<span class="floatimgleft"><img alt="flower2.jpg" src="http://www.learningmovabletype.com/images/flower2.jpg" width="150" height="153" border="0"><br />Lily Pond</span>

This code produces the following result:

flower2.jpg
Lily Pond

Vt enim quidam monumentis suis testati sunt, in Hispania pro consule et a sociis pecunias accepit emendicatas in auxilium aeris alieni et Lusitanorum quaedam oppida, quanquam nec imperata detrectarent et aduenienti portas patefacerent, diripuit hostiliter. Gallia fana templaque deum donis referta expilauit, urbes diruit saepius ob praedam quam ob delictum; unde factum, ut auro abundaret ternisque milibus nummum in libras promercale per Italiam prouinciasque diuenderet. In primo consulatu tria milia pondo auri furatus e Capitolio tantundem inaurati aeris reposuit.

Adding Captions by Using Tables (the hard way)

Before the image tag, insert a div tag with the floatimgleft class:

<div class="floatimgleft">

Then add a table with two rows and with a width 2 pixels greater than the width of your image. In this case my image is 150 pixels wide, so the table width would be 152.

<table border="0" cellpadding="0" cellspacing="0" width="152"> 
  <tr> 
    <td width="100%" class="tableborder" style="border-bottom-style: none; border-bottom-width: medium"> <img alt="flower2.jpg" src="http://www.learningmovabletype.com/images/flower2.jpg" width="150" height="153" border="0"> </td> 
  </tr> 
  <tr> 
    <td width="100%" class="tableborder" style="border-top-style: none; border-top-width: medium"> <p align="center" class="imagetext">Lily Pond </td> 
  </tr> 
</table> 
</div>

The result should look like this:

flower2.jpg

Lily Pond

Vt enim quidam monumentis suis testati sunt, in Hispania pro consule et a sociis pecunias accepit emendicatas in auxilium aeris alieni et Lusitanorum quaedam oppida, quanquam nec imperata detrectarent et aduenienti portas patefacerent, diripuit hostiliter. Gallia fana templaque deum donis referta expilauit, urbes diruit saepius ob praedam quam ob delictum; unde factum, ut auro abundaret ternisque milibus nummum in libras promercale per Italiam prouinciasque diuenderet. In primo consulatu tria milia pondo auri furatus e Capitolio tantundem inaurati aeris reposuit.

Links: CSS Float Tutorial - by Max Design

Comments (6)

Sarah:

Is there a special spot in the style sheet to put the floatimage code?

Sarah - I think the safest spot to put the floatimgleft code is at the very end of your stylesheet.

Ted [TypeKey Profile Page]:

Is there a way to hack MT so that it automatically adds (class="floatimgleft"), when you upload an image?

elise [TypeKey Profile Page]:

Hi Ted - see Arvind's instructions at http://www.movalog.com/archives/hacks/uploaded-images.php

Sreddy:

Hi -- Is it possible to use the span class example when the text for the caption is a sentence or two long? I used the code suggested, and while the positioning works the caption displays on a single line and the body wraps around the width as determined by the caption. I want the caption text to be no wider than the image itself, and the body text to wrap around both the image and caption text. Thanks.

elise [TypeKey Profile Page]:

Hi Sreddy - I manually add break tags within the span class, where I want the line breaks to be.

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)