9 Replies Latest reply on Aug 7, 2009 6:22 PM by Flex harUI

    Embedded font issues -- Flex not measuring properly

    wrkoch

      I started this out in one thread ( http://forums.adobe.com/thread/470702 ) and it has progressed into a new, bigger issue. I embedded fonts using the code below.  Flex is not measuring them properly or the font I'm using is vertically challenged.  I suspect the font I am embedding has different vertical spacing than the default font.  I have determined the fonts are embedding by rotating the containers.

       

      Here's an example of what I'm getting:

        snap1.jpg

      The right side radio button is the raw display (height works out to 23), the left side radio button I forced the height to 15.  Both the radio buttons are set to exactly the same y coordinate.  You can see the right hand text is not centered on the radio button.  I don't want to go thru the hassle of adjusting every single component height to make the font look centered plus that's an ugly workaround.

       

      I don't think there is anything wrong with my code nor do I think a font swf will help.  I sure would like to know what's going on but it is beyond my understanding.  Here's my thought.  I like the default font the compiler uses when I DON"T embed fonts, looks like this:

       

      snap.jpg

       

      I figure if I could embed this font, everything would work properly.  I just don't where this font lives.  The docs indicate the default font is _serif but it looks more like _sans to me.  And I don't know the hierarchy for my platform.

       

      So...  Does anyone know either how to fix this measurement issue or where I can find THE True Type font or swf or something that Flex uses as a default so I could embed it?

       

       

       

      /* CSS file */


      @font-face {
      font-family: MainFont;
      src: url("assets/fonts/verdana.TTF");
      unicode-range: U+0020-U+007E;
      advancedAntiAliasing: true;
      }


      @font-face {
      font-family: MainFont;
      src: url("assets/fonts/verdanab.TTF");
      unicode-range: U+0020-U+007E;
      advancedAntiAliasing: true;
      fontWeight: bold;
      }


      @font-face {
      font-family: MainFont;
      src: url("assets/fonts/verdanai.TTF");
      unicode-range: U+0020-U+007E;
      advancedAntiAliasing: true;
      fontStyle: italic;
      }


      @font-face {
      font-family: MainFont;
      src: url("assets/fonts/verdanaz.TTF");
      unicode-range: U+0020-U+007E;
      advancedAntiAliasing: true;
      fontWeight: bold;
      fontStyle: italic;
      }


      global {
      font-family: MainFont;
      }

        • 1. Re: Embedded font issues -- Flex not measuring properly
          Flex harUI Adobe Employee

          In the snapshot, even the radio position was different so it is hard to say what is going on.  Did you have some correction logic running?

           

          Unfortunately, fonts have some "fuzziness" to them.  The font designer specs ascent/descent/baseline, but is not required to place the glyphs right on those numbers.  We commonly see one or two pixel shifts when switching from OS rendering to embedded rendering.

           

          You might just have to apply a correction.  We chose Verdana in part because it has the least skew, but it does move some.

           

          Alex Harui

          Flex SDK Developer

          Adobe Systems Inc.

          Blog: http://blogs.adobe.com/aharui

          • 2. Re: Embedded font issues -- Flex not measuring properly
            wrkoch Level 1

            First off, yes there was a correction to the left hand radio button.  I forced the height of the button to be different and that seemed to help center things

             

            After a bit of beating my head against the way, I decided to run a simpler test.  I set up a case where I had default fonts side by side with embedded fonts.  Since my default.css file had Verdana I decided to use a Verdana embedded font.  I figured I could compare them directly and maybe play with advanced anti-aliasing at the same time.  I've attached the files (change the txt extension to mxml)

             

            The result was a somewhat of a surprise.  I didn't realize that all text really wasn't centered on the component (eg radio button, checkbox) at my default size and below.  I do see the small pixel shift, especially in the Button.

             

            So...  I have found the "real" font declaration in the defaults.css file, am seeing the small pixel shift with embedded fonts, that using advanced anti-aliasing  can help on smaller text, and realized I have to be very careful where I use font sizes smaller than default.  I'm guessing that the "perfect" default size on my system would be 12 since that appears what my Verdana.ttf font is based on.  My defaults.css file has the font size set at 10.  The inability to measure properly is exacerbated when the fonts are embedded.

             

            Now the real question -- anyone have a clever fix?

            • 3. Re: Embedded font issues -- Flex not measuring properly
              Flex harUI Adobe Employee

              I'm not sure what folks have done.  Have you searched the web?

               

              Alex Harui

              Flex SDK Developer

              Adobe Systems Inc.

              Blog: http://blogs.adobe.com/aharui

              • 4. Re: Embedded font issues -- Flex not measuring properly
                wrkoch Level 1

                Extensively.  I can find a lot of stuff on how to embed fonts but nothing that corrects the pixel shift due to embedding fonts and nothing on how to correct when using smaller font sizes (embedded or otherwise).

                 

                I also checked the bug system and saw nothing there.  I probably will put one in just to get it logged.  This really should be fixed.

                • 5. Re: Embedded font issues -- Flex not measuring properly
                  Flex harUI Adobe Employee

                  Well, in Flex 4 you can adjust your skins to handle the difference.  That's going to be our "answer".

                   

                  Alex Harui

                  Flex SDK Developer

                  Adobe Systems Inc.

                  Blog: http://blogs.adobe.com/aharui

                  • 6. Re: Embedded font issues -- Flex not measuring properly
                    wrkoch Level 1

                    Well, for those of us in Flex3 who will probably not go to Flex4, that really doesn't help.  Putting off fixes to a new version that's going to cost money and that I have to re-write all my code for is not a real solution.

                     

                    I'll keep searching the web and hoping Adobe decides to support us.

                    • 7. Re: Embedded font issues -- Flex not measuring properly
                      Flex harUI Adobe Employee

                      The answer for Flex3, unless the web eventually turns up a better answer, is subclassing and adjusting the label positiong in updateDisplayList override.  The problem is that we don't have any way to automatically know how many pixels to shift.  Some Arial fonts are two pixels off, some artsy fonts actually shift the other way.  We looked at adding offset properties or styles to every component, but that would reduce performance, and if we did that, there'd be no way to opt out of the cycles spent considering the offsets.

                       

                      But sure, file the bug. Maybe there'll be enough votes to get us to make every one pay for offsets.

                       

                      Alex Harui

                      Flex SDK Developer

                      Adobe Systems Inc.

                      Blog: http://blogs.adobe.com/aharui

                      • 8. Re: Embedded font issues -- Flex not measuring properly
                        wrkoch Level 1

                        Will do.  I do understand the issue with there being numerous fonts.  I see your point about trying to fix the world. 

                         

                        I'll look at subclassing but I'll confess my confidence in my abilities is not that high to start mucking about with overriding your measurement routines. It just would be nice to have some "standard" fonts fixed or at least some canned code that we could adjust ourselves for our individual font choices (maybe by making an "adjustment" in the global style).

                         

                        If I find anything or figure something out I'll post it.

                        • 9. Re: Embedded font issues -- Flex not measuring properly
                          Flex harUI Adobe Employee

                          I'm not sure you really need measure to be perfect.  I'd first just try overriding updateDisplayList.

                           

                          It should be as simple as:

                           

                          override protected function updateDisplayList(w:Number, h:Number):void

                          {

                               super.updateDisplayList(w, h);

                               textField.move(textField.x, textField.y + 1);

                          }

                           

                          Alex Harui

                          Flex SDK Developer

                          Adobe Systems Inc.

                          Blog: http://blogs.adobe.com/aharui