I want to note that this post is focusing on Runtime Font sharing using Asian fonts but many of the solutions shown here should be considered best practice for any character set. I will try to relate the ideas in a way that cover both Japanese Fonts and English Fonts for Runtime Sharing in Flash. Using shared font libraries was much more of a headache than I had imagined. Also note that all guidelines with regards to Flash and ActionScript practices here can be used for English Fonts as well. The database and char set operations may not be as useful and can most likely be overlooked.
Using Asian font outlines on the web has always caused us problems. Especially when running data driven web sites and applications. The bulk of the problem comes from the problems created by character encoding.
Typically, Asian web sites will use their native text encoding. In Japanese, for example, we would use ‘Shift_JIS’ character encoding to ensure all glyphs display properly. The same would hold true for Chinese. This solution is fine when dealing with static web publishing. Problems start to arise when we need to push data into these web pages.
The majority of databases and server side languages cannot handle character encoding issues easily. For the most part, the web is made in English. Almost all web based software and servers were written originally in English. This means any other language is merely an add-on to that system. An add-on that was not originally intended. Some software, like word press, handles these language additions very well. Others, like MySQL, do not.
This page is meant to approach a solution to character encoding issues that arise when using Asian font faces. More specifically, Japanese.
Here is a breakdown of this page and the issues I will cover.
- Japanese character encoding in general with web technology
- How to ensure proper encoding with MySQL.
- Displaying Japanese characters
- Saving Japanese characters
- Url encoding and decoding to ensure proper data retrieval
- Loading Japanese Fonts into Flash using AMFPHP and best practices for using Shared Font libraries
- Using Japanese Fonts in Flash OR “What’s the difference between A and A?”
Before I continue. I want to mention that This tutorial is for Action Script 2.0 only. I will be doing some research into an Action Script 3.0 translation. For the time being I can only provide details and support for Action Script 2.0 only. Thank you.
Japanese Character Encoding
‘Shift_JIS’ is a classic enemy of building websites in Japanese. I will only touch briefly on this here but will cover it more deeply in the Japanese version of this page.
If you intend or plan to build a website in Japanese ‘UTF-8′ is my recommended character encoding. If you are only using static HTML pages, then by all means feel free to use ‘Shift_JIS’. Only when you build a dynamic website or have any data-driven content you must use ‘UTF-8′! During one job I went ahead thinking I could run one page in UTF-8 and the rest in Shift_JIS but I found that I was wrong. This problem I am still dealing with but, I had a dynamic <div> on a page. I was loading data into that page. When I changed the text encoding to UTF-8 the page disappeared…. I do not know why. I will follow this up if I figure it out.
Proper Text Encoding in MySQL
It is always important to have the newest version of MySQL as well. I work with MySQL 5 which gives me for character encoding options not only in my databases but also in rows that hold strings. This is very important for working properly with Japanese fonts.
Another important issue with MySQL and Japanese is the collation of the Database. Typically, when you create a database the collation defaults ( in many cases ) to a Latin script or character set. Something like swedish or any other ASCII character set. This is a big problem. This is why we need to work with the latest version of MySQL and phpMyAdmin. We need to be able to set the collation for the database that we are creating.
We also need to set the collation for any row that is holding a string. The rows you create will usually be set to some default ASCII char set. We need to change this to UTF8.
Displaying Japanese Characters
This section is not as important as the rest but I just wanted to touch on this subject. I almost always use AMFPHP to power my data driven Flash websites. AMFPHP has a specific gateway file that Flash connects to in order to make use of PHP classes and data structures. Inside this file is a Text charcode setting. In order to properly display Japanese fonts we need to change the setting to UTF8. UTF8 is the only way Japanese characters can be displayed on both Japanese computers and English computers.
Displaying Japanese characters in HTML / PHP files is similar to Flash. Only we need to change our character encoding in the HTML file to output UTF8 characters.
Saving Japanese Characters or “I can see the Japanese in the website but when it loads from the database is all messed up?”
This has caused me many problems. Saving Japanese from an HTML page or a Flash page to a database can be very tricky. If we follow the common rule of ’setting everything to UTF8′ then we shouldn’t run into problems. There are however some issues with HTML and saving Japanese characters to a MySQL database.
I have found that if your MySQL text encoding is set properly to UTF8 and the HTML output is UTF8 then when you save the data, it should be preserved. Although I have run into a few pitfalls here, usually when viewed on Japanese systems set to a Shift_JIS default setting. I’m going to skip over this bit because it relates mostly to HTML and PHP instead of Flash.
If you are saving Japanese characters from Flash to a database I highly recommend using AMFPHP and setting the gateway to use UTF8 as default. If you do this, there should be no trouble at all.
Url encoding and decoding to ensure proper data retrieval or “I can load the data but Flash can’t find the file?” or “I can load the data but it says the Font file doesn’t exist?”
This was a major issue when dealing with data retrieval. I’m talking about grabbing the fonts from the database and using them directly in a text field. So you have a table that is a big list of Font faces. You pull that list into Flash and for each item in the list you need to load the font files and then display the font in the text field. Now, I have discussed this issue in detail in another post, you can find that information here : link
That post should give you all the technical details you need in order to resolve any problems that arise from sending Japanese characters over the wire to retrieve data.
Loading Japanese Fonts into Flash using AMFPHP and best practices for using Shared Font libraries OR ” I load my shared library but the text doesn’t appear on the stage?”
So we load the shared library and its counter part, that library that exports the font. Remember, we need to load both, the importing library so we can actually use the font and the exporting library so we can manage the timing of the load. There is yet another pitfall here. The monitored load isn’t always timed exactly the same as the time it takes the loaded SWF to import the shared font!!!! what the f#@^?
How can we be sure the font loads and is properly loaded before we actually try to use it? We need to use a loop! So, the sequencing of this process works like this:
- Load the shared library ( SWF ) that imports the font face. This also contains the trigger for the callback function.
- Simultaneously load the library that exports the font face. This will be a heavy file. With Japanese it’s over 4MB and up to 22MB!
- Set the callback function to trigger a BOOLEAN that changes from FALSE to TRUE when the method is called.
- Set a loop in the onProgress method of the load that monitors the state of that BOOLEAN
- When the BOOLEAN is actually TRUE
- Set an Interval that runs a 2~5 second delay
- Allow the script to move on and create the text fields.
This sequence for loading Shared Font libraries is definitely a best practice. Even when using 20 - 100kb English fonts. Sure 20k loads instantly on your super hyper speed fiber optic internet connedtion. But! But, for someone who wants to buy your clients product in Thailand…. well, you better be sure those fonts are loading and displayed!
Using Japanese Fonts in Flash OR “What’s the difference between A and A?”
Okay, so I have followed all these steps and they all work fine… BUT my fonts are still not showing up. I see the movie clips are created and the text fields as well but no text, no fonts, nothing!
Well, this problem is more Japanese specific. The problem comes from the computer settings. The Font file on your machine holds the proper name of the font face. But when you display that name in Photoshop or software like that, that software is written in English and will not properly display that font’s name. So, when you copy and paste that name to your database you are not actually copying the proper name. The best way to know if you are getting the proper name is to paste that name into a font manager and see if it returns any search results. It most likely will not.
The problem here is when you grab that faulty name from the database and try to use it in a text field, that font doesn’t exist. So it cannot be displayed.
What is the ultimate solution? Numbers!
Use your index column from the database to represent names as often as you can. If you can give it a number without repeating that number then do so. This will make the job of creating and using Japanese fonts and Shared libraries so much easier.