Floats are used when you have an image, and you would like the text to wrap around it. TLF 2.0 will include support for Floats. This feature is currently under development, so the final form may change, but what follows is a description of how it works now. We are very interested in feedback on this feature, so please let us know how it works for you, and if you have any suggestions for improvements.

“float” is a property that can be applied to an InlineGraphicElement that controls the placement of the graphic and the text around it. A value of “none” will cause the InlineGraphicElement to appear as an inline and be treated as a large character in the text. This is the behavior of the InlineGraphicElement as it was in TLF 1.0. The float can also be assigned the values “left”, “right”, “start” or “end”. A value of “left” will cause the graphic to appear at the left edge of the container, and the text will wrap around it. A value of “right” causes it to appear at the right edge of the container. “start” and “end” will resolve to either left or right depending on the direction property of the paragraph; a value of “ltr” causes start to be left and end to be right, while a value of “rtl” for direction does the reverse. An InlineGraphicElement is considered to be a float if its float value is not “none.”

A float will appear at the same level as the line it is on if it can while maintaining the anchor in the line. If putting the float at the same level as the line (and thus wrapping the line around the float) would cause the anchor to get pushed out of the line, then the float appears below the line.

If the float width exceeds the column width it places the float anyway, and the float may either bleed over other content or be clipped. If the float height exceeds the column height, the float is pushed to the next column or container. Note that in this description, width and height should be understood as logical width and logical height so that it works the same when the text is vertical (when blockProgression is “rl”). Likewise “left” in vertical text will align the float with the logical left edge (the top), and “right” in vertical text will align the float with the bottom edge.

You can control how close the text and the image are by setting the padding properties of the InlineGraphicElement. Setting the padding values causes the InlineGraphicElement to be treated as slightly larger (or smaller if the padding is negative) than its width and height would indicate. Setting the paddingLeft of a left float will cause the float to be indented from the edge, and setting the paddingTop causes it to get pushed down.

“clear” is a new paragraph-level property that controls the placement of paragraph elements relative to floats. A clear value of “left” will cause the element to be placed after any float that appears to the left, and a clear value of “right” causes the element to appear after any right float. A “clear” value of “both” causes the element to appear after all floats, either on the left or right. A clear value of “none” allows the text to appear next to the float, and this is the default. Clear does not apply at the sub-paragraph or span level. Note that in order to affect the placement of the element, the element must start at a location where there is a float.

If a container has floats and has vertical justification turned on, the vertical justification will be ignored.

A float will always appear in the same container as its anchor point. If there is not room for the anchor point, the anchor point and the float will be pushed to the next container.

Horizontal alignment is not applied to floats – it applies only to text. However, a right float will align to the right edge of measured text.

When a range of multiple characters is selected, and it includes a float, the float is highlighted. When the selection is a simple insertion point (0 length range), then the cursor will be positioned at the anchor point. When cursoring over an anchor point, there is a “stutter” where the cursor appears not to move, but is in fact stepping over the zero-length anchor. This allows precise positioning of the insertion point relative to the anchor.

When we are importing text using the TextConverter.TEXT_FIELD_HTML_FORMAT, the “align” attribute of an element is used to determine the “float” value of the corresponding InlineGraphicElement. A value of “left” or “right” will be passed through to the float property on the InlineGraphicElement, and otherwise the float property will be left as undefined and get the default value “none”. Note that while this approximates the behavior of the htmlText property of TextField, it is slightly different because the TextField will always place the float below the line, either to the left or right, whereas the TLF will attempt to place the float at the same level as the line if possible.

Here’s a markup example of a floating image:

<img float=”left” height=”50″ width=”19″ source=”myImage.png”>

Here’s the same one with some padding applied:

<img float=”left” height=”50″ width=”19″ source=”myImage.png” paddingRight=”5″>