How would I stagger text around an uneven background image?

Question

Often as a Web Producer I get a lovely mock-up with text wrapping around an obvious background image. The content is going to come from a backend CMS and I don't want the editorial staff to worry about inserting <br /> tags etc.

Lorem ipsum dolor sit amet, consectetuer adiping elit,       xxxxxxxxxxxxxx
sed diam nonummy nibh euismod tincidunt ut lao           xxxxxxxxxxxxxxxxxx
dolore magna aliquam erat volutpat. Ut wisi       xxxxxxxxxxxxxxxxxxxxxxxxx
enim ad minim veniam, quis nostrud exerci       xxxxxxxxxxxxxxxxxxxxxxxxxxx
tation ullamcorper suscipit lobortis          xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
ut aliquip ex ea commodo consequat.       xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Duis autem vel eum iriure dolor in       xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
hendrerit in vulputate velit esse       xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
molestie consequat, vel illum         xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Does anyone know of a solution to make this kind of thing automated via script, css?

Answer 1

Ouch, difficult one. Assuming your image is transparent at the left side, the closest thing I can think of is a script that finds the transparent pixels, and -- to a certain level of detail -- generates a set of floating divs that overlay the image and keep the text out of the way.

Answer 2

A List Apart did an article on this a while back. It's not totally turn-key, but they show you how to do it in PHP without too much trouble.

Answer 3

Are you talking about an arbitrary background image, or a fixed one? If you want to do it with any old background then you're looking at doing some serious pixel scanning, which will almost certainly have to happen at the server side and will probably not be worth your time. You're better off just baking the text into the image.

If you only want to do it for a single image your options get better, but still aren't pretty. The first thing that comes to mind is using a a monospace font, measuring how many chars can fit at each line, and then having a js function insert breaks at the appropriate string positions based on that.

Answer 4

If you absolutely had to do this browser-side and you wanted it to be as close to 'pixel perfect' as possible (in terms of specifying things like an exact margin around the image's shape), you'll probably need to use the <canvas> feature of HTML 5. With it, you would then need to do some "basic" image processing:

this example is for an image that is to the right of the text, like your example

1. Run an edge-detection algorithm on the image (probably the Sobel algorithm, because of it's simplicity and speed) to find the borders. Alternatively, if you can guarantee that the image will have a solid background, you could opt to simply threshold the image against that background color to obtain a segmentation of the image's subject from the background.
2. Given your line-height, iterate through the rows of the image to find the max distance from the image's border to the start of the image's subject (the part we segmented) for each line of text that will border the image.
   
   1. Take that maximum value and subtract it from the total width of the image to obtain the amount of distance from the right side of the image.
   2. Push this width onto an array arr.
3. At the start of the DOM node that contains your text, add arr.length <div> nodes, each of which would have

   style="height: [your text's line-height]; 
          width: [value of arr at current element]; 
          margin-left: [desired margin]; 
          float: right; clear: right"

Edit

I wrote up a jQuery plugin for this technique, you can find it on plugins.jquery.com or at it's home page at http://jwf.us/projects/jQSlickWrap