BUG OR FEATURE?: CSS AND EMBEDDED FONTS

MONDAY, DECEMBER 13 2004 @ 05:32 PM

I've been lurking around the forums and mailing lists archives during the weekend, looking for an answer. Unfortunately, I've been unable to find any helpful information, and I'm just concluding that it is impossible to use CSS and a mix of embedded and non-embedded typefaces.







I have been using these four examples to explore the behaviors of different HTML strings. What I wanted to accomplish is to display dynamic text from a database, formatted using a Stylesheet using common typefaces, thus eliminating the need for embedded fonts. However, at the end, I needed to embed just one special typeface like in the example above. So, we create a new Font from the Library, and set "Header" as it's identifier; here goes the code:

//1<\/div>

The result is Example #2, which truncates the text and displays only the header. Now, this is the first time I attempted to use CSS and embedded fonts in a single textfield, but I guess the expected behavior would be being able to display the whole thing without any more work. So, if there's is a way to show embedded and device fonts in the same Textfield, I haven't been able to find it, and if it doesn't exit... well, it should.

So, in order to see the rest of the text I need to embed another font: Arial, which is ubiquitous and will add unnecessary bytes to my swf. So, to accomplish what you see on Example #4, we need to add another Font to the Library, and modify the code a little bit.

// Create StyleSheet
var myCSS = new TextField.StyleSheet();
// Create .header and .subheader Styles
myCSS.setStyle (".header", {fontFamily:"Header", color:"#CC0000", fontSize:"30px", fontWeight:"bold"});
myCSS.setStyle (".subheader", {fontFamily:"ArialNormal", color:"#000000", fontSize:"12pt"});
// Set the textfield to embed the typeface
greeting_txt.embedFonts = true;
// Assign StyleSheet to the Textfield
greeting_txt.styleSheet = myCSS;
// Assign the formatted text
greeting_txt.htmlText = "<span class=\"header\">Season's Greetings</span><br><span class=\"subheader\">Lorem Ipsum ...</span>";

Archived under: Flash. | Permalink | google | del.icio.us Is it delicious? | digg Do you digg it?


JULIAN SANDER

DECEMBER 14 2004 @ 01:08 AM

Hi Oscar,
I have been experimenting with this as well and have tried to use a library font name in the css which worked fine. I got '_sans' as the text and a library font I use for the tags.. I can send what I have if you are intrested, just drop me an email and I will whip it over to you.

cheers, Julian (a.k.a. dr.swank)

JESTERXL

DECEMBER 14 2004 @ 08:41 AM

You might want to trace out the .htmlText, and see if it matches what you threw in. Another thing to try is to wrap any text after your embedded text with a textformat tag > p tag > font tag (or in your case span). I've font that fixes a lot of display bugs.

Flash textfields suck; there was a reason they had "lingering" embedFont code in the RichTextEditor on DRK 3 unfinished... the developer found, like you, even before CSS that things didn't always work.

Anyway, try fiddlig with the TextFormat, bet you you get lucky.

OSCAR TRELLES

DECEMBER 14 2004 @ 09:26 AM

Yeah, I've been there and done that, I just simplified the issue a little bit for this example, but I actually tried wrapping the paragraph text with all of the tags I could come up with, but it never worked the way it should. I'm sure the texfields have the correct htmlText, so it is the field's fault.

SVEN

DECEMBER 14 2004 @ 02:35 PM

What's wondering me is, that "Lorem ipsum" in the example #4 isn't antialiased, though you set embedFonts to true. It makes sense, that "lorem ipsum" isn't displayed in the example #2, if the Arial font isn't embedded, because you have set embedFont to true and that requires for all fonts used to be embedded.

OSCAR TRELLES

DECEMBER 14 2004 @ 03:56 PM

Oh well, I embedded the Arial aliased, since that's how I wanted it to look. I understand that setting embedFont to "true" forces the textfield to display only characters for which a typeface has been embedded. However, embedding common fonts shouldn't be necessary. In other words, setting embedFont to "true" should instruct the texfield to display embedded in adition to (not instead of) device fonts.

VINCE

SEPTEMBER 19 2006 @ 09:26 AM

cheers dude! this was being a pain in the arse all day.