22 Replies Latest reply on Jan 27, 2009 1:16 AM by

    Bullets fail to appear with embedded fonts

      Hi,

      I need to use an embedded font so that I can do some basic fading between state changes.

      When I set the htmlText property of a TextArea control to include a list (eg: ta.htmlText = "<li> item 1</li><li> item 2</li><li> item 3</li>";) the bullets appear fine until I embed the font - then they disappear.

      I'm using an external css and tried lots of different fonts and they all behave the same.

      If I remove the "@font-face" tag the bullets re-appear.

      What's going on here?

      cheers

        • 1. Re: Bullets fail to appear with embedded fonts
          Level 7

          "kevin nugegoda" <webforumsuser@macromedia.com> wrote in message
          news:gl1q56$qh1$1@forums.macromedia.com...
          > Hi,
          >
          > I need to use an embedded font so that I can do some basic fading between
          > state changes.
          >
          > When I set the htmlText property of a TextArea control to include a list
          > (eg:
          > ta.htmlText = "
          • item 1</li>
          • item 2</li>
          • item 3</li>";) the
            > bullets
            > appear fine until I embed the font - then they disappear.
            >
            > I'm using an external css and tried lots of different fonts and they all
            > behave the same.
            >
            > If I remove the "@font-face" tag the bullets re-appear.
            >
            > What's going on here?

            Have you tried just setting the blendMode of the TextArea to "layer" instead
            of embedding the font?


          • 2. Re: Bullets fail to appear with embedded fonts
            Hi, thanks for the response but not sure how that's going to help? As I want the ViewStack container to Fade in/out on show/hide (fade from alpha 0->1 over 100ms and then reverse on Hide)

            Still not sure why the bullets are disappearing when I embed any font! Is this just me or can anyone else replicate the issue?

            Steps to reproduce:
            1) create a new Flex project and switch to code view
            2) create a TextArea control and attach a function to the creationComplete event of the textarea (not the app).
            3) in the function set the: myTextArea.htmlText = "<li>item 1</li>";
            4) switch to design view & change the font to anything else and click "Convert to CSS..." (create/save your css file)
            4) run the app and the bullets will appear

            switch to the CSS file you created and tick the checkbox to embed the font and re-run the app, the bullets disappear.

            Edit the CSS and remove the @font-face tag and the bullets are back.

            Is this a bug or am I missing something?
            • 3. Re: Bullets fail to appear with embedded fonts
              Level 7

              "kevin nugegoda" <webforumsuser@macromedia.com> wrote in message
              news:gl39lm$lne$1@forums.macromedia.com...
              > Hi, thanks for the response but not sure how that's going to help? As I
              > want
              > the ViewStack container to Fade in/out on show/hide (fade from alpha 0->1
              > over
              > 100ms and then reverse on Hide)

              Setting the blendMode to "layer" is often as effective as embedding the
              font.

              >
              > Still not sure why the bullets are disappearing when I embed any font! Is
              > this just me or can anyone else replicate the issue?

              If embedding is giving you problems, then try an alternative.

              HTH;

              Amy


              1 person found this helpful
              • 4. Re: Bullets fail to appear with embedded fonts
                ntsiii Level 3
                Frankly, fonts and such are well out of my comfort zone, but is it possible that the font you are embedding does not have bullets? Or maybe you need the "bold" font-face as well? Some such stuff? Just throwing stuff out here.
                • 5. Re: Bullets fail to appear with embedded fonts
                  Thanks for your comments.

                  I've tried many fonts and I'm sure most if not all of them must have bullets - they all seem to display bullets when working in any other app and they appear in Flex when the font is not embedded - so unless it's somehow using a different font for the bullet...

                  I've included the bold as well to no avail.

                  The only two solutions I have been able to muster are:
                  1) hiding the TextArea control and making a bitmap of it to display in an image control - works but then the text is not selectable/searchable/indexable

                  2) replace the bullet with an image - haven't got this to work reliably yet.
                  • 6. Re: Bullets fail to appear with embedded fonts
                    ok found a nasty workaround for now.

                    Using this post http://thanksmister.com/?p=17&cpage=4#comment-11163 to cleanup the html output from the RichTextEditor, I added a mod to place an image inside every <li> tag.

                    It works, but I'd rather have bullet characters!

                    CleanHTML output means I can style the TextArea controls completely with css which is very handy too.

                    Thanks for your suggestions.
                    • 7. Re: Bullets fail to appear with embedded fonts
                      rtalton Level 4
                      I followed the steps you listed and could not reproduce the behavior--all worked fine.
                      I created the css file with and without a component style name.
                      I tried three different fonts, and they all embedded/displayed bullets correctly (Verdana, Times New Roman, Curlz MT).
                      Can you post the relevant code?
                      I've attached mine for you.

                      1 person found this helpful
                      • 8. Re: Bullets fail to appear with embedded fonts
                        Level 7

                        "kevin nugegoda" <webforumsuser@macromedia.com> wrote in message
                        news:gl4bek$1n7$1@forums.macromedia.com...
                        > ok found a nasty workaround for now.
                        >
                        > Using this post http://thanksmister.com/?p=17&cpage=4#comment-11163 to
                        > cleanup
                        > the html output from the RichTextEditor, I added a mod to place an image
                        > inside
                        > every
                        • tag.
                          >
                          > It works, but I'd rather have bullet characters!
                          >
                          > CleanHTML output means I can style the TextArea controls completely with
                          > css
                          > which is very handy too.
                          >
                          > Thanks for your suggestions.

                          Did you ever actually try using a blendMode set to "layer" instead of
                          embedding the font?


                        • 9. Re: Bullets fail to appear with embedded fonts
                          @Amy: sorry Amy, I didn't but have since and you're spot on. The text fades as it should. Thank you. So I can change my font back to a standard one, not embed and I should be right.

                          @rtalton: Thats interesting. Verdana does not display the bullets when embedded for me - Times New Roman does, but doesn't fade the text even though it's embedded.. - I don't have Curlz MT but tried a lot of other fonts. FYI: I'm on OSX 10.5.6

                          code below:
                          • 10. Re: Bullets fail to appear with embedded fonts
                            Level 7

                            "kevin nugegoda" <webforumsuser@macromedia.com> wrote in message
                            news:gl62d0$5r7$1@forums.macromedia.com...
                            > @Amy: sorry Amy, I didn't but have since and you're spot on. The text
                            > fades
                            > as it should. Thank you. So I can change my font back to a standard one,
                            > not
                            > embed and I should be right.

                            In many circumstances. If you want to scale the text unevenly (like 75% in
                            one direction and 100% in the other), then that doesn't work with the
                            blendmode. Also, I think there's a problem with the blendMode solution if
                            you want to take an ImageSnapshot. But for simple effects, you should find
                            it will work.

                            HTH;

                            Amy


                            • 11. Bullets fail to appear with embedded fonts
                              rtalton Level 4
                              Hey Kevin,
                              Using a Mac shouldn't cause any problems with font embedding. You might just try a different embed method:
                              src: url(/Library/Fonts/.ttf) or src: url(/System/Library/Fonts/.ttf)
                              Never used a Mac, so am not sure of the paths to your fonts.
                              Using the "url" instead of "local" may fix the problem. The help docs state: "In general, you should use url rather than local, because pointing to a file is more reliable than using a reference controlled by the operating system."
                              See: http://livedocs.adobe.com/flex/3/html/help.html?content=fonts_04.html

                              Also, if you have Flash, check into creating a SWF file with just the fonts you need in your app, and use the SWF to embed them all at once. I've had perfect results doing it this way, and you can make the filesize much smaller by only including the font subsets necessary. For instance, my SWF containing all the Verdana weights, styles and characters I need is only 45KB (Normal, Bold, Italic). Those three font files themselves total 455KB. If you need more info about this, just ask.
                              • 12. Re: Bullets fail to appear with embedded fonts
                                Thanks Amy I'll keep that in mind.

                                Not sure why I'm having issues with embedding fonts. But to show you what I mean: http://www.urbanwrasse.com.au/vids/BulletFontTest.mov

                                I just tried using the src: url() method and now I get an error saying "exception during transcoding 'this.ttf' font".

                                I then found this link http://www.flexfreaks.com/forums/viewtopic.php?id=96 and this filed bug http://bugs.adobe.com/jira/browse/SDK-15637

                                I tried the documented fix but it didn't work for me.

                                I hadn't thought about using a subset of the font and didn't realise you could save so much in size! Nice idea. Found this post http://deden96.blogspot.com/2008/09/externalize-font-with-font-subset-font.html - but haven't tried it yet. Is that similar to your approach?

                                In case you're interested in the end result: http://hummingbirdbaby.com.au/

                                The Terms section shows use of the bullets - these were done with image placement in the <li> tag as I discussed earlier. But hoping to change that as soon as I settle on a better approach.
                                • 13. Re: Bullets fail to appear with embedded fonts
                                  rtalton Level 4
                                  [I just tried using the src: url() method and now I get an error saying "exception during transcoding 'this.ttf' font".
                                  ]
                                  If I remember correctly, this error is caused when the fontFamily name you specify doesn't match the actual internal font name.
                                  [...haven't tried it yet. Is that similar to your approach?...]
                                  Yes. But their directions are difficult to understand. The part about actually creating the SWF is accurate, but you don't need a "class definition" to use it in Flex, as they state.

                                  I've attached a little code from a finished product which embeds fonts from a SWF file so you can see. Maybe it will be simpler to just see it.
                                  If you have Flash CS3, I can email you the .fla file used to create the SWF, and you could dissect it.
                                  • 14. Re: Bullets fail to appear with embedded fonts
                                    rtalton Level 4
                                    BTW, nice ideas on your web site, loved the "shopping cart". Great job!
                                    1 person found this helpful
                                    • 15. Re: Bullets fail to appear with embedded fonts
                                      Hey - thanks! It's the first site I've built so complements will keep me going!

                                      I tried using the Flash method with still no luck - maybe it's my Mac!

                                      Steps:
                                      added some static text to an fla using the text tool
                                      chose font/family/size
                                      typed all characters I want
                                      published the swf

                                      Then added the swf to my Flex project dir and used css code like you showed (looks much cleaner than embedding with AS).

                                      But, I get no text anywhere when I run it - Tooltip, RichTextEditor & TextArea show no visible text.

                                      Perhaps you could PM that fla to me? Sounds like I'm doing this right though..

                                      • 16. Re: Bullets fail to appear with embedded fonts
                                        Doh - needed to make the text dynamic instead of static and then you get the "Character Embedding..." button.

                                        and embedding the font this way fixed my 'bullet not showing' issue

                                        So easy - thanks for the heads up.

                                        This article helped me out:
                                        http://livedocs.adobe.com/flex/3/html/help.html?content=fonts_09.html#251936
                                        • 17. Re: Bullets fail to appear with embedded fonts
                                          rtalton Level 4
                                          Just got in and saw that you figured it out, cool.

                                          For anyone else wondering how to do this, here's a brief outline on creating a SWF in Flash CS3 containing fonts you can then embed in Flex:
                                          In Flash, put a "dynamic text" box on the stage. I type the font name in the box to remind me which font I'm working with e.g. Verdana or Verdana Bold.
                                          Use one "dynamic text" box for each of your font's weight and styles (regular, bold, italic, bold italic, etc.).
                                          Click the embed button for EACH text box...choose the characters you need for EACH text box (uppercase, lowercase, numerals, punctuation, etc.).
                                          Check your publish settings, then publish to SWF.
                                          Add SWF to your project.
                                          Set up a CSS style sheet which embeds the fonts. Example:
                                          @font-face
                                          {
                                          fontFamily: Verdana;
                                          fontWeight: bold;
                                          fontStyle: italic;
                                          src: url("/assets/fonts/verdana_all.swf")
                                          }
                                          @font-face
                                          {
                                          fontFamily: Verdana;
                                          fontWeight: normal;
                                          fontStyle: italic;
                                          src: url("/assets/fonts/verdana_all.swf")
                                          }
                                          Make sure the fontFamily name matches the name of the font to avoid any compiler errors. The font name may differ somewhat from the name shown in some applications. In Windows you can open the font directly from the font folder by clicking it and get the exact font name.
                                          • 18. Re: Bullets fail to appear with embedded fonts
                                            One thing that I noticed that was different embedding the font this way rather than using the Flex default of "local()", was that for example "Chalkboard" has a different font family name for it's bold face - "Chalkboard Bold".

                                            So when applying a font to a TextArea with css I was unable to mix normal/bold in the same field. In the end I used both methods:

                                            @font-face
                                            {
                                            fontFamily: "Chalkboard";
                                            fontWeight: normal;
                                            fontStyle: normal;
                                            src: url("/assets/fonts/HBFonts.swf");
                                            }
                                            @font-face
                                            {
                                            fontFamily: "Chalkboard";
                                            fontWeight: bold;
                                            fontStyle: normal;
                                            src: local("Chalkboard");
                                            }

                                            I was amazed at how much I was able to save by only embedding the character sets I needed (even though I had to 'waste' some space because of the bold issue)!


                                            cheers
                                            • 19. Re: Bullets fail to appear with embedded fonts
                                              rtalton Level 4
                                              Yeah, Chalkboard (an Apple font) doesn't have a bold weight. That's a problem with many "novelty" fonts. You might look into "Comic Sans MS". It is very similar and it does have a Bold weight.

                                              You should also check that your embedding isn't actually using the same font twice (SWF and local). Compile a production version of your app with and without the Chalkboard Bold and see what the diff is and compare to the actual font file. If Flex is embedding the entire Chalkboard font, you won't be happy!
                                              • 20. Re: Bullets fail to appear with embedded fonts
                                                Hmmm... I just tried Comic Sans MS and it behaves effectively the same - the bold version of the font has the same font family name but the 'font-weight' property has to be 'normal' and the 'font style' property has to be bold or it won't embed.

                                                So when you want to use bold/normal in the same field it won't let you - because Flex identifies the bold version of a font by font-weight:

                                                @font-face
                                                {
                                                fontFamily: "Comic Sans MS";
                                                fontWeight: normal;
                                                fontStyle: bold;
                                                src: url("/assets/fonts/fonts.swf");
                                                }
                                                @font-face
                                                {
                                                fontFamily: "Comic Sans MS";
                                                fontWeight: normal;
                                                fontStyle: bold;
                                                src: url("/assets/fonts/fonts.swf");
                                                }

                                                Annoyingly, when you embed using the local() method it works fine:

                                                @font-face
                                                {
                                                fontFamily: "Comic Sans MS";
                                                fontWeight: normal;
                                                fontStyle: normal;
                                                src: local("Comic Sans MS");
                                                }
                                                @font-face
                                                {
                                                fontFamily: "Comic Sans MS";
                                                fontWeight: bold;
                                                fontStyle: normal;
                                                src: local("Comic Sans MS");
                                                }
                                                • 21. Re: Bullets fail to appear with embedded fonts
                                                  rtalton Level 4
                                                  OK, I tested this on my system and embedding Comic Sans MT via a SWF works normally.
                                                  Note that fontWeight is either normal or bold; fontStyle is either normal or italic.
                                                  Make sure you are verifying the correct Font Name by opening the two fonts using the Mac's Font Book application.

                                                  Here is some code to test it, but you need to create the SWF as I detailed as I can't attach a file here at the Forum.
                                                  • 22. Re: Bullets fail to appear with embedded fonts
                                                    Hey, apologies for the delayed response. Had to celebrate Australia Day in style!

                                                    Perhaps we have slightly different font sets? The swf you sent me works fine in my Flex app (and saved me another 80KB - thanks!).

                                                    On my Mac the 'Comic font' is called "Comic Sans MS" and I retried creating a new FLA and got the same result. Also, in "Font Book" (the built in OSX font explorer), this font shows the following:

                                                    normal/regular:
                                                    PostScript name ComicSansMS
                                                    Full name Comic Sans MS
                                                    Family Comic Sans MS
                                                    Style Regular
                                                    Kind TrueType

                                                    bold:
                                                    PostScript name ComicSansMS-Bold
                                                    Full name Comic Sans MS Bold
                                                    Family Comic Sans MS
                                                    Style Bold
                                                    Kind TrueType

                                                    Annoying that you can't attach files/images here - so I emailed you the appropriate pics & swf.