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…

TLF 1.1 and 2.0 TextLayoutEditor Demo Source

Quick updates on links to the TextLayoutEditor demo source.

TLF 1.1 was included in Flex 4.1.  The complete source for the TextLayoutEditor is posted here:

TLF 2.0 is in development and will be part of Flex 4.5.  The TLF sourceforge site is being updated with changes on a regular basis.

Not quite as frequently a single zip containing all TLF sources and the TextLayoutEditor demo source is posted here:

During development we are trying to minimize changes to the API – that said there are changes in 1.1 and 2.0 and updates to the TextLayoutEditor demo are made as needed.  Check the ReleaseNotes.txt file for more information on specific changes.

TLF At Max 2010

Two members of the TLF team will be at the MAX2010 conference in Los Angeles. We’re not part of any formal sessions but we’re available to meet with TLF clients. We can help with code, discuss futures, listen and help with all issues – anything you want. If you’re in the LA area but not attending MAX we can meet outside the conference as well. Reply to this blog post or send an email to me rdermer (at) if you’d like to schedule a time. Otherwise we’ll be there – it should say TLF on my badge – I filled it in as my job title.


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

TLF 2.0 Lists Markup

TLF 2.0 includes support for lists. Attached are two PDFs. The first describes the new markup and the second gives some examples:

Lists Markup

Lists Examples

The numbering algorithms for the various listStyleType values are defined here:
CSS3 List Style Types

Flex 4 Updates For TLF 2.0

TLF 2.0 is not a drop-in replacement into Flex 4. To even get it running changes are needed to Flex 4.0.T wo files need to be replaced in Flex 4 and spark.swc needs to be rebuilt.  The files, and, are available for download here.

These changes were tested with Flex 4.0 SDK build 14159. I believe the same changes will work with Flex 4.1. To rebuild Flex with these changes:
1) From download the “Open Source Flex SDK” you wish to modify.
2) replace the two files with the above modified versions.
3) run “ant -q main” in the frameworks directory
4) replace spark.swc with the one you just built.

There are other known issues. The biggest one is that TLF changed selection to permit inclusion of the final paragraph terminator in the selection from the selectAll API. This gives more consistent highlighting but caused some problems for Flex code. Fixes for this issue are not available for 4.0/4.1.

UPDATE For Flex 4.1

The changes for Flex 4.1 are to the same two files but the source files have changed in the Flex SDK.  I posted 4.1 versions here:

I’ve also seen the problem with building datavisualization.  I solved by copying manifest_datavisualization.xml to manifest.xml in the frameworks/projects/datavisualization directory.

TLF Now on SourceForge

Since we finished the 1.1 release, we’ve been working on more performance improvements, fixing bugs and adding list and float features. What we’re working on now will eventually become our 2.0 release. The official release will take a while as Adobe products integrate, test and ask for more changes. We don’t want to wait that long, so we’ve created an open source repository on SourceForge to show our in-progress work.

We’re still working on the documentation pages and keeping the repository current with our daily changes, but this week’s code is now available. It’s in a preview state (lists aren’t completely done, and there are some bug regressions in links) but we hope people can take a look at the new features and performance gains and give us early feedback on how we can further improve the code. We’re also hoping that being on SourceForge will make it easier for people outside Adobe to submit patches (for those so inclined).

TLF Update March 2010

FlashBuilder 4.0 is Released

FlashBuilder 4.0 includes Flex 4.0. TLF 1.0 – the official 1.0 release – is included as textLayout.swc. FlashBuilder is available here.

And of course TLF 1.0 and Flex 4.0 are opensource. The Flex 4 release with Flex 4 and TLF 1.0 source is available here: Flex4 Download

Flex 4.1 Nightly Builds Includes TLF 1.1

Flex 4.1 is not yet released but its opensource tree and nightly builds include TLF 1.1

TLF 1.1 has significant performance improvements for long documents. Scrolling and editing of long documents are both dramatically improved. Try it out! We’re looking for feedback and help in finding issues. You can pull textLayout.swc out of the Flex 4.1 nightly builds.

TLF Showcase: LovelyReader has a web and desktop epub reader based on the new text features in Flash Player 10. Text resizes and reflows in layouts you choose. You can navigate with hotkeys or a table of contents. All the text is searchable, and you can add notes. There’s a longer feature list and a demo here: