









Ah, the appeal of curves and other flowing shapes. They have their place in the heart of just about any visual designer, but when it comes to text flows on the Web, everything's been on the straight and boring, thanks to table cells, element boxes, and all that other stuff. Until now, anyway. Yes, the text is flowing along with the curve—not perfectly in step, I admit, but pretty close. And you thought Web design was all about straight lines and boxes.
Gently Floating...
All I did to make this happen was create a 100x200 image of a curve. Then I sliced it up into ten strata, each 20 pixels tall and only as wide as necessary to show the curve without any clipping.
Stack all ten strata together and we get the same curve I started with. But float those ten strata so that they stack up, and text can flow around them, and their decreasing width allows the text to roughly follow the curve. A right margin helps keep the text away from the curve; the greater the margin value, the further away text will be pushed from the curve.
Taking it Further
Of course, the original image could have been sliced up into five strata, or twenty, or even 200—assuming you wanted to force the user to download that many images. On the other hand, you could try a variant on single-pixel sizing where every row of pixels is the same stretched one-pixel image, exactly the right size to make up part of the curve, and every one floated. Although you save on downloads (only one image gets used) it's a pretty excessive approach from a markup standpoint, and don't blame me if you try it and your browser crashes, but it would work. You could even write a small Javascript to produce the required strata for you, thus keeping page weight down and letting the script automatically calculate the necessary width of each row.
Or you could try "Super Ragged Floats", as described in the next tip.