Posts in Category "Uncategorized"

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: http://blogs.adobe.com/tlf/files/2010/11/textLayoutBuild604.zip

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: http://sourceforge.net/projects/tlf.adobe/files/current/textLayout_build.zip/download

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) adobe.com 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

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

New And Updated TLF Samples

New and updated samples are posted: TLFSamples-734110.zip

These samples include the complete source to the TextLayout editor that was posted in on Adobe labs over one year ago. The editor and samples are all updated to the latest TLF version.

The samples include instructions for building them.