CSS and the bold tag in Flash TextFields

I think I have some fundamental lack of understanding here. I’m trying to use CSS to specify how some HTML text in a text field is rendered. Specifically, I want my bold text to be a bit larger and different color. I have this test code:

[as]var tf:TextField = new TextField();
tf.width = 200;
tf.multiline = true;
tf.wordWrap = true;
addChild(tf);

var css:String = “h1 { color:#ff0000; font-size: 14;}”;
//var css:String = “b { color:#ff0000; font-size: 14;}”;

var ss:StyleSheet = new StyleSheet();
ss.parseCSS(css);
tf.styleSheet = ss;

tf.htmlText = “

Header

This is bold text here.”;[/as]

Create a text field, a CSS selector, a style sheet that parses the CSS. Apply it to a text field, assign it some html text. The above works fine, making the h1 header text appear in red. But if I uncomment line 8, and comment the one above it, effectively changing the “h1” to a “b”, nothing happens. The bold text is still bold, but not colored and same size as the rest.

I’m no CSS expert, but it seems this kind of thing should be possible. Is this just a funky Flash text field implementation of CSS, or am I not grasping some concept about CSS?

This entry was posted in Flash. Bookmark the permalink.

24 Responses to CSS and the bold tag in Flash TextFields

  1. Pier says:

    Did you try putting some units on the font-size? like “14px”

  2. Chad Udell says:

    Keith,
    You are not alone… I’ve all but given up on depending on Flash’s rudimentary HTML and CSS support. It’s alternately too stupid or too helpful to render text as needed. Usually I resort to explicitly setting color on spans of text with html font tags. Bad I know, but it works.

    In your case, you are using an H1, which as far as I know is not actually a supported HTML tag in Flash player, so that may have something to do with it, try some other tags that Flash does understand like “i”, “a”, “span”, “p” or something. Does that work for you?

  3. schk says:

    I’m not sure why Flash is crapping out on the bold tag, but if you replace the “b” tags with “strong” and update your CSS to use “strong”, it will accomplish what you are looking for.

  4. kp says:

    yeah, exactly, it’s the fact that htmlText already recognizes the b tag, which is what I kind of figured. And I worked it out by using other custom tags. I just assumed there would be a way to do this while still using

  5. tbm says:

    you have to set embedFonts to true.. then you have to also embed a bold version of the font in the library. I’ve been through mill on css and flash and there’s huge problems with it. especially for other languages.

    I have to actually hack the unicode.xml file to include all the characters for a font if using CSS for multiple languages.. as when you stick the font in the library (which as far as i can tell you have to do with css) it only embeds a subset of the font.

    luckily now i have got it all sorted. my css parser grabs the name of fonts from the .css file, loads them in by name.. i.e. Arial.swf so all i have to do on textfields is say

    copy_txt.styleSheet = FontManager.getInstance().style;

    and then it uses the style from the css for all languages without any formatting or other crap to sort out

    dying to know if runtime font loading is in flash 10. I done it for flash 9 by parsing the Bytedata of font files but its not really usable for anything other than graphic experiments.

  6. Dru says:

    I did not realize this until I read Essential ActionScript 3.0 (by Moock), but you cannot use CSS to alter the formatting of HTML tags other than “p”, “li”, and “a”. Put another way, “b” and “i” tags will always render with their original HTML intent. Can’t un-bold a “b” tag, unfortunately.

    I just looked it up, it’s on page 728 of the book, in the Text Display and Input chapter (ch 27).

    Using “strong” as mentioned earlier, or any other tag that is not officially supported by Flash, should work.

  7. Mem's says:

    Flash + CSS != 2 😉
    Lot of bugs, no margin-top, no margin-bottom, only few tags supported …
    Is for what I using RegExp to sanetize and transform all tags (I keep only p, ul, li and h*)

    myCSS.setStyle(“.strong”, {color: “#ffffff”, fontSize: “13px”, fontFamily: “Dax-Medium”});

    text = text.replace(//gi, “”);// replace | by
    text = text.replace(//gi, “”);
    text = text.replace(//gi, “”);// replace by

  8. tbm says:

    ahh o.k as usual am not on the same page. you cant override the with css, gotcha. good tip

    but to be honest better not to isn’t it?.. what if some other copy elsewhere in the site wants to use bold. I guess its a succinct way to write over all things quickly for small jobs without having to create tons of spans all over the place.

    or as is the case you cant.. lol

  9. kp says:

    Mem’s, I think your angle brackets got eaten by WordPress, but I get the idea. I was thinking of going down a similar route. Thanks.

  10. Shoom says:

    I find myself doing some CSS/HTML jobs from time to time and, well, I never liked the or tags anyway. If you want to keep the layout separate from the structure those tags really shouldn’t be used since their only purpose is to style text. So all does and should do is set text to bold by terms of solely html. When you want to emphasize certain text by use of font weight AND different color the tag would be misleading, since its name already says it’s only for making text bold. Using or something similar is still cleaner than bending the ‘s styles, whether it’s Flash or HTML…

  11. Mem's says:

    Maybe with HTML entities ?
    text = text.replace(/<(?:b|strong)>/gi, "<span class=\"strong\">");// replace <strong>|<b> by <span class="strong">
    text = text.replace(/<\/(?:b|strong)>/gi, "</span>");
    text = text.replace(/<br\s?\/>/gi, "<br>");// replace <br /> by <br>

  12. Evan Mullins says:

    I’ve had many problesm trying to get flash to do what it seems like it should with html text and css! I feel your pain. To help me understand it better I wrote a couple blog posts explorint it…
    http://blog.circlecube.com/2008/02/11/css-and-html-rendered-in-flash-open-source-example/
    – a simple wysiwyg htmlText css renderer. http://blog.circlecube.com/2008/06/05/style-htmltext-with-css-in-your-actionscript-flashcss-tutorial/ Here’s a sample I did just a bit ago. It doesn’t explain the problems with flash html css, but shows a few working styles.

  13. Tyler Egeto says:

    I’ve gone down this road before and for the most part regretted the journey. Some of the styling isn’t so bad, but when you get the clever idea of using the image tag functionality, it’s best just to forget that its even there.

  14. Hey, just stumbled across your blog and stumbled across this post – I’ve just recently created a XML News application in Flash using HTML within a XML file and the text field within Flash is connected to a CSS file. Really the only thing I used the CSS file for was styling the links (a tag), because when you use HTML / CSS formatting of text within Flash its a bit different – only a few tags and properties are supported. I myself haven’t been able to figure out how to change the font, it always has to be the font that is set in the text field, but I actually set the font color and size in the HTML (which was within the XML, but that doesn’t matter) using the tags. The Flash AS3 reference in the help file note this if you look up htmlText in it. Bold and italics are also supported as long as the font you are using supports it as well. Just thought I’d share the fact that stuff I would do in the CSS like font size and color, is easier done in the HTML text using the tag. Thanks. 🙂

  15. Lawrie says:

    @Christian: It’s worth noting that a single textfield in Flash cannot, at present, support more than one font embedded into it at a time.

    I got around this a while ago when I wanted to use a different font for titles by creating an MC containing a dynamic textfield in the library with a Linkage name to export for Actionscript. Then I called in my XML file and for every occurance of the title tag, I stripped it out and replaced it with an img tag calling to the MC in the library, giving it a unique instance name and populating it with the original text of the title tag. It took a little bit of figuring out.

    @Keith: I discovered a long while ago that Flash would utterly refuse to apply an CSS to bold tags. I haven’t had to fool around with it for a while, but I’ve recently decided to have a go at redesigning my blog for the first time in two years and noticed that closing ‘strong’ tags are, for some reason, forcing line breaks.

    Sometimes I love Flash. Sometimes I want to hurt it. Badly.

  16. kp says:

    Lawrie. Yep, I hear that. 🙂

  17. John says:

    I have a question regarding CMS and flash.
    I need a text editor that produces a flash friendly HTML formatting so i can import to flash.
    The text editor module should preferably be in PHP..

    Anyone?

  18. Kirk says:

    I was trying to find a hack to implement marginTop or marginBottom and found this post.
    Unfortunately I’m still lost on vertical margins, but I wanted to add a couple of notes.

    @Lawrie
    You *can* use multiple fonts in a single text field. Somewhere off-stage in your movie create dummy text fields with the various fonts you want embedded (one per field, as you mention). Then make sure embedFonts is set to true on your actual displaying text field and use CSS to set the fontFamily name to *exactly* how it appears in the Flash app drop down menu. This way you can display multiple fonts in a single dynamic text field. It’s kind of magical.

    My understanding is that any tag that Flash “recognizes” (b, i, u, etc) cannot have its styles modified. This is a pain if you’re sharing html with some other presentation layer.

    I was hoping I would finally be able to use one text field to display multiple paragraphs. Until vertical margins or padding are supported it looks like I’ll have to continue to use a text field for each element, or use full line-breaks in-between. alas 🙁

  19. One solution for Bold text?
    The same textField duplicate, one of this with BOLD button ON and other with BOLD button OFF in the same frame, with the same propiety (only Bold option is different) and same namo of instance.
    good luck

  20. Lawrie says:

    @Kirk
    Thanks for the tip – I remember struggling with this concept back in 2007 on an abandoned blog design, hence my convoluted methodology above. I just tried what you suggested (in Flash 8, no less) and it worked a treat. Score!

    In defence of my method, I’d also embedded a whizzbang calendar MC and exapandable tag cloud into that title clip. Calling MCs from the library into a textfield with an img tag is one of the lovelier tricks Flash gave us.

  21. Jeremy says:

    So one thing which is likely to trip up people which I only just discovered. If you are loading in a style sheet that has any CSS comments (/* */) then Flash ignores you’re entire style sheet. Try it out, it’s amazing.

  22. Kinoli says:

    Jeremy, that is incorrect. I add comments to my css documents that get loaded into flash all the time.

    Something I do to get bold working properly is add this to my css…

    .light { font-family: Frutiger 45 Light; }
    .roman { font-family: Frutiger 55 Roman; }
    .bold { font-family: Frutiger 65 Bold; }

    Then in my htmlText I just wrap the text with this…

    My BOLD text.

    Hope this helps.

  23. Kinoli says:

    woops, the bold example didn’t display properly. but i will wrap a span tag around it and just use the bold as a class name to reference it properly. Cheers.

  24. Mike says:

    I know how old this post is, but thought I’d add my two cents. Hopefully this answers some questions brought up in some of the comments, and/or helps anyone else who’s looking for help and keeps coming back to this post….like me.

    Make sure the fonts you want are embedded.
    Using bold and italic tags will only work if you have embedded a bold and/or italic font that corresponds to the “regular” font. So, applying a bold style to a portion of an Arial textfield requires you have also embedded Arial Bold. But, the next item below shows this isn’t always the case.

    Make sure the Flash IDE and the Compiler are using the same font name.
    When using CS5, explicitly use Font.enumerateFonts() to check your embedded font names are what you are expecting. Example: I was using Arial Bold and Arial Bold Italic. They both are displayed in the Font Manager as font name “Arial” with styles “Bold” and “Bold Italic” respectively. That didn’t match what was being traced by Font.enumerateFonts(). Arial Bold Italic was name “Arial Italic” and style “Bold”. So, I could not use the “b” or “i” tag, and was forced to create a custom tag because of the differing font families. Took all day to figure that out. This has to be a bug.

    Not all tags can be overridden, but unsupported tags can be helpful.
    Only “p”, “li” and “a” tags can be overridden using CSS. Not “b”, “i”, etc etc. If you need to override a bold or italic tag, use tags not supported by Flash, but supported by CSS like – “em”, “strong”, etc. Those tags don’t have defaults in Flash because they are intended for screen readers to annunciate the text. (ie…”strong” is intended to have a different vocal inflection.) Doing this ensures you can use the same CSS to style HTML later.

    Fixing custom tags causing line breaks
    If you do use custom tags, make sure to include in your CSS “display:inline”. This should eliminate the problem where Flash will insert a line break after text using that tag. @Lawrie specifically brought this up.

    How Flash uses CSS.
    It’s helpful to know how CSS in Flash works under the hood. After setting the “styleSheet” property, the CSS is re-written as a TextFormat object and then applied to your textfield. If you’re curious, apply a bold style to a “p” tag wrapping a string. Then trace “textfield.getTextFormat().bold” and it should be set to “true”.

    Use HTML syntax and naming conventions to be safe.
    Pay close attention to the properties you are setting depending on where you are setting them and how you intend to use them. For example, when setting in CSS “font-family” and “fontFamily” are interchangeable. Not being an HTML-guy, I’m not sure HTML will be be so forgiving. Use the html-compatible syntax wherever possible.

    Try to make CSS independent of Flash or HTML.
    Try to write CSS that is supported by both Flash and HTML. You can create custom tags from tags that aren’t supported by Flash, but you can’t create custom implementations. For example, creating a CSS class for “p.strong” will work in HTML, but will be ignored in Flash. And there is no way to override it.(I haven’t thoroughly tested this, so it may be inaccurate. But, the principle is still valid.)

    Embed your fonts unless you have a good reason not to.
    Whenever possible, make sure to set the textfield’s “embedFonts” property to true, and embed the fonts required. Otherwise, you are completely at the mercy of Flash. In some instances, your CSS may be completely ignored if no suitable substitutes are found. An example scenario to show a good reason for not embedding a font is Google Maps API. By not embedding the font for the “terms and conditions” it doesn’t add file size, and it can’t be manipulated. (ie….rotation, alpha, etc etc)

Leave a Reply