iWeb wrapping text around graphics

Question

How do I make text flow around a graphic I've inserted in an iWeb web page? I can't seem to get the Inspector > Text > Wrap > Objects Causes Text Wrap to work.

Requirements

iWeb version 1 (v1.0.1 or newer recommended) and Mac OS^? X Tiger (version 10.4.5 or newer recommended)

Background

Behind all the slight of hand that iWeb presents to us are CSS^? rules (hint: use the ? link to learn what CSS means) and related web standards. These standards have specific rules which describe how objects are defined and behave on a web page; iWeb is essentially a WYSIWYG^? editor that we use to generate the necessary code to create the web page.

In the specific instance being described here, where we want text to flow around a graphic, iWeb supports two of the many CSS rules for graphics. Without getting into a detailed discussion of the numerous CSS rules available or now they work, it's important to understand a graphic is inserted into an iWeb page in one of two states:

• Fixed: The graphic is in effect a floating box. In principle the graphic is treated as a floating layer which may appear above or below other layers, or in a specific X,Y location on screen. In this context, the graphic would be in a fixed location which is above or below a text block; the text does not flow around the graphic.
• Inline: An inline graphic appears much as it's names implies, inline with other elements. Because the object is inline, it can physically affect the placement of other objects in that line. In the context of iWeb, and wanting text to flow around a graphic, this becomes a critical distinction.

What To Do

By Default all graphics inserted into an iWeb page are considered Fixed which is why the Inspector > Text > Wrap > Objects Causes Text Wrap feature is dimmed and may not appear to be working. We'll describe how to insert a graphic both as Fixed and Inline below so you can compare the differences.

To insert a graphic as Fixed, do this:

Option A: Drag and Drop

1. Drag a graphic from the Finder or from the Media Browser into your web page
2. Perform any desired task such as resizing, masking, change it's stacking order front to back, or drag to reposition the graphic.
3. Observe: Text elements on the page are not affected

Option B: use the Insert menu item

1. Choose Insert menu > Choose...
2. Select the desired graphic from the dialog and press Insert
3. Perform any desired task such as resizing, masking, change it's stacking order front to back, or drag to reposition the graphic.
4. Observe: Text elements on the page are not affected

In either case described above, the results are the same. The graphic is inserted in a Fixed state and text cannot reflow around the graphic; the Wrap text options are dimmed in the Inspector window.

Click Here to see a Fixed Graphic Demonstration Movie (3MB Download) of the above steps in action. (need movie help?)

To insert a graphic as Inline, do this:

Option A: Drag and Drop

1. Press Command as you drag a graphic from the Finder or from the Media Browser into your web page
2. Observe: You receive visual feedback that the graphic is being inserted into a specific spot in the text block
3. Release the mouse to insert the graphic, then release the Command key
4. Perform any desired task such as resizing or masking.
5. Observe: Text elements in the text block into which the grahpic was inserted are directly affected and reflowed around the graphic depending on it's size and location.

Option B: use the Insert menu item

1. Click inside a text block to create an insertion point, just as if you were going to type some text
2. Choose Insert menu > Choose...
3. Select the desired graphic from the dialog and press Insert
4. Perform any desired task such as resizing or masking.
5. Observe: Text elements in the text block into which the grahpic was inserted are directly affected and reflowed around the graphic depending on it's size and location.

In either case described above, the results are the same. The graphic is inserted in a Inline state and text can be reflow around the graphic; the Wrap text options are active in the Inspector window.

Click Here to see a Inline Graphic Demonstration Movie (5MB Download) of the above steps in action. (need movie help?)

Summary

If you need the text to reflow around a graphic, insert it as Inline using either method described above. Once a graphic is inserted as Fixed it's state cannot be changed; it must be deleted and inserted into the page again as Inline. Grapic editing features such as rotation, opacity, reflect and size are still available for graphics inserted as Fixed or Inline. The object stacking order such as send to front, send to back, as described in the Arrange, may only be modified if the graphic is inserted in a Fixed state.

We hope that helps
caddpower.com

------
If you found this article or the website in general to be helpful, educational or a time and money saver you can show your support. Thank you ~ Brian (huc) Huculak