Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I prevent text displacement for some foreign language fonts?

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?

like image 529
weltraumpirat Avatar asked Jan 03 '11 10:01

weltraumpirat


3 Answers

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!

like image 157
nwinter Avatar answered Oct 27 '22 10:10

nwinter


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.

like image 44
Mihai Nita Avatar answered Oct 27 '22 11:10

Mihai Nita


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

like image 30
evilReiko Avatar answered Oct 27 '22 11:10

evilReiko