How to set vertical space (leading) between two paragraphs of HTML in AS3 TextField?

Question

Is there a way to manage the vertical space between two paragraphs of HTML in AS3 TextField?

I understand and successfully apply CSS styles through AS3 and also used the TextFormat class.

I still cannot control the vertical space between the closing and opening tags <p>:

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

The above example displays the correct font and letter spacing, but the space between paragraphs is either too high if txt.condenseWhite = false, or too compressed if txt.condenseWhite = true.

Since only margin-leftand margin-rightavailable CSS attributes in the AS3, and not margin-top, or margin-bottomI lose.

Thank!

Answer 1

I managed to get it working by creating a new instance TextFieldfor each paragraph of HTML.

Here is a shortened 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 an instance of TextFormat that controls the width of the letters ( TextFormat.letterSpacing).

And, in order to control the general guidance, I had to implement the solution indicated in here , where the tag is <textformat>added to the line, which will be displayed as htmlTextin 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>';

Answer 2

If instead of replacing "</p><br />"you insert"</p><p class = 'space'><br/></p>"

and then set the start and row heights for the space class in your css, say

.space {font-size:1px;
    leading:5px;
    }

you can adjust the space as needed

Answer 3

, - , - <br /> . :

// raw string
var myText:String = "<p>This is the first paragraph.</p><p>This is the second paragraph.</p>";

var myTextField:TextField = new TextField();
myTextField.multiline = true;
myTextField.wordWrap = true;
addChild(myTextField);

myTextField.htmlText = fixClosingP(myText);

// adds "<br />" after every occurrence of "</p>"
function fixClosingP(input:String):String {
    var r:RegExp = /<\/p>/gi;
    return input.replace(r, "</p><br />");
}

It will not give you control over the spacing at the pixel level, but basically inserts one full break, which in most cases works quite well.