Skip to main content
josh_on
Inspiring
May 4, 2011 12:53 AM UTC
Answered

Adding a linkElement or an inlineGraphicElement to a paragraphElement also adds a spanElement

Adding a linkElement or an inlineGraphicElement to a paragraphElement also adds a spanElement.

In my case it is unfortunate - because I am adding an inline graphic with the width of the composition - the extra span elelment causes an extra line in the composition.  If I use p.removeChild(spanElement) - it is automatically replaced again.

Is there a solution to this - such that I can have a full width inline graphic with no space below it?

This topic is closed to new replies. Start a new post to keep the conversation going.
Gang CaiCorrect answer
Participating Frequently
May 6, 2011 5:15 PM UTC

The terminator with width is necessary for TLF otherwise we can not tell which paragraph the cursor is in when runtime. I think that's a common method for most editor.

The terminator in TLF is appended this way:

1) If the last leafElement is SpanElement then we append the terminator at the end of SpanElement

2) If the last leafElement is not SpanElement we append a SpanElement and add the terminator there.

So, in your linkElement, if the last leafElement is not a Span, a new span with terminator is appended.

We've discussed your specific case with our experts. Let's see if there will be a better solution. Thanks


The following may be a better work around. Hopefully it will be helpful:

// set up textflow

var w:int = 300;

var h:int = 200;

var tf:TextFlow = new TextFlow();

tf.interactionManager = new EditManager();

var container:Sprite = new Sprite();

var controller:ContainerController = new ContainerController(container, w, h);

addChild(container);

tf.flowComposer.addController(controller);

// add an image - using a sprite as the source

var s:Sprite = new Sprite();

s.graphics.beginFill(0xFF0000);

s.graphics.drawRect(0,0,w,20); // make it the full width

var d:DivElement = new DivElement();

var p:ParagraphElement = new ParagraphElement();

var ige:InlineGraphicElement = new InlineGraphicElement();

ige.source = s;

ige.float = Float.LEFT;

ige.lineHeight = 0; // only when float is NOT Float.NONE;

p.addChild(ige);

d.addChild(p);

tf.addChild(d);

// force terminator creation (it's not guaranteed to be there until normalize) and set the lineHeight to zero

tf.tlf_internal::normalize();

// use getLastLeaf to get the FlowLeafElement containing the Terminator - note this is always a SpanElement

var terminator:FlowLeafElement = p.getLastLeaf();

// if the length is great than one than the last leaf has actual text besides the terminator and you may not want the lineHeight to go to zero

if (terminator.textLength == 1)

terminator.lineHeight = 0;

tf.flowComposer.updateAllControllers();

// add some text below

var d2:DivElement = new DivElement();

var p2:ParagraphElement = new ParagraphElement();

var span:SpanElement = new SpanElement();

span.text = "some text aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";

//span.lineHeight = 0;

p2.addChild(span);

d2.addChild(p2);

tf.addChild(d2);

tf.flowComposer.updateAllControllers();

View reply

13 replies

Adobe Employee
Jin-Huang
Adobe Employee
May 4, 2011 5:44 AM UTC

It seems the same problem in http://forums.adobe.com/thread/844079?tstart=0

What's more, it will be better to paste your code scraps here, so that I can know what brings up the additional span, which is not common.

Translate
josh_onAuthor
Inspiring
May 4, 2011 5:43 PM UTC

Thanks, here is the code:

package

{

import flash.display.Sprite;

import flashx.textLayout.container.ContainerController;

import flashx.textLayout.conversion.ConversionType;

import flashx.textLayout.conversion.TextConverter;

import flashx.textLayout.elements.DivElement;

import flashx.textLayout.elements.InlineGraphicElement;

import flashx.textLayout.elements.ParagraphElement;

import flashx.textLayout.elements.SpanElement;

import flashx.textLayout.elements.TextFlow;

import flashx.textLayout.formats.Float;

public class tlf_span extends Sprite

{

public function tlf_span()

{

// set up textflow

var w:int = 300;

var h:int = 200;

var tf:TextFlow = new TextFlow();

var container:Sprite = new Sprite();

var controller:ContainerController = new ContainerController(container, w, h);

addChild(container);

tf.flowComposer.addController(controller);

// add an image - using a sprite as the source

var s:Sprite = new Sprite();

s.graphics.beginFill(0xFF0000);

s.graphics.drawRect(0,0,w,20); // make it the full width

var d:DivElement = new DivElement();

var p:ParagraphElement = new ParagraphElement();

var ige:InlineGraphicElement = new InlineGraphicElement();

ige.source = s;

ige.float = Float.LEFT;

p.addChild(ige);

d.addChild(p);

tf.addChild(d);

// add some text below

var d2:DivElement = new DivElement();

var p2:ParagraphElement = new ParagraphElement();

var span:SpanElement = new SpanElement();

span.text = "some text";

p2.addChild(span);

d2.addChild(p2);

tf.addChild(d2);

tf.flowComposer.updateAllControllers();

// Trace p's contents

var n:int = p.numChildren;

for(var i:int = 0; i < n; i++){

trace("p child " + i + ": " + p.getChildAt(i));  // shows a span element has been added

}

// delete the span element

trace("removed: " + p.removeChildAt(1));  // traces: removed: [object SpanElement]

tf.flowComposer.updateAllControllers(); // just in case

// Trace the contents of p again:

n = p.numChildren;

for(i = 0; i < n; i++){

trace("p child " + i + ": " + p.getChildAt(i));  // shows p child 1: [object SpanElement] is put back

}

// trace the entire flow:

var o:Object = TextConverter.export(tf, TextConverter.TEXT_LAYOUT_FORMAT, ConversionType.STRING_TYPE);

trace(String(o));

/*

Traces:

<TextFlow whiteSpaceCollapse="preserve" xmlns="http://ns.adobe.com/textLayout/2008"><div><p><img source="[object Sprite]" float="left"/><span></span></p></div><div><p><span>some text</span></p></div></TextFlow>

*/

}

}

}

Translate
Gang Cai
Participating Frequently
May 5, 2011 3:21 AM UTC

This works as design. Every paragraph needs a Terminator. If the last leaf element is not a Span, a new Span will be inserted to make sure there is a Terminator there. I suppose the terminator span for your linkElement will not be inserted if your linkElement contains contents.

In your specific  case, I think to reduce several pixels of the Image's width will be a good work around.

Translate
josh_onAuthor
Inspiring
May 4, 2011 1:01 AM UTC

Can I style the span such that it takes no vertical space?

Translate
josh_onAuthor
Inspiring
May 4, 2011 1:34 AM UTC

As a hack I size the image 1px short of the width.  The spanElement is not forced on to a new line.

Translate
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices