Skip to main content
S
stefan_van_dinther
Inspiring
August 16, 2011
Answered

Add containerbreak within a story?

  • August 16, 2011
  • 1 reply
  • 1372 views

Hello!

Since the ContainerBreakBefore en ContainerBreakAfter are now new features in TLF 3.0 branch, my question is this: is it now also possible to add a containerbreak within a text/story? What I mean is like in InDesign, where you can insert a special character into the text (Insert Break Character and then a Frame Break or a Page Break)...

gr, Stefan

This topic has been closed for replies.
Correct answer Gang Cai

When I add an EditManager to the example i see a problem for what my customer wants...

package

{

import flash.display.Sprite;

import flashx.textLayout.formats.TextLayoutFormat;

import flashx.textLayout.container.ContainerController;

import flashx.textLayout.elements.ParagraphElement;

import flashx.textLayout.elements.SpanElement;

import flashx.textLayout.elements.TextFlow;

import flashx.textLayout.container.ScrollPolicy;

import flashx.textLayout.edit.EditManager;

public class Test extends Sprite

{

public function Test()

{

var cs1:Sprite = new Sprite();

addChild(cs1);

var cs2:Sprite = new Sprite();

addChild(cs2);

cs2.x = 100;

cs2.y = 100;

var tekstLayoutFormat:TextLayoutFormat = new TextLayoutFormat()

var textFlow:TextFlow = new TextFlow();

textFlow.format = tekstLayoutFormat;

var em:EditManager;

em = new EditManager();

textFlow.interactionManager = em;

var cc1:ContainerController = new ContainerController(cs1, 80, 80);

cc1.verticalScrollPolicy = ScrollPolicy.OFF;

cc1.horizontalScrollPolicy = ScrollPolicy.OFF;

var cc2:ContainerController = new ContainerController(cs2, 80, 80);

cc2.verticalScrollPolicy = ScrollPolicy.OFF;

cc2.horizontalScrollPolicy = ScrollPolicy.OFF;

textFlow.flowComposer.addController(cc1);

textFlow.flowComposer.addController(cc2);

var paragraphElement:ParagraphElement = new ParagraphElement();

paragraphElement.columnBreakAfter = "always";

var spanElement:SpanElement = new SpanElement();

spanElement.text = "Chapter 1.\nBla bla.";

spanElement.fontSize = 10;

paragraphElement.addChild(spanElement);

var paragraphElement2:ParagraphElement = new ParagraphElement();

var spanElement2:SpanElement = new SpanElement();

spanElement2.text = "Chapter 2.\nBla bla.";

spanElement2.fontSize = 10;

paragraphElement2.addChild(spanElement2);

textFlow.addChild(paragraphElement);

textFlow.addChild(paragraphElement2);

textFlow.flowComposer.updateAllControllers();

}

}

}

Now if you want to edit chapter 1; for instance you type a sentence before the "Bla bla." and press enter, all content after the enter seems to be pushed into a new ParagraphElement (with paragraphElement.columnBreakAfter = "always") and jumps to the next container... and chapter 2 also gets pushed to a new container (which isn't around) so we don't see Chapter 2 anymore...


> Will the specific character solution ever be implemented, or not?

At the very beginning when we implement the breaks feature, we do consider the specific character as a potential solution. But we found it will bring a lot of logic conflicts with the W3C's attribute definition. As TLF need to support the import/export from/to html, we decide to use the attribute solution. Personally, I don't think there will be a specific character version breaks in the recent future.

About the issue you mentioned about your customer, Seems it can be solved by using the containerBreakBefore/columnBreakBefore attribute for the paragraph next to your paragraph which got content. Am I right?

1 reply

G
Gang Cai
Participating Frequently
August 16, 2011

Hi stefan:

To implement the container/column breaks, we bought in some kind of W3C definition about the column break and expand them to be the container break. You can refer to the following W3C document for more details:http://www.w3.org/TR/css3-multicol/#column-breaks. That's why we implement the container/column breaks with the attributes solution rather than the specific character solution. And that's why we provide the current attributes (columnBreakBefore, columnBreakAfter, containerBreakBefore, containerBreakAfter) to support the breaks. As what the W3C document said, you can only set the attribute on the block level elements like ParagraphElement.

Each of the attributes may be set the value of:

auto
always
inherit

auto means:
Neither force nor forbid a container/column break before (after, inside) the generated box.

always means:
Always force a container/column break before (after) the generated box.

inherit means:

Inherit the setting from the parent elements

Hope these information is helpful.

S
stefan_van_dintherAuthor
Inspiring
August 16, 2011

Hello Gang Cai,

Thanks for the quick reply!

Will the specific character solution ever be implemented, or not? Because I need to specify a container break on a character level, instead of a block level...

gr, stefan

S
stefan_van_dintherAuthor
Inspiring
August 16, 2011

I've made this small test, in which the containerbreak works:

package

{

import flash.display.Sprite;

import flashx.textLayout.formats.TextLayoutFormat;

import flashx.textLayout.container.ContainerController;

import flashx.textLayout.elements.ParagraphElement;

import flashx.textLayout.elements.SpanElement;

import flashx.textLayout.elements.TextFlow;

import flashx.textLayout.container.ScrollPolicy;

public class Test extends Sprite

{

public function Test()

{

var cs1:Sprite = new Sprite();

addChild(cs1);

var cs2:Sprite = new Sprite();

addChild(cs2);

cs2.x = 100;

cs2.y = 100;

var tekstLayoutFormat:TextLayoutFormat = new TextLayoutFormat()

var textFlow:TextFlow = new TextFlow();

textFlow.format = tekstLayoutFormat;

var cc1:ContainerController = new ContainerController(cs1, 80, 80);

cc1.verticalScrollPolicy = ScrollPolicy.OFF;

cc1.horizontalScrollPolicy = ScrollPolicy.OFF;

var cc2:ContainerController = new ContainerController(cs2, 80, 80);

cc2.verticalScrollPolicy = ScrollPolicy.OFF;

cc2.horizontalScrollPolicy = ScrollPolicy.OFF;

textFlow.flowComposer.addController(cc1);

textFlow.flowComposer.addController(cc2);

var paragraphElement:ParagraphElement = new ParagraphElement();

paragraphElement.columnBreakAfter = "always";

var spanElement:SpanElement = new SpanElement();

spanElement.text = "Chapter 1.\nBla bla.";

spanElement.fontSize = 10;

paragraphElement.addChild(spanElement);

var paragraphElement2:ParagraphElement = new ParagraphElement();

var spanElement2:SpanElement = new SpanElement();

spanElement2.text = "Chapter 1.\nBla bla.";

spanElement2.fontSize = 10;

paragraphElement2.addChild(spanElement2);

textFlow.addChild(paragraphElement);

textFlow.addChild(paragraphElement2);

textFlow.flowComposer.updateAllControllers();

}

}

}

(by the way I get this debug message:

Move parcel to  -1

Advance to Next Parcel:  0

Move parcel to  0

Advance to Next Parcel:  1

Move parcel to  1

Advance to Next Parcel:  2

Move parcel to  2)

The columnBreakAfter does not seem to work on a spanElement level, is that correct?

So am I right to think that the only solution to my problem is this:

my input for the textflow: "Chapter 1.\nBla bla.framebreakChapter 2.\nBla bla.;

where "framebreak" should be the special character for the containerbreak

to parse the string and divide the text into two different ParagraphElements where the first ParagraphElement has a paragraphElement.columnBreakAfter = "always"; ?

gr, stefan

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