Author Archive: Robin Briggs

TLF Samples Now On SourceForge

Our SourceForge site now has code and projects for TLF example applications. These were previously only posted here on the TLF blog, now there will be a samples set for every build. The “sdk” folder contains most of these examples, and they are available as a download.

The sdk folder is divided into two main sections, one for applications that only rely on TLF and the Flash Player, and one for applications that use the Flex Framework for their user interface, but otherwise call into TLF directly. The first group are in the “actionscript” folder, and the second group are in the “flex” folder.

The actionscript folder has these applications:
FTE applications FTEHelloWorld and FTEParagraph. These are very simple applications that create and display simple text content using only the Flash Player (no use of TLF).
Pagination. This application uses TLF to display a book-length text that is divided into chapters, and allows the user to page through the text, advance or backup by chapters, and resize the window.
TextLayout. This is a set of applications that use TLF, each illustrating different aspects of the framework:

  • ContextMenuText shows how to make custom context menus.
  • CustomImportMarkup shows simple import and customization using the Configuration class.
  • CustomLinkEventHandler shows how to customize clicks on links.
  • EditText shows setting up an editable text component.
  • EventMirrorExample shows setting up event handlers on group elements.
  • ExplicitFormField shows how to set up form-field style text that doesn’t wrap lines.
  • HelloWorld shows setting up a read-only text component based on static text.
  • ImportMarkup shows setting up a read-only text component based on markup.
  • InlineGraphic creates a graphic that appears inline with the text, and shows how to handle the asynchronous load process and automatic sizing.
  • LinkedContainers shows how to flow text from one container to another, for when you want a single text stream to appear in a sequence of rectangular areas.
  • LinkEventExample shows how to set up a link to send custom events.
  • MultipleColumns has a text with a headline and body text that appears in multiple columns.
  • ParagraphBorder shows how to draw an ornament around a paragraph, which requires figuring out the area on the stage that is occupied by the paragraph.
  • ParagraphBounds shows how to figure out how much vertical space is required to display a paragraph.
  • SelectText shows how to make a very simple read-only selectable text component.
  • StaticHelloWorld shows how to use the StringTextLineFactory to display some static text in a string. This is more efficient than the HelloWorld example.
  • StaticTextFlow shows how to use the TextFlowTextLineFactory to display a static TextFlow object.

The flex folder has applications that use Flex for the user interface, but call into TLF directly:

  • SimpleEditor is an editable text component with simple buttons for setting the font family, font size, text alignment,indent, line spacing, and similar attributes.
  • SimpleEditorWithCSS is similar to SimpleEditor, but it also allows setting of the styleName and id, and mapping of these with a CSS stylesheet.
  • TextLayoutEditor is a text editor that allows editing of text and almost all attributes you can set in TLF. It uses swcs that are in the other two folders, textLayout_editBar and textLayout_ui.

Building the Sample Code
The code is available as a download, but you can also build it yourself if you prefer. Each folder has a build file in it that you can run from Ant.

So try out these samples, and let us know what you think! If there are additional samples you’d like to see, please let us know what they are.

Spell Checking TLF with Squiggly

There’s a new prerelease version of the Squiggly spell checking library available on Adobe Labs. This new version of Squiggly (0.5) has support for spell checking in TLF applications. Check it out!

Decoration Example

There are a lot of cases where you might want to add additional DisplayObjects to the line when it is displayed. Sometimes these are called decorations or ornaments. We got this example from one of our users, Will Lin of Silicon Publishing. Will wanted to have a bulleted list, but he needed his list to work with TLF 1.1, which doesn’t have list support. So he added a decoration to the lines that adds the bullet at the start of the paragraph. Here’s how it works.

TLF’s ContainerController class takes the TextLines generated from composition and adds them to the container. To do this, it has a function, addTextLine, that is called on each TextLine as it is added. Will made a new class, BulletsContainerController, that inherits from ContainerController and overrides the addTextLine method. For each line that is added, he checks to see if the line is at the beginning of the paragraph. If it is, he generates a new DisplayObject for the bullet and makes it a child of the TextLine.

In the main body of his application, when he creates the TextFlow, instead of adding a controller that is a ContainerController instance he adds a BulletContainerController instead.

That’s pretty much all there is to it. Thanks to Will and to Silicon Publishing for making this example public!


TLF 1.0 Markup Specification


We now have a standalone specification of the Text Layout Framework markup for TLF 1.0 and TLF 1.1. This should be helpful to anyone who is trying to figure out what the XML format is for serializing and deserializing TLF text content.

Word spacing

Word spacing is a new feature that allows you to better control the how much space is left between words. In unjustified text, the space between words is set by the size of the space character in the font. Different fonts may look better with more or less space, and so the font designer specifies a preferred width for the space the font is created. But you can choose to have your text set looser or tighter by adjusting the space between the words as a percentage of what is defined in the font.

In justified text, the text is aligned on both edges to the margin, and the width of the spaces is adjusted to make this happen. Spaces may be compressed or expanded so that the text may best fit the column. Now you can control the minimum and maximum size of the spaces in justified text, as a percentage of the size of the space in the font.

The new property is called wordSpacing. It goes on paragraphs (or it can be inherited from the TextFlow, div or list that the paragraph is in) and it is an array of three percentages. The first is the desired or optimal space width. The second is the minimum space width, and the last is the maximum space width. Continue reading…

Box Leading Model

The leadingModel property controls the placement of lines, and we’ve added a new possible value for it — “box”. The box leading model approximates how lines are laid out in the browser. TLF’s default leading model is a baseline-to-baseline model that allows designers to exactly specify the distance from one baseline to the next, but it doesn’t allow “corrections” for situations the designer may not have envisioned or planned for, such as extra space required for superscripts, subscripts, or inline graphics. With the box leading model, TLF calculates the “natural” bounding box of the line, based on the size and vertical locations of the items in the line. Then it places the line using the maximum of the line height and natural height, so you can add space between the lines by adjusting the line height, but the space will never be smaller than the natural height.

You should consider using the new box leading model if you more concerned about lines overlapping than you are about uneven spacing. In particular, I would suggest using it if you are having problems with inline graphics, baselineShifts, or other content that may cause lines to overlap. Continue using the existing leading models if it is more important to have all lines spaced evenly. Continue reading…

Custom Clipboard Formats

Ever wished you could copy and paste using more clipboard formats? We do too. We haven’t had the time to add new converters for this release, but we did the next best thing. We added the ability for an application to add its own text converters, which can then be used to either paste data that was posted to the clipboard, or copy data from TLF to the clipboard. This allows you to add new formats — for instance, RTF or HTML — and have them work in copy/paste with other applications. Continue reading…


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″>