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?
Did you try putting some units on the font-size? like “14px”
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?
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.
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
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.
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.
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
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
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.
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…
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>
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.
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.
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.
@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.
Lawrie. Yep, I hear that.
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?
[...] Read more [...]
[...] Read more [...]
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
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
@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.
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.