Skip to main content
J
josh_on
Inspiring
May 4, 2011
Answered

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

  • May 4, 2011
  • 2 replies
  • 2446 views

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 has been closed for replies.
Correct answer Gang Cai

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();

2 replies

J
Adobe Employee
Jin-Huang
Adobe Employee
May 4, 2011

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.

J
josh_onAuthor
Inspiring
May 4, 2011

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>

*/

}

}

}

G
Gang Cai
Participating Frequently
May 5, 2011

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.

J
josh_onAuthor
Inspiring
May 4, 2011

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

J
josh_onAuthor
Inspiring
May 4, 2011

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

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