March 23, 2005

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="/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="/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:
MT Support Forum thread on wrap text
Another thread with different wrap text methods
CSS Float Tutorial - by Max Design
How to do drop-shadows on your images - from Bogula Rasa


Many thanks to the wonderful contributors at the MT Support Forums for these tips, especially LisaJill, and to commenters PlanetPhillip and Tim Makins.


Has this tutorial been helpful? Please consider linking to Learning Movable Type at http://learningmovabletype.com/ . Thanks!

Posted by Elise Bauer on March 23, 2005 to HTML and Javascript, Style
Comments(29) | Email to a friend | Printer-friendly version


Trackback

If you would like to send a trackback
please use the following URL: http://learningmovabletype.com/cgi-bin/mt32/mt-tb.cgi/201

» CSS Drop Shadows from Blogula Rasa
I noticed a lot of visitors are arriving here looking for information on adding drop shadows to images. As I flailed helplessly at this for a long time before finally settling on a simple method, I thought I'd add a......[read more]

Tracked: March 31, 2005 12:03 PM

Comments

Another really helpful tip! This will make a big difference in a travel journal that I'm slowly putting online from a trip in September. I just fixed the images in the most recent entry, and it's much more readable and "flows" better than the previous entry.

I'm still struggling with the "short text" issue, though. I may go back and re-align that to the top of the image. For now, though, it looks fine. Gradually, I'll probably work through the entire archive and fix the text wrap around all the images. It's at http://www.blogula-rasa.com/archives/2003_09.php

But from now on, all the rest of the entries will look really nice. Thanks again!

Is there any way to embed an image in the title bar like this one http://www.thecramerfamily.org or this one http://www.spencerkingcomedian.com/honorcode/

I currently have a pic just sitting on the right side bar, but would like to embed it in the title bar. Thanks for the great tips!

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.

Elise, you are my hero. I just used this tip yesterday (the easy way) and am planning to update my stylesheet soon so that I can play with the cool kids. Thanks for all your great tips!

Hey, we "cool kids" would still be sitting alone at the blogeteria if it weren't for Elise and her wonderful site. I've since graduated to using CSS to add drop shadows on most of my images, but I started off with "floatimgleft" and still use it for some things.

There's more than one "easy way;" I just add class="floatimgleft" at the end of the little image popup that Moveable Type shows with the HTML to cut and paste, right after border="0"

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

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

For a slight variation on the CSS (class="floatingimgleft") approach, you might want to create CSS i.d.s instead and then put contents in div tags with i.d. names. The advantage of this is that you can define a style for each div and then define a style for images that fall within those divs and not have to put "class=..." in your image tags. For instance, let's say you have a div identified as "news". In your style sheet you could have a definition that looks like this: #news img { and then define how the images in the news div should be treated.

If the width of the caption is longer than the width of the picture, how to deal with it?

Hi Big Un - from what I understand, one should only use a Div tag once on a page, and preferable regarding the physical layout of that page. You don't have to put the class attribute in the image tag. You could wrap the image in a div class tag instead.

Hi Jamo - use a break tag in the caption, or use tables.

Does this same method work for centering an image? Would you have to use text-align: center; instead of float: left;?

hi, thank you for the lesson.

i've noticed when i break the paragraph, the span class ends, and the new paragraph drops below the image. is there a way to avoid this; a way to have multiple paragraphs on the right (or left) of an image?

Hiya. I can't seem to get this to work. I've followed the instructions to a T, but nothing. I even went to the other 3 links you suggested, but no matter what I do....

At the bottom of my stylesheet I have
.floatimgleft {
float:left;
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
}

In my entry, the tag is
img alt="liberty bell" src="http://www.reneezara.com/movabletype/archives/images/libertybell.jpg" width="101" height="135" class="floatimgleft"

My blog is at http://www.reneezara.com/movabletype/index.html
I'm using both Safari and IE on a Mac, but that shouldn't matter because it works when I'm viewing this page. I'm using MT 3.0.
Can anyone help?

Hi Jeremy - Don't know about the centering of an image, why don't you experiment and let us know what you find out?

Joaquin - I'm not familiar with that problem. I usually just put the class attribute in the image tag. When you do that there is no problem with multiple paragraphs.

Renee - Weird. I have no idea why it isn't working. But, then I'm nowhere nears an expert in CSS. I suggest taking your question to the MT Support forum and asking there. There are lots of people on the forum who are quite well versed in CSS. It could be something to do with the other CSS code on your stylesheet.

Elise: thank you. that's good enough for me.

Hehehe, tricky right? Ok, I'll check out the forums. Thank you :)

Renee - your img tag is missing the border="0" attribute. It should come right after the height value. Try putting that in, it may be required - but also report back what the forum folks say, because it's true there might be something else in your CSS that's overriding. Nothing jumps out that I can see (bless Firefox and their handy CSS looky-thing)

The fix for my problem:
img.center {
text-align: center;
margin: 0 auto;
display: block;
}
Then in the image code the class would be "center".

Renee - I just checked your css at w3c css validator and got many Parse error and warnings. right before the .floatimgleft you have "" which I dont think should be there (i think).

oops I forgot to add this to my last comment. You should not use the border="0" attribute.

The "align", "border", "hspace", and "vspace" attributes of the image element were deprecated in HTML 4.01.

If you want to add a border around an image you are supposed to use css.

Hi! First, I want to thank Elise, Ginny & Jerm for responding so quickly :)
Jerm, thanks for the css validator suggestion. You were right. It seems I had an unnecessary tag in there, left over from who knows when, and it was messing things up. It was /textarea and it was right before my .floatimgleft. Once I removed it, it worked like a charm!
Thanx all for your help :)

I simply cannot get this to work in MT3.16

I use the default stylesheet, even created a brand new blog to test, and everytime it places the image correctly, then inserts the text one line above the bottom of the image. In other words, it only wraps one line, and it is aligned with the very bottom of the image.

Any ideas?

Dwood -
There are two methods described. They are both very common methods and should work with MT 3.16. I suggest asking your question at the MT Support Forum at http://www.movabletype.org/support, describing the method you are trying, and providing a link to your test blog.

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.

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

Elise:

Maybe you can help me. I've added the floatimage class, and some interesting behavior has resulted.

In Safari, the text wraps, but starts at the bottom of the image.

In IE for Mac, the text wraps fine (but an image I use for blockquotes overlaps with the image I want to wrap around).

In Firefox for Mac, the text wraps fine, but the text is now, oddly, bolded.

On XP, IE seems to work fine, but the bolding occurs in Firefox.

Here's the URL.

http://artfulwriter.com/archives/2005/05/nietzsche_on_sc.html

I wonder if anyone can figure out what's going on. I'd love to use the CSS method instead of the align method so that I can add captions, but far too many of my readers use non-IE browsers.

Thanks in advance,

C.

I use Safari, Firefox, and occasionally IE, all on my Mac and the text wrap works fine. You might try running your page through the w3C validator to see if you have some missing closing tags, which are the usual suspects. See http://validator.w3.org/.

Elise:

You're the best. Fixed, fixed, FIXED!

Thanks a million,

C.

PS: It was two little problems. An unclosed bold tag in a title in the right column (lord knows how that freaked out Firefox in the center column) and not closing the image tag with a slash.

Very nice text wrap tutorial. Thanks!


Post a comment

(Before posting a comment please see the Comments and Trackbacks Policy. Do you need help troubleshooting your weblog? Please post questions and requests for support at the MT Support Forums. Thanks!)




Remember Me?

(you may use HTML tags for style)

Email to a friend

Email this article to:


Your email address:


Message (optional):