TextFlow.verticalAlign

Question

When Setting Vertical Align on a TextFlow to VerticalAlign.MIDDLE or VerticalAlign.BOTTOM, The First TextFlowLine Selection and Caret is vertically offset with respect to the distance of vertical space between the top of the Container boundary and the top of the First Line of Text.
What is the trick to make the Text Selection line up on the First TextFlowLine when verticalAlign is not set to 'top'?
below is a simple code example that demonstrates it. The first line of text "Hello World" is positioned properly, however when you click on
the TextLine to edit it, the Caret appears some 100 pixels below where its supposed to, and so does the text selection.
I am loading this module within an app that is compiled in SDK 3.2
/******************************      BEGIN CODE ******************************/
package {
    import flash.text.engine.BreakOpportunity;
    import flashx.textLayout.container.ContainerController;
    import flashx.textLayout.edit.EditManager;
    import flashx.textLayout.elements.Configuration;
    import flashx.textLayout.elements.ParagraphElement;
    import flashx.textLayout.elements.SpanElement;
    import flashx.textLayout.elements.TextFlow;
    import flashx.textLayout.formats.TextLayoutFormat;
    import flashx.textLayout.formats.VerticalAlign;
    import mx.core.UIComponent;
    public class TextFrameExample extends UIComponent
        var textFlow:TextFlow;
        public function TextFrameExample()
            var config:Configuration = new Configuration();
            var textLayoutFormat:TextLayoutFormat = new TextLayoutFormat();
            textLayoutFormat.color = 0xFF0000;
            textLayoutFormat.fontFamily = "_sans";
            textLayoutFormat.fontSize = 22;
            textLayoutFormat.breakOpportunity = BreakOpportunity.ANY;
            textLayoutFormat.verticalAlign = VerticalAlign.MIDDLE;
            config.textFlowInitialFormat = textLayoutFormat;
            textFlow = new TextFlow(config);
            var globalP:ParagraphElement = new ParagraphElement();
            var p:ParagraphElement = new ParagraphElement();
            var span:SpanElement = new SpanElement();
            span.text = "Hello, World!";
            p.verticalAlign = VerticalAlign.TOP;
            p.addChild(span);
            textFlow.addChild(p);           
            p = new ParagraphElement();
            span = new SpanElement();
              p.verticalAlign = VerticalAlign.TOP;
            span.text = "Next Line should be split into some columns after all this right? i mean come on";
            p.addChild(span);
            textFlow.addChild(p);
            p = new ParagraphElement();
            span = new SpanElement();
            span.verticalAlign = VerticalAlign.TOP;
            span.text = "Next Line should be split into some columns after all this right? i mean come on";          
            p.addChild(span);
            textFlow.addChild(p);
            textFlow.interactionManager = new EditManager();
            textFlow.flowComposer.addController(new ContainerController(this, 0, 0));
            textFlow.flowComposer.getControllerAt(0).setCompositionSize(500, 500);
            textFlow.flowComposer.updateAllControllers();
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            textFlow.flowComposer.getControllerAt(0).setCompositionSize(unscaledWidth, unscaledHeight);
            textFlow.flowComposer.updateAllControllers();
/******************************      BEGIN CODE ******************************/
Thanks for your time!
Bow

Answer 1

The verticalAlign property in TLF works only at the TextFlow or container level. So you can set the verticalAlign for an entire component, but not for individual paragraphs or spans. That's something it would be nice to add in the future, but not supported now. Sorry.
- robin