Fixing Web Font Padding Issues on Linux/Mac/Android Browsers

Recently I came across an annoying issue with web font (@font-face) in which the text does not appear vertically center within buttons or inputs (see image). Google around, I found that not all web fonts are affected, this defect seem to occur only on Mac/Linux and may vary in different browsers and is commonly referred to as "web font padding issue".

It's interesting enough that although the issue is quite common and has been reported several times but there seem to be no absolute solutions. Most suggested the workaround to set uneven padding to compensate for the shift. I have struggled so much with workarounds for this especially the padding didn't help to correct the alignment across browsers and devices (I preview my app in Chrome/OSX but it runs on iOS Safari and Android browser) so I decided to look into the issue again and thought about typography metrics problems.

Honestly, I know very little about typography and font metrics. I used FontForge (which happens to be easily installed on Ubuntu) to tinker with the troubling font file. After a few hours, I have discovered the problem when I tried to replicate the settings of another good font on the defective one. It was one of my Eureka moments!

Flash on multiple screen demo

2011 undoubtedly expects the multiple screen applications trend. Flash platform is one of the best solutions to deliver same experience across multiple devices and platforms. Here is a demo of Flash-based games on multiple (device) screens: PC, iPhone, iPad, Android phone (Motorola Milestone 2), Android tablet (Samsung Galaxy Tab).

All the coding effort is credited to my Flash team. The iOS applications were created by using Flash CS5’s iPhone Packager. I repackaged the Flash builds to AIR for Android using Flex SDK Hero. Some of the applications are not complete and/or Android-optimized yet.

FYI, the video was created with Cinelerra, the most advanced non-linear video editor and compositor for Linux. (Quite close to Adobe Premiere, and require some learning curve)

Tips on encoding videos for Android using Adobe Media Encoder

As a Flash Professional user, you probably have Adobe Media Encoder installed on your computer. This is a great tool to encode videos not only for Flash video player but also for other H.264-enabled devices like iPhone and Android. However, when I tried to encode a video using a random H.264 preset, my phone (a Milestone 2) could not play the video. This means that not every export settings is compatible with the phone’s internal video encoder.

So which preset should we choose for the export settings?