I am working on a mobile Quran application using the following stack:
- Expo 55
- React Native 0.83.2
- React 19.2
The goal is to render Quranic text accurately using specialized Quranic fonts, including the correct positioning of tashkeel and other combining marks.
Fonts
I am currently testing the following fonts:
The problem
The fonts render correctly on:
- Android
- Chrome
- React Native Web in Chrome
However, they render incorrectly on:
The main problem is the positioning of Quranic diacritics and tashkeel. Some marks appear on the baseline instead of being positioned correctly above or below the corresponding letter.
From my research, this may be caused by differences between the text-shaping engines used by each platform:
- Chrome and Android generally use HarfBuzz.
- iOS and Safari use CoreText.
It appears that CoreText and HarfBuzz handle the OpenType MarkToLigature GPOS lookup differently.
HarfBuzz seems to apply these lookups more leniently, allowing marks to attach to the expected ligature components. CoreText appears to require stricter ligature-component matching.
When CoreText skips the lookup, the marks fall back to a vertical offset of 0. This causes the tashkeel to appear on the baseline instead of above or below the letter.
Possible solution
I found an iOS application called Bayaan that appears to render Quranic fonts correctly.
It seems to use React Native Skia, which may allow Quranic fonts to be rendered without converting the text into SVG paths, while still supporting text-related operations.
I was also advised to investigate DigitalKhattV2, which was recommended as a better option for Quranic text shaping and rendering.
Questions
Is there a reliable way to make CoreText render these Quranic fonts correctly in Expo or React Native?
Can React Native Skia use HarfBuzz, or another text-shaping engine, instead of CoreText for text layout and glyph positioning on iOS?
Would using DigitalKhattV2 solve the MarkToLigature and tashkeel-positioning problems?
Is it possible to render shaped text through React Native Skia while preserving standard text functionality, including:
Text selection
Highlighting
Word-level interaction
Line wrapping
Searching
Accessibility
Do the fonts need to be modified or rebuilt so that their OpenType GPOS tables are compatible with CoreText?
Are there any established Expo or React Native libraries for accurate Quranic text rendering across Android and iOS without converting every verse into SVG?
