How do I Make my Text Run Around an Image?

In print-based page layout programs this is called 'text runaround', where text runs around the borders of a graphic item. In Web page design this can also be done, but it must be handled in a certain way in order to work properly. The text must be ordinary HTML text in a regular HTML box, or you'll end up with large bitmap images of the text and graphic instead.

In a Freeway layout if you simply place a graphic box inside an HTML box full of text you get the simplest possible form of text runaround. The text sits above and below the graphic but doesn't wrap to the left or the right, the graphic just pushes the text down and out of its way.

In order to get a more sophisticated text runaround behaviour in Web pages, you have to make the graphic sit 'in-line' with the text. To do this, draw a graphic item on your page, import a graphic and then scale and crop the graphic to your liking. With the graphic selected, go to Edit>Cut to cut the item. Now double-click inside your HTML text item (so the flashing text cursor appears inside), move the cursor to the start of the paragraph where you want the graphic to be wrapped around then go to Edit>Paste.

Now your graphic item will appear in-line with the HTML text. It is still a graphic item so it will be produced, according to your settings as a GIF, JPG or PNG, and the text is still regular formatted HTML.

The result so far won't be exactly what you're after, the item will be sitting as if it was an oversized character in the line of text, so select the graphic item and have a look at the options in the Align popup menu in the Inspector.

The current option will be 'Baseline', instead choose Left or Right. The graphic item will now sit in the text box as you would expect, with the text flowing neatly around the sides of the item.

Once you have this working as you want it, try altering the Margin settings in the Inspector palette to get a bit of spacing between the graphic and the text.