23

I have a multilingual project (currently 13 languages), which uses many different font variations of "Helvetica Neue", mostly bold, condensed and regular cuts from the LinoType Pro font set ( which includes western european characters) and the same for cyrillic. We will probably add chinese and japanese variations in the future.

I have set up the project to use different CSS stylesheets and separately load the fonts for each version, depending on which language the user selects, so I can have different line heights, kerning and/or font sizes to make everything keep the original look, even if the fonts look nothing alike.

All of this works well, except for one problem: For some reason, all cyrillic letters seem to be displaced. They appear 2-3 pixels below the correct base line, and actually protrude across the textfield's bottom border, even when the field is set to autosize. When I use textfield.getCharBoundaries(), all values seem to be correct, even though they obviously aren't rendered correctly.

To make everything look neat, I could of course manually move all problematic textfields up or down according to language and font size, but I was wondering if there was some way to prevent or at least detect this kind of displacement in order to automatically handle the adjustments - the Flash Player should have some sort of information on how things are rendered, shouldn't it? Have any of you had similar problems? Or better yet: a solution?

Makoto
  • 104,088
  • 27
  • 192
  • 230
weltraumpirat
  • 22,544
  • 5
  • 40
  • 54
  • No. The project needs to be backwards compatible, so TLF TextFields are not an option. – weltraumpirat Jan 03 '11 at 14:23
  • 1
    I have had similar problems with font formatting and it was often my font file. If you can get the same font from another computer I would try that OR try a different font first (to see if it's just a messed up font file). – redconservatory Jan 03 '11 at 20:46
  • It is the original font pack my customers bought and downloaded from Adobe. Since the pack costs around $600, I really don't want to buy it again to have another sample for comparison... I have triple-checked the pack's validity with a number of font tools, none of which showed any errors. – weltraumpirat Jan 05 '11 at 09:51
  • 1
    Okay...checklist: Did you use UTF-8 for your xml file (if you are using XML)? Also when you emebedded the font, if you used a font.swf, did you embed all the unicode characters for Cyrillic characters? Did you use Helvetica Neue or Helvetica Neue Cyrillic? Did you create a new TextField on the stage and have at least one character in cyrillic on it? – redconservatory Jan 05 '11 at 16:50
  • All TextFields are generated from ActionScript, there are absolutely no objects on the stage. It's a font.swf containing Helvetica Neue LT Cyrillic, the entire font is included, and it's certainly not an embedding problem - all characters are rendered and readable from any computer, just slightly displaced. Yes, I used UTF-8, and the text is loaded as XML. – weltraumpirat Jan 05 '11 at 17:05
  • How do the glyphs look if you paste them into a textfield on the stage, I know you are creating them dynamically but it would be interesting to know if they look the same just by putting them in a static field. – Neil Jan 12 '11 at 10:03
  • They do. Both embedding directly into a TextField and creating a font symbol in the library produce the same glyphs. – weltraumpirat Jan 12 '11 at 11:30
  • 1
    Does the same thing happen with static text with these fonts? Also, do you have AI? What happens when you use the font in AI, and then export a SWF vs a PDF? – mpdonadio Jan 18 '11 at 22:07
  • I haven't tried static text. Will do that and post the result. AI and Photoshop render the font well. But both those apps offer ways to adjust vertical placement of text, which Flash doesn't, except for line height... $&§##+/"(§!, everything would be so much simpler if Adobe had only implemented margintop in Flash CSS! – weltraumpirat Jan 19 '11 at 02:20
  • If you have the textfield setting centralized (as I guess you do), you could eventually implement margin-top. Depending on the texts' complexity, it could be quite easy to do: body{margin-top:-10px;} --> css.getStyle("body")["marginTop"] – Cay Jan 20 '11 at 09:54
  • Yeah, I had thought about that, but the text's complexity is a real factor. :( I am dealing with tens of thousands of lines of text in chunks of varying sizes, and most of them have more than one style within a single text field. I figured manually moving the ten to twenty fields that look odd beats coming up with my own implementation of TLF ;) – weltraumpirat Jan 20 '11 at 11:04
  • do you think about RTL languages? those are right to left (persian and arabic) a simple text is این یک متن نمونه می باشد – amir beygi Jan 21 '11 at 05:35
  • Yes, that is quite possible. There will be a separate Layout for those, though. – weltraumpirat Jan 21 '11 at 08:46
  • This is likely not the source of your problem, but I figure it'd be worth mentioning anyway. I had all kinds of strange problems with font rendering (invisible characters, text that would intermittently disappear and then reappear on a completely unrelated redraw) when loading fonts externally using `Font.registerFont()`. After much debugging and hacking around the problem it turned out to be related to me registering the font ever so slightly before it was completely loaded. It showed up as it should in 95% of the cases and no errors were thrown, but it did not render properly. – grapefrukt Jun 18 '11 at 16:37
  • This is the first comment to this question that really makes me reconsider anything I've done so far. I'll check on loading completion and get back to you asap! – weltraumpirat Jun 19 '11 at 01:33
  • I just saw I never posted a reply... sorry. The fonts in the project are embedded into the main FLA, which is initialized *after* the load process is complete, and thus the problem cannot be related to the problem you described. I ended up manually moving the text fields, by the way. – weltraumpirat Sep 27 '12 at 11:18

7 Answers7

2

I had this problem for Chinese, but only in OS X versus Windows. I couldn't figure out how to automatically get proper metrics for where the characters really were, either. I ended up with a rough function which I called whenever I set up a TextField:

  public static function adjustPositioning(field:TextField):void
  {
    if(OS != "MAC") return;
    var fontSize:int = field.defaultTextFormat.size as int;
    field.y += fontSize/5;
  }

I was setting up all my TextFields in code rather than the IDE, so this was easy. I guess it's the solution you're not looking for, though!

nwinter
  • 61
  • 5
  • Unfortunately, this doesn't work. :( I have extended TextField to include some basic functionality I use often, so I tried adding a simple function like this. But the problem is that I can't find a common denominator like fontSize/5 - it seems the displacement is different for each font size, but I can't predict how much it is going to be: At size 11 it is 2 pixels, at size 8 it is also 2 pixels, but at size 10 it is only 1 pixel - go figure. So now I check for the language and add a hash with all those values to look up. But I've already done that - I was looking for a general solution. – weltraumpirat Jan 26 '11 at 15:03
  • 1
    Also as a side note you should do the opposite test, because the oddball is windows and not mac. Other platforms behave like the macintosh, so if you have the mac do something special your text will be displaced on other platforms, like linux. – Jean Feb 02 '11 at 10:01
2

Does your version of Helvetica Neue have glyphs for Cyrillic? If not, then you get font fallback and the font used for Russian is in fact not Helvetica Neue, but something else, with other metrics. And you will have more of this if you go to Chinese, because Helvetica Neue definitely does no contain Chinese glyphs :-)

On the other side, really-really consider TLF. It is way better for international support, and Flash Player 10.0 (which introduces TLF) is already more than 2.5 years old. Try to convince your customers that is unreasonable to ask for high level international typography with ancient technology. It is an either/or deal.

Mihai Nita
  • 5,547
  • 27
  • 27
  • You're right, but there is a Chinese cut for Arial, which is the one we use for this project. I have no say in what the customers want or accept - I freelance on this project, and the details are negotiated elsewhere. – weltraumpirat May 28 '11 at 10:19
  • And, of course, the font DOES contain the glyphs - they simply appear slightly displaced. – weltraumpirat May 28 '11 at 10:19
1

I've experienced similar problem with Arabic language. Seems like Adobe applications always have issues with non-English languages. In some languages, in Flash player the text look corrupted, but while playing the Flash in Flash Player the problem doesn't exist.

I'm not sure what could be the solution for your problem, but you can try some work around.

Try this work around, but it becomes more complicated: - on each keypress, insert the pressed character as an image. It could solve your problem, but it would take more time to write the code

evilReiko
  • 19,501
  • 24
  • 86
  • 102
  • 1
    In this case, the problem is the same both in the IDE view and in the binary. Thank you for the suggestion, but I was looking for a way to save time by not manually having to move displaced text fields up by a pixel. Creating graphical representations of all characters (in Russian, plus possibly several other languages to come, including Chinese) and programming a keyboard replacement to insert those on keyPress hardly seems a more efficient solution. ;) – weltraumpirat Jan 14 '11 at 10:00
1

I've had similar issues, and all solutions I've tried are quite complex, or have some drawback:

  • Use TLF. I know you don't want to, but it's a pretty safe (but complex) solution.

  • Don't use "readability" antialiasing, use "animation". Fonts will look worst, but their metrics should be a bit more reliable.

  • Try with cacheAsBitmap, or null filters (i.e. BlurFilter(0,0,0)). It will work in some cases, but not all.

  • Manually cache all textfields as BitmapData. This should show much more reliable metrics, but can be tricky. You can even fix this on the fly with getColorBounds to get the "real" metrics. But again, it's all very tricky, and needs a lot of testing.

Cay
  • 3,804
  • 2
  • 20
  • 27
  • Thanks for your answer, Cay, but most of these don't work for me. My customers want Flash 9 compatibility - so TLF is out of the question. I've tried changing antiAliasType, but that didn't help. Caching as Bitmap is on for some of the TextFields already, so that won't do much, either. I'll try the null filters, though, and get back to you when I know more. – weltraumpirat Jan 14 '11 at 21:24
1

It sounds like the font you are using has an actual error in the glyphs for cyrillic. So here's a brutally simple, but annoying solution. Edit the font. It sounds crazy, but there aren't that many Cyrillic glyphs, and you seem to want a single font. Edit it, distribute the corrected version, and you're done.

Fontforge is pretty decent, I'll bet you can edit the font in an hour once you're set up.

Dov
  • 8,000
  • 8
  • 46
  • 75
  • Incidentally, from what I understand of the law on fonts (which admittedly isn't much) you can't copyright the font itself, only the name. If that's true you can freely distribute the fixed font under a new name, but I'd appreciate hearing from someone who really knows about that. – Dov May 20 '11 at 19:20
  • My customers purchased and downloaded the font pack directly from the Adobe Font Store. I seriously doubt that a font as popular and often used as Helvetica Neue LT will slip their error correction routines and/or QA. Anyway - it's the full language pack, from Western European to Chinese variations, but ALL the cyrillic font cuts in ALL variations (condensed, italic, bold, etc.) have the same flaw. I am not going to manually edit all the characters in all those fonts. Then I'd rather just displace my Textfields - and I have. – weltraumpirat May 20 '11 at 21:21
  • Point taken, have you considered complaining to Adobe? They might fix it for you! – Dov May 23 '11 at 14:24
  • They recommend switching to Flash 10+ and using TLF TextFields - which I can't, for reasons mentioned elsewhere. I wouldn't expect them to issue new bugfixes for 5+ year old product versions, anyway. – weltraumpirat May 23 '11 at 15:58
1

Have you tried simply modifying the font to adjust for the 1px or so. Simply shift the letters upwards (or down) I didn't quite read everything that everyone wrote. Although I do not currently have it installed, I beleive my preference for editors is "Fontlab".

Kornel
  • 97,764
  • 37
  • 219
  • 309
Andrew Wolf
  • 11
  • 1
  • 4
    Welcome to StackOverflow. Since you're a newbie, I will not "punish" your answer by down-voting, but checking on what everyone else wrote might have been a good idea. Especially since I myself have mentioned several times that I have already displaced the text fields manually for the languages in question, but I am looking for a more general solution. Good answers on SO should always offer a valid solution, or at least convey a unique angle on how to solve the problem, since they are meant not only for the original poster, but for the rest of the world as well. – weltraumpirat Jun 19 '11 at 01:43
1

Have you tried using a fixed width font?

JohnnyBizzle
  • 971
  • 3
  • 17
  • 31