My font hell - Dynamic HTML text + embedded fonts

programming flash
1

[font=Arial]Hi there,

I am trying to create a text box with actionscript, using an embedded font, and populating it with HTML text. It seems I can either use an embedded font, or HTML formatted text, but not both. To illustrate the problem, I have created a little test.

  1. Create a font symbol in the library. Export it for actionscript as “_mainFont”.

  2. Create a dynamic text box on the stage using _mainFont and type some random text in it, including the use of bold and italics. Set the font size and colour to whatever you like. Name the instance “templateText”.

  3. On the first frame, type in these actions:

[/font]


with (_root.templateText) {
	 html = true;
	 wordWrap = true;
	 multiline = true;
	 autoSize = true;
	 htmlText = "Hi there. <font color='#FFFFFF'>This is a test. </font><br/><br/>Blah blah <b>bold</b> blah <u>underline</u> blah blah <i>italic</i>.";
	 embedFonts = true;
}

[font=Arial]
[/font]
[font=Arial]The textbox should display correctly, using the correct font, colour and all the HTML formatting. Unfortunately, I need to create text on the fly. So modify the actionscript to create a new text field instead of using the template text:

[/font]


_root.createTextField("textBox", 3, 0, 0, 250, 100);
with (_root.textBox) {
	 html = true;
	 wordWrap = true;
	 multiline = true;
	 autoSize = true;
	 htmlText = "Hi there. < font color='#FFFFFF' >This is a test. </font><br/><br/>Blah blah <b>bold</b> blah <u>underline</u> blah blah <i>italic</i>.";
	 var textBoxFormat = new TextFormat();
	 textBoxFormat.font = "_mainFont";
	 setTextFormat(textBoxFormat);
	 embedFonts = true;
}

[font=Arial]
[/font]
[font=Arial]What happens? I get the right font. The < font color > tag works OK, I get the breaks and the underline, but I get no bold and no italics. Finally, let’s make some use of the templateText box by using its formatting. Replace the line:

var textBoxFormat = new TextFormat(); with
var textBoxFormat = _root.templateText.getTextFormat();

Now the text is formatted with the right font, the same colour and size of the templateText box, but I’ve lost the HTML font colour and underline in addition to the bold and italics.

If I take out the Embed Fonts, I get back bold and italics, but loose font colour and underline, as well as the wrong font.

I’m really tearing my hair out on this one - it’s taken nearly a whole days work just trying to fix this hugely annoying problem. Please help!

Thanks,

Scott [/font]**

**

2

same problem here…
I don’t understand it…
I once achieved it when i attached a movieclip with a textfield in
i’ll try that again

3

Hi Gerartje,

Unfortunately for me nobody replied to my question when I needed it, but I have since figured out one way around it myself - though it is not a perfect solution. What seems to be happening here is that by specifying the font (as in textBoxFormat.font=“myFont”), it does embed the font, but only the version of it that has been added to the library - and you can only embed one version (plain, bold, italic etc.) with the same name. There is no option to embed plain, bold and italic all at once with the same name. So if you have the plain version added to your library, regular text will be perfect, but bold & italics will not show up.

So what are the options? Well, you could add a font to the library for each version, but you have to give them all different export names which means using regular HTML formatted text won’t work unless you write some code to change the font one each style of your HTML text - which is clearly rediculous.

The solution for me was to remove the font reference in the textFormat altogether. Keep the myTextFormat.embedFonts, but don’t specify what font to use. Now if you try to use that with just any dynamic text box it won’t work because it won’t know what font to embed.

But if you have a template text box created in the authoring environment like in my example, and if that template text box contains text which has all the styles you want to use, you can get it’s textFormat object:

var templateTextFormat = templateTextBox.getTextFormat();

and apply it to your dynamically created textbox:

myTextBox.setTextFormat(templateTextFormat);

Now your fonts will embed properly and it should all work. But that means you do have to create a template text box - place it off the stage if you don’t want it to be seen - and it must be available for referencing by your code wherever you need to create a dynamic text box on the fly. So your template text box will have to be dynamic, font properties embedded and given an instance name.

Hope that helps.

Regards,

Scott.

4

Hi,

yeah, changing the html was an option indeed.
But i prefere your second method. If it works :slight_smile:

In my example, I removed the font reference, and used a getTextFormat…
but embedFonts isn’t a property of a textFormat I assume, so you have to use embedfonts on a textField, but then my text dissappears.
I would really appreciate it, if you could take a look at my example!!

Tnx

5

Hi Gerartje,

Sorry I have been too busy to answer your post earlier. I had to have another look at my code, and yes there is an extra step involved. For everything to work properly you must set the template textbox text to your HTML text as well as your newly created text box. like this:


var textAlignment = templateTextBox.getTextFormat().align;
templateTextBox.htmlText = htmlString;
templateTextFormat = templateTextBox.getTextFormat();
with (_root.textBox) {
	 html = true;
	 wordWrap = true;
	 multiline = true;
	 autoSize = true;
	 htmlText = htmlString;
	 var newTextFormat = templateTextBoxFormat;
	 newTextFormat.align = textAlignment;
	 setTextFormat(newTextFormat);
	 embedFonts = true;
}

Now everything should work OK. Note that setting HTML text to a text box will cause it to lose its text alignment property and color. You can restore the alignment by using my example above, and you can save the template color the same way. Unfortunately if you set the color property of a textFormat object it will override any HTML color settings. As far as I know there is no way to set a base text color and allow HTML text to override it.

Good luck,

Scott