Reader Question: How can I wrap text around an image?
a friend who has a Mac asked me to clear cut an image and put it on a webpage in the same way you see images and text layed out in a newspaper - so the image doesnt stay in a square/rectangle
My Thoughts
What Lucy is asking is how to get a jagged edge of text around an image - rather than the basic square wrap. You see this most often in magazine and newspapers as a way to incorporate the images more directly in with the text.
The problem is that all Web graphics are square. That is, they only have four sides in a rectangular or square shape. Even if you create an image that has a transparent background, the edges of the graphic are square, not round or jagged. The transparency just makes it look like it's round or jagged. In fact, even the smallest parts of Web images, the pixels, are square.
Currently, the best way to get text to wrap around an image so that the text follows the contours of the image is to cut your image up into small slices with variable widths. You then stack and float those images so that the text that comes after them follows those contours. I've created a free web template that shows how to do this.
More Resources
- All Web Graphics are Square
- Transparent Images
- GIF Images
- PNG Images
- Understanding CSS Float
- Free Web Template: Wrap Text Around an Image
How do you wrap text around jagged images?
Do you use this technique to wrap text around the contours of an image? Or do you use some other method? If you can help lucythelusty, you can post your ideas in the comments here or reply to her message in the forum.
Comments
Jennifer,
You really ROCK!
I was blessed the day I come across your free HTML lessons(2 years ago) and you keep on surprising me with a knowledge you have!
I love the fact that you always have an answer to a question, or a solution to a problem!
It is AWESOME!
THANK YOU VERY MUCH for being there for all of us at Web Design Forum!
Thank you!
Tania Groult, your humble student
I read about a technique where some guy uses php to look at the transparency areas of a graphic and creates a border so the text follows an irregular shape. PITA. The next version of flash is going to have this page layout like functionality. Hopefully its as easy as right click graphic - text runaround.
I’ve never really had a situation where a square graphic was a problem. But I did recently create a page with the jagged background wrapping around the text. Take a look at Paws For Parrish
Here is another example where it appears that the text is written on a folded piece of paper: Example
Hi Jennifer, I love reading all the helpful ideas and solutions you send out. I recently found this tutorial that might help people wrap text around jagged images.
http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm