Question

Is there a way to control the vertical space between two HTML paragraphs, in an AS3 TextField?

I understand and have successfully applied CSS styles via AS3 and have also utilized the TextFormat class.

I am still unable to control the vertical space between a closing and an opening <p> tag:

txt.htmlText = "<p>First paragraph here.</p><p>Second paragraph here.</p>";

The example above renders with the correct font and letter-spacing, but the space between paragraphs is either two-times too tall if txt.condenseWhite = false or it is too condensed if txt.condenseWhite = true.

Since only margin-left and margin-right are available CSS attributes in AS3, and not margin-top or margin-bottom, I am at a loss.

Thanks!

Answer 1

I was able to get it to work by creating a new TextField instance for each HTML paragraph.

Here is an abbreviated example:

//Set the default spacing (leading) between paragraphs
const PARAGRAPH_LEADING:int = 10;

//Create first TextField instance
var t:TextField = new TextField();
addChild(t);
t.x = 0;
t.y = 0;
t.multiline = true;
t.wordWrap = true;
t.width = 300;
t.autoSize = TextFieldAutoSize.LEFT;
t.border = true; //Just for the example
t.condenseWhite = true;
t.htmlText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a odio sed odio dignissim tincidunt vel in nisi. Aenean eu sem mauris, ac scelerisque eros. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque rutrum porttitor eros sed vulputate. Sed mollis eros quis augue hendrerit lobortis. Quisque velit neque, placerat id tincidunt id, venenatis id felis. Ut in dolor eros.";

//Create second TextField instance
var t2:TextField = new TextField();
addChild(t2);
t2.x = 0;
t2.y = t.y + t.height + PARAGRAPH_LEADING; 
t2.multiline = true;
t2.wordWrap = true;
t2.width = 300;
t2.autoSize = TextFieldAutoSize.LEFT;
t2.border = true; //Just for the example
t.condenseWhite = true;
t2.htmlText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a odio sed odio dignissim tincidunt vel in nisi. Aenean eu sem mauris, ac scelerisque eros. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque rutrum porttitor eros sed vulputate. Sed mollis eros quis augue hendrerit lobortis. Quisque velit neque, placerat id tincidunt id, venenatis id felis. Ut in dolor eros.";

I also added a TextFormat instance that controls letterspacing (TextFormat.letterSpacing).

And, to control the overall leading, I had to implement the solution listed here, where a <textformat> tag is appended to the string which will be displayed as htmlText in the TextField.

Example:

var str: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a odio sed odio dignissim tincidunt vel in nisi.";
str = '<textformat leading="2">' + str + '</textformat>';