TextField and CSS: How to control spacing between paragraphs

[smohadjer]

I'm using an external CSS to format a textField that has some HTML text in it, let's say something similar to this:

myTextField.htmlText = "<p>paragraph one</p><p>paragraph two</p>";

How can I control the spacing between paragraphs when there is no support for margin-top or margin-bottom? I don't want to add empty <p> or <br /> elements to my text since they don't allow exact control and insert too much space. Is there any good solution?

Thanks

[Andrei1-bKoviI]

I hope someone will have a different answer but I am afraid that it is not possible with HTML text to control line spacing.

Perhaps, one of the ways can be still using extra <p> tag and manipulate it's height with smaller font size so that it doesn't take as much space as it will by default. Say, you can have a declaration in CSS:

.spacer {
font-size = 4px;
}

and in the text field:

<p class="spacer"></p>

Again, I would love to see a better solution.

[smohadjer]

But my textField reads the text from an XML file which doesn't have any empty <p> tags and I don't have control over the content of XML.

[Andrei1-bKoviI]

Are the <p> tags part of XML? You did not mention it in the first post.

What is the XML structure?

[rob day]

This can be kind of fussy but it can work if the text field doesn't auto size. I make a style where the leading is larger then the leading of the paragraph then span it inside what would be the last line (so there's really only one paragraph):

.halfp {
leading: 17;
}


<p>The paragraph text starts. The last line starts here<span class="halfp">and ends here.</span>The second paragraph starts here and continues...</p

[smohadjer]

Thanks but such solutions are worse than the problem. You are again assuming that I have control over the XML file. The reason I have put the content of the textField in XML is that my client can update the content of the Website without my help.

Is supporting "margin-bottom" in CSS such a big endeavour for Adobe team? Why do they boast supporting CSS when we can't even use a rule as basic as that? I'm also supprised that CSS support in Flash/ActionScript has not improved a bit since four years ago. The list of CSS properties in Flash CS3 looks the same as those in Flash MX 2004!

[smohadjer]

The structure of XML is like this:

<page>
<h1>here is the title</h1>
<p>here comes 1st paragraph...</p>
<p>here comes another paragraph...</p>
...
<p>here is the last paragraph...</p>
</page>

[rob day]

You might be able to add a style to increase the leading of the last line after you loaded the XML via search and replace. So search for </p> and change it to </span></p then back up x number of characters to get to the line above and add <span class="halfp">

<p>The paragraph text starts. The second to last line starts here and ends <span class="halfp"> here.The last line starts here and ends</span></p

[Andrei1-bKoviI]

I think rob day's suggestion has merits too. Either way I don't see any other way but inserting an extra element that adjusts the spacing somehow.

Yes, it sucks that the majority of styling declarations are not supported but, on the other hand, it is not such a big deal to insert an element especially with the powerful XML tools in AS3.

You can create a function that will preprocess all XML "page" nodes and insert an extra <p> tag after each <p> tag (see attached code)

I did not check if code works - it is just a concept.

The same approach can be taken with rob's suggestion but inside the <p> element that comes with the XML.

[rob day]

Andrei, I don't think adding a new paragraph will work because negative leading has no effect, so a new paragraph would only add more space. My trick changes the leading of the last line of the paragraph, so if the p tag leading is 12 then the .halfp class with a leading of 18 would give the look of a half space. What makes it tricky is the opening of the span tag has to be in the next to last line of the paragraph and it has to be closed in the last line. That's why I was suggesting a reg expression search and replace.

[Andrei1-bKoviI]

Rob,

You are absolutely right about inserting <p> tag. Your suggestion looks much better.

<span> can be inserted easily with either, as you said, RegEx or with XML methods.