Font Embedding for Localization

I got to do some pretty extensive research and experimentation with font embedding for one of the projects I did for Hasbro a while back.  Here are the notes I made while working on this project.

Disclaimer: The notes need to be cleaned up further for easier reading but I hope you can still garner some useful tips from them.

1) Flash Runtime Sharing

Steps:
Create EmbeddedFont.fla
- Embed characters for textfields, and wrapped inside a movieclip symbol
- Export the movieclip symbol for runtime sharing

Create ImportEmbeddedFont.fla
- Import the movieclip symbol for runtime sharing

Create Main FLA
- Load ImportEmbeddedFont.swf
- Apply CSS on text using font in ImportEmbeddedFont.swf

Pros: No Flex or mxmlc needed.
Cons: Import/Export for runtime sharing is seldom used in the field, not sure if there is bug involved with this (there was a bug with Flash 8/AS2). What else?

2) Flash + Flex

Steps:
Create EmbeddedFont.fla
- Create textfields on stage, embed characters for textfields

Create ImportEmbeddedFont.swf using FlexBuilder
Embed fonts in EmbeddedFont.swf using FlexBuilder using [Embed] tag

Create Main FLA
- Load ImportEmbeddedFont.swf
- Apply CSS on text using font in ImportEmbeddedFont.swf

Unicode range can be specified by editing the UnicodeTable.xml. Changes will reflect in the Embed Characters dialog.

OSX: /Users//Library/Application Support/Adobe/Flash CS4/en/Configuration/FontEmbedding/UnicodeTable.xml

Win: C:\Documents and Settings\\local settings\application data\adobe\flash cs3\en\ Configuration\FontEmbedding\UnicodeTable.xml

Pros: Client can embed characters from within Flash and use the AutoFill feature.
Cons: Flex or mxmlc is needed.

NOTE: Must use Flash 8 format for font FLA.

3) Flex only

Steps:
Embed character sets directly in code
(Can be embedded at class level or variable level)

To pick up changes, have to clean project before doing a build—could be a FlexBuilder bug.
(TODO: There was a bug in Flex 2 that made it such that font embedded this way cannot be kerned, what about Flex 3?)

Pros:
One-step process, no need to use Flash and Flex. Possible to automate entire process via scripts.
Cons: Flex or mxmlc is needed.
Need to specify font path on local machine, which could be OS dependent.
Unicode range must be specified manually and cannot be reused as easily. Also no Auto Fill feature.

DEV NOTE #1

There are two main issues I ran into going with this approach.

Bug #1

I experienced some issues transcoding Arial Unicode MS using the following standard syntax:
[Embed(source="./assets/Arial.ttf", fontName="Arial Unicode MS")]
public static var arialUnicodeTTF:Class;

Error I got:

Exception during transcoding: Unexpected exception encountered while reading font file
'/Experiments/EmbedFont Flash-Flex/src/./assets/Arial.ttf'

Fix #1
Add this compiler flag:
-compiler.fonts.managers=flash.fonts.AFEFontManager

Fix #2
Use a different syntax to embed (the font will have to be installed in the system for this to work):
[Embed(systemFont=”Arial Unicode MS”, mimeType=’application/x-font-truetype’)]
public static var arialUnicode:Class;

This fix doesn’t require the specification of font manager as in Fix #1. However, using systemFont seems to not recognize unicodeRange. So if unicodeRange must be specified, Fix #1 must be employed.

Fix #3
Embed using Flash.  Flash seems to be the most reliable way to embed all font types, including those not supported by Flex (such as PBM)

Bug #2

I changed the unicodeRange but the loading swf doesn't seem to pick up the change (the embedded font swf size has changed as it should)

Fix: Doing Project->Clean... before running the app fixes this.

DEV NOTE #2

unicode code range can be specified within Embed or in compiler flag.
Compiler flag:
-language-range specialCharacters
U+0020-U+007E,U+00B2-U+00B9,U+2070-U+2089

DEV NOTE #3
.dfont must be split into .ttf before embedding.  I use dFontSplitter: http://peter.upfold.org.uk/projects/dfontsplitter

4) Flash font symbol

Steps:
Create font symbol in library

There doesn’t seem to be a way (or I haven’t found one) to embed character sets using this approach, therefore this option is not pursued.

II) Localizations

- Need to have a way to know which locale info set to load.
Locale info set (a made up word, not a standard term) here refers to: the copy texts, the configuration xml file, and the font swf. In the case of Cavalcade, the copy texts and configuration are mixed together in one xml file.

We can get locale code in one or more of the following ways:

1) Passing it in the URL query string
2) Passing it via Flashvars
3) Specifying it in a config file
4) Querying browser’s locale via Javascript
5) Embedding the locale code in the name of the Cavalcade swf (this is not useful if we need to support dynamic switching of languages)
5) Querying OS’s language using Flash API capabilities.language (the method is rather limiting as it does not include country code for English, so we might forego this)

Is dynamic switching of language a requirement? (e.g. clicking on a button to change texts to a different language)

Localization involves more than just language, it involves date display, currency, etc. Are we concerned with these or just the translated texts?

We also need to consider how to encode the info specific to each locale (the CSS, copy and XML)

Possible approaches:
1) Put each set of files into a locale-specific folder

locale\en_US\cavalcade.css
locale\en_US\panel.xml

locale\en_CA\cavalcade.css
locale\en_CA\panel.xml

locale\ja_JP\cavalcade.css
locale\ja_JP\panel.xml

2) Suffix the files with locale id
cavalcade_en_US.css
panel_en_US.xml

3) A combination of (1) and (2)


Localization Copy

Current way of implementing copy is not optimal for translation.  String IDs should have been used instead of mixing in copy with actual configuration.

Consider using existing standard for localization such as XLIFF or something similar in spirit.
http://developers.sun.com/dev/gadc/technicalpublications/articles/xliff.html