Flex Text Handling Leaves Something To Be Desired
My first commercial project to built in Flex may have to go back to being built in Flash now. I’d like ideas on how to fix this crazy issue I’m seeing with embedded fonts. After embedding the font Trajan, a small caps style font, (which must be used as part of the project due to client identity specifications) in my project’s main application I have noticed that the text simply renders incorrectly. The top 3-5 pixels on extenders for all capital letters is cut off. Take a look:
That example is when the font is directly applied to the element in the the MXML of the Label or Text Control. (I tried both). I have tried it the element having a padding on the top and on the bottom. I have tried editting the elements height to be much larger than the type size to fit the text in. It gets a bit stranger though… look at this example:
Now look at that! That example is styled via the stuff in the mx:Style tags only. The extenders on the capital letters render correctly, but the rest of the type looks like it was carved with a knife. Not acceptable.
So, how can anyone use Flex when the design is just as important, if not more important than the functionality. In this case, I was planning to use Flex to develop a text display engine for a digital signage like display. Typography is one of the main focuses of the app.
Anyone have any ideas on how to fix the symptoms I’m seeing here? I’d still like to use Flex if possible, the AS3 animation tests I ran were much smoother than the AS2 tests I ran. This is to be displayed on a Quad head¬† ATI Fire MV card with 4 32″ LCD displays, so it’s going to be big enough for people to notice any sort of issues with the type displays.
Posted on September 8, 2007
Paul Kleppner Sep 8
I don’t know what’s causing the particular problem you’re seeing, but here’s some general advice on diagnosing problems with embedded fonts … It’s easy to get confused about whether Flex is really using the embedded font you want, vs. a system font, particularly if the font you’ve embedded is also installed on your machine and available as a system font. One way to be sure that an embedded font is being used is to apply an alpha or rotation to the text: that only works with embedded fonts.
Embedded fonts also support the advanced antialias options, which allow you to alter grid fitting and sharpness. Conceivably these would help you with this issue. (If you find those options aren’t making any visible difference, then you’re not using an embedded font, or the “embedded” option isn’t getting set correctly on the text field.)
Daniel Wabyick Sep 8
Hmm, I have definitely never seen that before. At what point size is the font that you are trying to use? It is possible that there is a bug with something in the Flex framework. What component are you using?
Also, if you haven’t tried it yet, I would recommend the Flex Builder 3 public beta. It may magically fix your issue.
By the way, developing Flash apps for very large displays (greater than 2880×2880) can be tricky. That is the size limitation as to how big a single bitmap can be. I don’t think it should affect a text object, but I would definitely do some testing past the 2880 limit, regardless of whether you use Flash or Flex.
Chad Sep 8
Paul and Daniel, thank you both for your comments.
Paul, I have tested the fade of the text, so I do know that the font is indeed embedded: http://visualrinse.com/flash/fontTest.html
I have also messed with the sharpness, but not grid fitting… what attribute would that be I need to edit to check out if affects the font rendering?
And Daniel, the font is currently 40pt, but I have messed with from 50pt on down to 12pt… the project is going to require 50pt.
I have the Flex 3 Beta, but was reluctant to use it for production work, I’ll try it this afternoon, maybe.
My canvas size for the final project is 2720×1536, just under the 2880 limit you mentioned.. I was aware of that size limit from Flash, I had tried doing some big stages in the past with Flash and ran into that ceiling.
Again, thanks both of you.. anyone have any other ideas?
Brent Sep 8
I’m assuming the version of Trajan is a .TTF that’s being embedded. Not sure if this would help but I was having a number of difficulties using a .PFM/.PFB typeface. Tried using the local() (couldn’t find the installed typeface), [embed] (appears to only accept .TTF’s?), but finally ended up embedding the typeface in a flash document and importing the SWF as a linked library into Flex. I sure wasn’t pretty, but it works fine.
Are you setting the font through CSS or TextFormat?
Chad Sep 8
Trajan is an Adobe Font Folio Open Type Font. I am embedding it like this (the source of my entire application at http://visualrinse.com/flash/fontTest.html):
< ?xml version="1.0" encoding="utf-8"?>
@font-face {
src: local(“Trajan Pro”);
fontFamily:Trajan;
}
.header {
font-size:40pt;
color:white;
fontFamily:Trajan;
paddingTop:20px;
paddingBottom:20px;
fontSharpness:0;
}
madcream10 Sep 9
Font file could be quirky.
I found that some rendering problems go away when I install a different format: TrueType,OpenType,PostScript…
Rendering issues also change with platform: Mac, PC…
Regardless…since the font is embedded, I suspect that once compiled to SWF, it will stay true to form.
I hate font files and the way MS handles them.
Chad Sep 9
MacDream, I am on a Mac. And those screenshots are taken from the compiled SWF file. You can actually see them at: http://visualrinse.com/flash/fontTest.html
Eric de Groot Sep 9
It’s pretty sad isn’t it? Font rendering problems coming from an Adobe product! I’ve run into those clipping issues too and it’s so frustrating. It happens with some italic fonts as well, the last letter will clip because the text field doesn’t size properly.
Chad Sep 9
yeah, and it’s an adobe font, nonetheless… Eric, did you ever find a solution to fix the rendering issues you found?
Carl Sep 12
Hey,
Got the same problem using embedded fonts. I tried a vast array of different fonts (from some household names like Arial and Helvetica to some obscure free fonts i found free online) and they all do the choppy. I noticed that the problem comes from “rolling up” my fonts into swfs. When compiling my fonts into swfs in flex, i opened up the resulting files in ASV and saw first hand the chopped fonts. So i tried producing the font files from flash cs3 but alas, that too, gave me the choppy. I don’t have a solution in sight yet but the following conclusions could help you or others figure out where the problem is exactly:
-The swf files resulting when embedding fonts as classe both in flex 2.0.1 or flashCS3 are chopped.
-All the chops on all the letters are NOT random: If the small “o” in helvetica set gets chopped in the upper right quadrant once, it will always be chopped there.
-Setting flashType option on or off in the embed declaration doesnt seem to change anything.
-Size of the embedded font doesnt seem to change anything either
here is a screenshot of a font displayed in flex after being embedded in a manner similar to what you are using: http://coresplit.com/files/test.jpg
also you might wanna read up there: http://blog.scottgmorgan.com/php/default.php?topicID=170&contentID=739&rowID=169
Jason Sep 26
Alternate SOLUTION(on MacOSX):
Edit BASELINE property of otf Font File
I had same problem using Flash CS3 (with Trajan Pro Bold).
— Solution —-
- Installed X11 (from your OSX install disc),
- downloaded & installed “FontForge” for mac.
1. Run FontForge and open a COPY of the TrajanPro-Bold.otf file.
2. Goto ‘Element’ menu > ‘Font Info …’
3. Goto ‘OS2′ section
4. Goto ‘Metrics’ tab
5. Change ‘HHead Ascent Offset’ from “-235″ to “-180″ or a similar number. (this will change the baseline & linespacing for the fontface you are editing)
6. Click OK
7. Click & drag from the first character in the fontface to the last one you want (ie. drag from “0″ to “Z”) to select all the glyphs(characters) you want. (I’m not sure if this step(7) is necessary, but I had a few weird errors, so I’m repeating my exact method that gave me success)
8. Click ‘File’ menu > ‘Generate Fonts…’
9. Give your new font a file name (note: this will not change the Font Name your system displays when you install the font…that will be something like TrajanPro-Bold regardless of actual filename)
10. Click the first box under the filename field: choose ‘OpenType (CFF)’ format
11. Click ‘Save’
12. Click ‘Save’ again if validate feature warns of any errors
13. Remove your old font to a safe location
14. Install new modified font you just saved.
15. Open your application and change the text fields to use the new font face.
16. Embed this new fontface in flash by clicking the Library mini-menu and choosing ‘new font’
Hope this helps.
Cheers,
J
Jason Sep 26
Better QUICK Solution in Flash CS3:
1. Create the embedded new font in your library.
2. Change your text field type from ‘Static’ to –> “Dynamic”
– you may have to resize some text fields
– make sure to choose “multi-line” if appropriate
3. Change font face for text field to the one your created in your library (it will have an asterisk * after the name ie. font*)
4. Click the “Embed” button on the property inspector. Choose the character sets you need embedded. (ie. A-Z, 0-9, etc).
—-
That’s it.
Hope this helps,
J
JabbyPanda Oct 19
FYI, Flex 2 does not support embedding of Open type fonts
http://flexwiki.adobe.com/confluence/display/ADOBE/Flex+3+Planning#Flex3Planning-OpenTypeFontEmbedding
Open type fonts embedding should be added at “Flex 3
M3 Release (Beta 2) РFeature Complete” release, which was made public at Adobe MAX 2007 conference.
Saul Oct 9
Chad,
Well, where do we start with Flex and bugs. This product is so buggy its unbelievable and completely unacceptable.
My problem: Fading my embedded font, got it all working (i thought). Then i started playing with color style. When i use anything above say #ccc the font fades in fine then it seems to jump to bold in the panel title and text even though i’ve set all values to normal, even though i embedded just normal through swf. Its like i want to utilize this technology but when you have so many issues that either take gross amounts of time to workaround or simply do not work its simply pityful. Where’s the firing squad! And, i spend all my time friggin empathising in my quest to find solutions, which at this time may not even exist. Anyway bk to the process. Never give up though, there is most usually a way or compromise.
lee probert Jun 1
I have a similar problem with the baseline of Myriad Web Pro … it sits slightly higher than normal and means having to tweak all your components to nudge it back. I’m going to try embedding the font in Flash CS4 and then importing the font from the SWF. Will report back with the results.