How to Embed Thai Fonts in eBooks

So the world's best looking Prime Minister, Yingluck Shinawatra, was recently elected here in Thailand, and she made a campaign promise that every Primary school student (grades K-6)  in Thailand was going to get a free tablet. This was billed as a way to improve education in the Kingdom, and not so my Thai kids would have their own device to play Grand Theft Auto 24/7. People making promises in Thailand, and then not following up on themm is a standard practice in the Land of Smiles. No one wants to lose face and say, "Hey, Khun Yingluck, why don't my 4 kids have their free tablets yet. What's the story?"

However, the press are holding Ms. Yingluck feet to the fire and bugging her about the status of these free tablets. Here's an excerpt from The Nation:

As everybody knows, most if not all tablet computers can function as an e-reader. Although a lot of students are already using free textbooks, having them all in one tablet will make things considerably more convenient. This way, the children will be able to carry "all their books" with them "all the time" in one small, thin and light device. They will be able to read more - not just textbooks, but other books as well. And any generation that reads more will grow up to be smarter than a generation that has read less. It's as simple as that.

We'll see whether or not my son decides to actually read something that isn't Japanese cartoons dubbed over in Thai. My own family aside, this populist policy could be a boom for eBook providers like Asiabooks. Unfortunately, eReading devices are still mired in the ancient era of web design. It's almost like going through a time warp to 1995 when everything on the internet was Captain Kirk Fanfic and porn. Therefore, it's a real pain in the rump to get complicated languages (like Thai) to read properly on eReaders.

There's no word yet on which tablets (if any) the Prime Minister will be providing Thailand's kids, but at a press conference during her campaign, Ms. Yingluck held up a Samsung Galaxy Tab. The Samsung tablet runs on Android, so it can support a wide variety of apps and read all the standard formats like EPUB and MOBI. However, the problem is making sure the apps will be able to recognize the Thai language. To make sure that it works, you need to embed fonts into the EPUB package. If you have no idea how an EPUB file works, I'll do a full tutorial later, so please stay tuned.

Trying to type in Thai inside the content HTML files of EPUB is no problem. If you use a text editor like Notepad++, you simply set the encoding to UTF-8. I entered a paragraph from our school's website into Notepad++, and everything is looking good.

However, re-packaging the HTML content into EPUB, and opening up your EPUB file in a standard eReading app like Adobe Digital Editions yields a bunch of question marks:

To get around this you can add a font as an item into the EPUB's content.opf Manifest section. I selected the Garuda Thai font, which is available for free on this website. The code inside the Manifest section would look like this:

<item href="garuda.ttf" id="whatever" media-type="font/truetype" />

Now you need to declare that this font exists in your CSS stylesheet as follows:

@font-face {font-family: "My Thai Font"; font-weight: normal; font-style: normal; src: url(garuda.ttf); }

You can now use the font-family: "My Thai Font"; style anywhere in your XHTML or CSS. This can be in-line with a span tag or across the entire body.

To use this Thai font in your entire body, you can add this code to your CSS:

body { font-family: "My Thai Font", serif; }

To use it in-line or in paragraphs you could define a class in your CSS. Here is an example:

.thai { font-family: "My Thai Font", serif ; }

The serif; is the fallback font in case the eReader can't recognize "My Thai Font" for any reason. Make sure you define the "My Thai Font" classes after you declare the font with @font-face. Now you just need to go use the class="thai" attribute in whichever tags are wrapped around the Thai.

So we've done 5 steps to embed and use our Thai font inside our EPUB:

• Copy the garuda.ttf into the same folder as the content.opf
• Declared garuda.ttf in the Manifest of the content.opf
• Declared the font garuda.ttf exists and labeled it "My Thai Font" in our CSS
• Defined a class "thai" that can be used to show the "My Thai Font" in our CSS
• Applied the class="thai" attribute in <p> tags around the Thai text

Let's try repackaging the EPUB and see how it looks in Adobe Digital Editions:

Well this is unfortunate. The Thai shows up, but it is not reflowable. Look how the Thai just runs off into the nether regions behind the right margin. Until Adobe gets this fixed, there's really nothing we can do.

Luckily, the Firefox EPUB reader add-on is free, and recognizes the Thai text to make it reflowable:

So if Thai schoolchildren are planning on getting a bunch of tablets, I hope they know how to install add-ons for Firefox. That or they know how to write angry letters to pester the folks at Adobe.

How to Embed Thai Fonts in eBooks