How can I stop Flash from changing indent when user Clicks on hyperlink in TextField?

Question

I have a TextField which I initialize by setting htmlText. The text has anchor tags (hyperlinks). When a user clicks on the hyperlink, the indentation of the second and subsequent lines in the paragraph changes. Why? How do I stop it?

My html has an image at the beginning of the line, followed by the tag, followed by more text. To style the hyper links to look blue always and underlined when the mouse is over them, I do this:

var css:StyleSheet = new StyleSheet();
css.parseCSS("a {color: #0000FF;} a:hover {text-decoration: underline;}");
stepText.styleSheet = css; 
stepText.htmlText = textToUse;
stepText.visible = true;

Here is a fragment of the html text (with newlines and exrta whitespace added to improve readability - originally it was one long line):

<textformat indent="-37" blockindent="37" >
    <img src="media/interface/level-1-bullets/solid-circle.png" 
         align="left" 
         hspace="8" 
         vspace="1"/> 
    American Dental Association. (n.d.). <i>Cleaning your teeth and gums (oral hygiene)</i>. 
    Retrieved 11/24/08, from 
        <a href="http://www.ada.org/public/topics/cleaning_faq.asp" 
           target="_blank">http://www.ada.org/public/topics/cleaning_faq.asp
        </a>
</textformat>
<br/>

As it turns out, the text field is of a width such that it wraps and the second line starts with "Retrieved 11/24/08". Clicking on the hyper link causes this particular line to be indented. Subsequent paragraphs are not affected.

ASIDE: The image is a list bullet about 37 pixels wide. (I used images instead of li tags because Flash does not allow nested lists, so I faked it using a series of images with varying amounts of whitespace to simulate three levels of indentation.)

IDEA: I was thinking of changing all hyperlinks to use "event:" as the URL protocol, which causes a TextEvent.LINK event to be triggered instead of following the link. Then I would have to open the browser in a second call. I could use this event handler to set the html text to itself, which might clear the problem. (When I switch pages in my application and then come back to the page, everything is OKAY again.)

PROBLEM: If I use the "event:" protocol and user tries the right-mouse button click, they will get an error, or so I am told. (See http://www.blog.lessrain.com/as3-texteventlink-and-contextmenu-incompatibilities/ ) I do not like this trade-off.

Answer 1

I found a workaround, along the lines of my IDEA above.

1) Prefix all hyper-links with "event:". 2) Add an event listener on the control to process the request. 3) The listener launches the browser AND sets the text to empty string then its original value.

1) Prefixing with event:.

public static function hrefEvents(s:String):String {
    var hrefRegex:RegExp = /href="/gm;
    var output:String = s.replace(hrefRegex, "href=\"event:");
    var dupe:RegExp = /event:event:/gm;
    output = output.replace(dupe, "event:");
    return output;
}

2) Add event listener

stepText.addEventListener(TextEvent.LINK, hyperlinkHandler);

3) Handle the LINK event.

private function hyperlinkHandler(e:TextEvent) {
 var temp:String = stepText.htmlText;
 stepText.htmlText = "";
 stepText.htmlText = temp;
 var url:String = e.text;
 trace("Clicked on link to URL: " + url);
 navigateToURL(new URLRequest(url), "_blank"); 
}

If I don't set the field to empty string first it does not think anything changed, so it does nothing.