Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
4. Curved Text Wrap
With HTML, you can wrap text around a graphic using the float property. However, because all image files are rectangular, the text wrapping around the image will follow the straight edge of the image, creating a distinctly rectangular pattern. Most print layout programs, though, allow you to control the exact shape of the wrap around the image, creating curved shapes. There is no easy way around rectangular text wrapping using CSS.
If you have a bit of patience, you can create a faux-curved text wrap around what appears to be a single image. The trick is to slice the image into horizontal strips and then float them to the left, next to the text.
The exact height into which you cut the strips will depend on the size of the font you use for your text. A good rule of thumb is to add about 10 pixels to the font size for the height of each strip. The width of each strip depends on the contours of the image.
In Photoshop, I sliced the image into 20px tall strips, outputting each as an individual file.
)
Each slice is placed into the Web page.
)
After floating the images to the left, the text looks as if it is flowing around a curved edge.
)
EXAMPLE:
http://www.webbedenvironments.com/dhtml_css_advanced/code/05_Layout/CurvedTextWrapping/index.html