Artificial Intelligence Question posted in
ChatGBT is becoming a world-wide phenomena, try it out here.

(AS3) Getting an HTML-specific character index in a textfield after word wrap – Artificial Intelligence

I didn’t know how to phrase the title, so sorry about that. If you have a better title suggestion, let me know and I’ll change it.

I’ve got a chunk of text that is displayed as HTML in a TextField. An example of this text is this:

1
<font size="30" color="#FF0000">When your only tool is a hammer, all problems start looking like nails.</font>
</br>
2
<i>99 percent of lawyers give the rest a bad name.</i>
<b>Artificial intelligence is no match for natural stupidity.</b>
<u>The last thing I want to do is insult you. But it IS on the list.</u>
</br>
3<showimage=Images/image1.jpg>
I don't have a solution, but I do admire the problem.
The only substitute for good manners is fast reflexes.
Support bacteria - they're the only culture some people have.
</br>
4
Letting the cat out of the bag is a whole lot easier than putting it back in.
Well, here I am! What are your other two wishes?

Most of the tags are basic, meant to display what I can do formatting wise. However, since Adobe Air has a sandbox that prevents inline images (via the <img src='foo.png'> tag), I’ve had to come up with another way to display images.

Basically, I intend on having an image displayed somewhere on the screen, and as the user scrolls the image will change based on where in the text they have scrolled to. The image can be a background image, a slideshow on the right, anything really.

In the snippet above, look for my custom tag <showimage=Images/image1.jpg>. I want to get the local y position of that tag once the TextField is rendered as HTML and word wrapped. The trouble is, when I query the y position of the tag (using getCharBoundaries), I can only either search for the tag when I render the text as a .text instead of a .htmlText. If I search for the tag in the TextField after rendering it as .htmlText, it doesn’t get found because the tags are hidden and replaced with formatting.

The trouble with the y value I get before rendering the HTML is that the y value will be different due to font sizes, tags being hidden and word wrap changing the line and y value that the tag is located at.

How do I get the correct y value of an HTML tag once the HTML has been rendered?

I’ve considered using a different style tag, maybe something like &&&&&showImage=Images/image1.jpg&&&&, but that seems like a cop-out and I’d still run into problems if multiple of those tags were in a block of text and the tags were removed, followed by word wrap that shifts lines in a pretty unpredictable way.

Tags:

3

Answers


  1. 0

    Instead of going through the trouble of parsing your image tag, have you tried playing with HTMLLoader and using the loadString method? This should load everything in its proper place including the image using the img tag.

    private var htmlLoader:HTMLLoader;
private function loadHtml(content:String):void
{
    htmlLoader = new HTMLLoader(); //Constructor
    htmlLoader.addEventListener(Event.COMPLETE, handleHtmlLoadComplete); //Handle complete
    htmlLoader.loadString(content); //Load html from string
}

private function handleHtmlLoadComplete(e:Event):void 
{
    htmlLoader.removeEventListener(Event.COMPLETE, handleHtmlLoadComplete); //Always remove event listeners!
    htmlLoader.width = htmlLoader.contentWidth; //Set width and height container
    htmlLoader.height = htmlLoader.contentHeight;
    addChild(htmlLoader); //Add to stage
}
    Login or Signup to reply.
  2. 0

    myTextField.textHeight tells you the height of the text in pixels. So you can split the string on whatever you’re looking for, put the text before your target in the textField and get the textHeight, then put the rest of the text in.

    Here’s some example code – tMain is the name of the textField: 

    var iTextHeight: int = 0;
var sText: String = '<font size="30" color="#FF0000">When your only tool is a hammer, all problems start looking like nails.</font></br><i>99 percent of lawyers give the rest a bad name.</i><b>Artificial intelligence is no match for natural stupidity.</b><u>The last thing I want to do is insult you. But it IS on the list.</u></br><showimage=Images/image1.jpg> I don't have a solution, but I do admire the problem. The only substitute for good manners is fast reflexes. Support bacteria - they're the only culture some people have. </br>Letting the cat out of the bag is a whole lot easier than putting it back in. Well, here I am! What are your other two wishes?';
var aStringParts: Array = sText.split("<showimage=Images/image1.jpg>");
for (var i = 0; i < aStringParts.length; i++) {
    if (i == 0) {
        tMain.htmlText = aStringParts[i];
        trace("height of text: " + tMain.textHeight);
    } else {
        tMain.appendText(aStringParts[i]);
    }
}

    sText gets split on the tag you’re looking for (removes the text you’re looking for and breaks remaining text into an array). The text leading up to the tag is put in the textField and the textHeight is traced. Then the rest of the text is put in the textField. This gives you the y pixel number you need to arrange things.

    Let me know of any questions you have.

    Login or Signup to reply.
  3. 0

    Another approach is to search your html string for <showImage ..> tags and replace these with shortcodes e.g [showImage ..] , before inserting the htmlString in a textField. Then this is NOT xml but text and you can retrieve the y value (that is if i understand correctly your issue).

    Then the rest of your code can take it from there.

    (ps using HtmlLoader seems nice alternative though)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search