How to vertical align the content of a line in a TextFlow?

[NodeIpsum]

I'm trying to vertical align a line of text and image, so that the text is not align at the bottom but at the middle. I've tried p.vertialAlign and the p.lineHeight but it doesnt work. An example of the code I'm using is below.

<?xml version="1.0" encoding="utf-8"?>

<!-- Simple example to demonstrate the Halo TextArea control. -->

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

        xmlns:s="library://ns.adobe.com/flex/spark"

        xmlns:mx="library://ns.adobe.com/flex/mx"

        creationComplete="init()">

    <fx:Script>

        <![CDATA[

            import flashx.textLayout.elements.TextFlow;

            import flashx.textLayout.elements.InlineGraphicElement;

            import flashx.textLayout.elements.ParagraphElement;

            import flashx.textLayout.elements.SpanElement;

            [Bindable]

            private var textFlow : TextFlow = new TextFlow();

            function init():void {

                var p:ParagraphElement = new ParagraphElement();

                var span:SpanElement = new SpanElement();

                span.text = "Hello ";

                var img:InlineGraphicElement = new InlineGraphicElement();

                img.source = drwCircle();

                var span2:SpanElement = new SpanElement();

                span2.text = " World";

                p.addChild(span);

                p.addChild(img);

                p.addChild(span2);

                textFlow.addChild(p);

            }

            private function drwCircle():Sprite

            {

                var yellowCircle:Sprite = new Sprite();

                yellowCircle.graphics.beginFill(0xFFFF33);

                yellowCircle.graphics.drawCircle(15,15,15);

                yellowCircle.graphics.endFill();

                return yellowCircle;

            }

        ]]>

    </fx:Script>

    <s:RichEditableText id="textArea" editable="false" width="200" height="300"

                    horizontalCenter="0" verticalCenter="0" mouseChildren="true"

                    paragraphStartIndent="5" paragraphEndIndent="5"

                     multiline="true" textFlow="{textFlow}" />

</s:Application>

[sinious]

Did you try setting the TextFlow.verticalAlign = VerticalAlign.MIDDLE? I see you mentioned p:verticalAlign but I don't see that in your code despite. It may be in the realm of a bug because that would be the expected behavior to me as well. That's what a CSS rule would do.

edit:

Nope you're right, it doesn't affect it at all. Not ideal, but adjusting the registration of the image to compensate is a possible option, however the next line of text doesn't seem to care in that component. You can see that adding a bunch more text so it wraps and changing your example circle function:

span2.text = " World. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec scelerisque ipsum. Fusce suscipit ut magna non commodo. Nunc ultrices a dui tincidunt euismod.";

// ...

yellowCircle.graphics.drawCircle(20,30,20);

The text just marches right over the image.

[NodeIpsum]

The end game is to applied this in a chat, so the images will be images of smileys. The logical solution would be the img.verticalAlign = VerticalAlign.MIDDLE; that in css would achieve the goal, but here is just ignored. I've messed around and the "best" way to achieve my goal is probably using the baselineShift on span and span2, even though since the position of the smiley in the sentence is not static and the number of words is variable it's not an ideal solution.

function init():void {

                var apara:ParagraphElement = new ParagraphElement();

                var aspan:SpanElement = new SpanElement();

                aspan.text = "World. Lorem ipsum dolor sit amet, consectetur adipiscing elit.";

                apara.addChild(aspan);

                textFlow.addChild(apara);

                var p:ParagraphElement = new ParagraphElement();

                var span:SpanElement = new SpanElement();

                span.text = "Hello ";

               span.baselineShift = 8;

                var img:InlineGraphicElement = new InlineGraphicElement();

                img.source = drwCircle();

                img.verticalAlign = VerticalAlign.MIDDLE;

                var span2:SpanElement = new SpanElement();

                span2.text = " World";

                span2.baselineShift = 8;

                p.addChild(span);

                p.addChild(img);

                p.addChild(span2);

                textFlow.addChild(p);

                var aparas:ParagraphElement = new ParagraphElement();

                var aspans:SpanElement = new SpanElement();

                aspans.text = "World. Lorem ipsum dolor sit amet, consectetur adipiscing elit.";

                aparas.addChild(aspans);

                textFlow.addChild(aparas);

            }

[sinious]

At least you're in a position to control the icons used. It'd be a huge hassle if users would inject their own in the chat but being you control them you can make an infinite amount of adjustments to compensate for anything you want to include. IMHO chat apps that let you use huge images with small text don't look as clean as smileys that follow the text height. Just my $0.02.

Good luck!