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

Is there a way to control the开发者_JAVA百科 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!

if instead of just replacing with "</p><br />" you insert "</p><p class = 'space'><br/></p>"

and then set the leading and line height for the space class in your css, say

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

you can adjust the space as required

The way I've done it -- which is a bit of a hack, but works great -- is to dynamically add a <br /> tag just after the closing of each paragraph. A little regex does the trick:

// 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 won't give you pixel-level control over the spacing, but it basically inserts one full break, which works well enough in most cases.

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>';