Skip to main content

CSS & Arabic Custom Fonts on iOS

This one almost got me crazy !
I had to use custom Arabic fonts for one of my clients who requires a special version from his Flash website that works the same way on iPad ..
Of course the problem is that iOS do not support Flash Player, and it seems it never will ..

Fortunately, this project can be transformed to AJAX using jQuery, there’s no special features that works only on Flash Player, or at least that’s what I thought!

First issue I have crossed is using custom Arabic fonts, I did my search and I found the absolute fact about iOS ..

iOS supports only SVG as web fonts using CSS, and it requires a unique ID passed to each font!

Ok, I can live with that, I found this wonderful tool for converting my OTF/TTF fonts to SVG with unique ID, it works just fine, but ..
The problem pops-up for Arabic fonts as usual ! that service has an expert feature for entering a unicode range to be included in the output font, so I figured that since it does not seem to support Arabic language directly, I can just enter the Arabic unicode ranges required, in this case only 2 ranges are necessary for Arabic ligatures (0600-06FF,FE70-FEFE) ..
But it did not work properly, many glyphs are missing for some mysterious reason !

I gave it a bit more time for digging about this issue, and I found this JAVA command line tool that converts TTF to SVG, first test result was another failure !
At this point I was going to give up, but i just couldn’t !! and voilà, I caught the cockroach !
That ttf2svg tool won’t map any Arabic glyphs unless you define a decimal range for it, so I used the following command for Arabic only fonts:

java -jar batik-ttf2svg.jar foo.ttf -l 1536 -h 65278 -id foo -o foo.svg

And this one for Arabic/Latin fonts:

java -jar batik-ttf2svg.jar foo.ttf -l 0 -h 65278 -id foo -o foo.svg

The key is converting the hexadecimal ranges for Arabic glyphs to decimal values and pass it to that command, and since I have multiple ranges required for Arabic glyphs and that tool doesn’t let me pass multiple ranges, I just used first value from first range and last value from last range ..
That’s why when having Arabic only font you need to start with 1536, but when having Arabic/Latin font you need to start with 0 ..

One other way, more advanced one, is using FontForge, I had to edit the output SVG manually to set the UniqueID

<font id="XXXXXX"  horiz-adv-x="XXXX" >

And I had to add (xmlns=”” version=”1.1″) to the svg tag on top

<svg xmlns="" version="1.1">

The result is similar to the JAVA tool, something still wrong, many letters are misplaced and scrambled with the wrong glyphs, others remain missing !

You can check this example on your iPad, if you are Arabic speaker, you’ll get what I mean ..

I hope this helps someone out there who stuck at this issue when developing a compatible iOS website with custom Arabic fonts ..
I will keep digging about this, either I can find a work around or Apple simply releases an iOS update that renders Arabic SVG fonts properly ..

By the way, that article about Apple improving iOS support for web fonts even in TrueType, it never worked for me !

Update: final solution available here

Leave a Reply

Your email address will not be published. Required fields are marked *