CODEWITHSUNDEEP
iosiphonearabicarabic-support
Learning
Learning

Reputation: 20051

Arabic font breaks on iOS app

We are working in iOS app and we are using "Adobe Arabic" and "Tahoma" font.

Both fonts in some area break. For example

Tahoma breaks by adding space between in a single word as shown in image belowenter image description here

Not sure why this is happening for some works. We have similar issue for Adobe Arabic for some Arabic text

Mostly font breaks when using verses from quran "بِسْمِ اللَّـهِ الرَّحْمَنِ الرَّحِيمِ" otherwise it is fine... That is when ever we add tajweed font break by adding space.

What could be the possible reason for this

Upvotes: 4

Views: 1499

Answers (3)

user2662006
user2662006

Reputation: 2294

Try these in your css

font-family: "Traditional Arabic", "Montserrat","sans-serif","Times New Roman";

Upvotes: 0

Medhat
Medhat

Reputation: 134

Try this line in css:

.element {
  letter-spacing: -1px;
}

It works with me.

Upvotes: 0

Assem
Assem

Reputation: 12107

As I see, its failing to render diacritics. Diacritics should be merged to their previous letters in Arabic. In your example, it breaks with the Shada diacritic ّ :

enter image description here

It happens mostly in Quranic verses because they are fully vocalized compared to normal texts.

A solution is to normalize your texts and strip diacritics. The list of diacritcs is:

// Diacritics
'0x64b' // FatHatan
'0x64c' // Dammatan
'0x64d' // Kasratan
'0x64e' // FatHa
'0x64f' // Damma
'0x650' // Kasra
'0x652' // Sukun
'0x651' // Shadda

The normalization is recommended for normal text but not Quran verses since its considered as a holy text and recommended to be written as fully vocalized Uthmani script. You may use pre-rendered images.

A deep solution is to use a rendering engine like harfbuzz. It renders Arabic perfectly.

Upvotes: 4

Related Questions