From Page to Screen: Rethinking Quran Rendering for the Digital Age
How we rebuilt our Quran rendering engine to handle diacritics, typography, and right-to-left text at 60fps.
Rendering Arabic text correctly is one of the most technically demanding challenges in software. Now add Quranic diacritics (harakat), special symbols (sajdah markers, waqf signs), and the requirement that every character must be pixel-perfect for a religious text — and you understand what our engineering team has been solving.
The Problem with Standard Text Rendering
Most operating systems handle Arabic reasonably well for everyday text. But the Quran uses a specialized script called Uthmanic Rasm — the same script preserved since the original compilation of the Mushaf. This script has:
Ligatures that do not exist in modern Arabic
Diacritics that stack multiple levels high
Pause symbols that must appear mid-word
Color-coded tajweed markings that overlay the base text
Standard HTML/CSS text rendering fails on all four counts.
Our Solution: Canvas-Based Rendering
We rebuilt our rendering engine using a hybrid approach: a custom OpenType font engine combined with a canvas renderer for the diacritic overlay layer. This gives us:
Sub-pixel accuracy for diacritic placement
Smooth 60fps scrolling even with tajweed overlays active
Consistent rendering across iOS, Android, and web
The Font
We use a custom subset of the KFGQPC Uthmanic Script font, optimized for digital screens. We worked with Arabic typography specialists to ensure every glyph is correctly formed at sizes from 12px to 72px.
The result is a reading experience that feels as close to a printed Mushaf as a screen can offer.
