Harmattan is an OpenType and Graphite-enabled font that supports the Arabic script. This page demonstrates the use of .woff fonts (using Harmattan) on a web page. A pdf showing the correct rendering of this text is also shown here.

The Harmattan font includes a number of optional features that provide alternative rendering that might be preferable for use in some contexts. The sections below enumerate the details of these features. Whether these features are available to users will depend on both the application and the rendering technology (Graphite or OpenType) being used. Most features are available in both Graphite and OpenType, though there may be minor differences in their implementation.

In Mozilla Firefox, with either Graphite or OpenType rendering, features can be accessed using the appropriate CSS markup. See the instructions on how to enable Graphite in Firefox (the technique described there works for both Graphite and OpenType).

Chrome, Safari, and Edge use OpenType rendering and features can be accessed using the appropriate CSS markup.

Test rendering engine choice

Here is a simple test to see if Graphite is working in your browser. If it is, the following will say “RenderingGraphite”. If your browser does not support Graphite it should say “RenderingOpentype”. Firefox is currently the only browser that supports Graphite. See the instructions on how to enable Graphite in Firefox.

Check RenderingUnknown

Language

Language Sample Rendering* Feature setting
default د ذ ڈ ډ ڊ ڋ ڌ ڍ ڎ ڏ ڐ ۮ ݙ ݚ ࢮ م ممم ݥ ݥݥݥ ݦ ݦݦݦ ࢧ ࢧࢧࢧ ه ههه ۴۵۶۷ ◌ِّ◌ٌ◌ُ G,O,T
Kurdish (Northern) د ذ ڈ ډ ڊ ڋ ڌ ڍ ڎ ڏ ڐ ۮ ݙ ݚ ࢮ م ممم ݥ ݥݥݥ ݦ ݦݦݦ ࢧ ࢧࢧࢧ ه ههه ۴۵۶۷ ◌ِّ◌ٌ◌ُ G,O,T lang=kmr
Rohingya د ذ ڈ ډ ڊ ڋ ڌ ڍ ڎ ڏ ڐ ۮ ݙ ݚ ࢮ م ممم ݥ ݥݥݥ ݦ ݦݦݦ ࢧ ࢧࢧࢧ ه ههه ۴۵۶۷ ◌ِّ◌ٌ◌ُ G,T lang=rhg
Sindhi (sd) د ذ ڈ ډ ڊ ڋ ڌ ڍ ڎ ڏ ڐ ۮ ݙ ݚ ࢮ م ممم ݥ ݥݥݥ ݦ ݦݦݦ ࢧ ࢧࢧࢧ ه ههه ۴۵۶۷ ◌ِّ◌ٌ◌ُ G,O,T lang=sd
Urdu (ur) د ذ ڈ ډ ڊ ڋ ڌ ڍ ڎ ڏ ڐ ۮ ݙ ݚ ࢮ م ممم ݥ ݥݥݥ ݦ ݦݦݦ ࢧ ࢧࢧࢧ ه ههه ۴۵۶۷ ◌ِّ◌ٌ◌ُ G,O,T lang=ur
Wolof (wo) د ذ ڈ ډ ڊ ڋ ڌ ڍ ڎ ڏ ڐ ۮ ݙ ݚ ࢮ م ممم ݥ ݥݥݥ ݦ ݦݦݦ ࢧ ࢧࢧࢧ ه ههه ۴۵۶۷ ◌ِّ◌ٌ◌ُ G,O,T lang=wo

Alef diacritic placement

Affects: U+0623, U+0625, U+0627, U+064E, U+0650, U+0654, U+0655

Feature Sample Rendering* Feature setting
Standard أإاَاِأإلألإ G,O,T cv02=0
Hamza touching أإاَاِأإلألإ G,O,T cv02=1
Touching أإاَاِأإلألإ G,O,T cv02=2

Jeem/Hah

Affects: U+062C, U+062D, U+062E, U+0682, U+0683, U+0684, U+0685, U+0686, U+06BF, U+0757, U+0758, U+08A2, U+08C1, U+08C5, U+08C6

Feature Sample Rendering* Feature setting
Standard ج ججج ح ححح خ خخخ ڂ ڂڂڂ ڃ ڃڃڃ ڄ ڄڄڄ څ څڅڅ چ چچچ ڿ ڿڿڿ ݗ ݗݗݗ ݘ ݘݘݘ ࢢ ࢢࢢࢢ ࣁ ࣁࣁࣁ ࣅ ࣅࣅࣅ ࣆ ࣆࣆࣆ G,O,T cv08=0
Handwritten ج ججج ح ححح خ خخخ ڂ ڂڂڂ ڃ ڃڃڃ ڄ ڄڄڄ څ څڅڅ چ چچچ ڿ ڿڿڿ ݗ ݗݗݗ ݘ ݘݘݘ ࢢ ࢢࢢࢢ ࣁ ࣁࣁࣁ ࣅ ࣅࣅࣅ ࣆ ࣆࣆࣆ G,O,T cv08=1

Dal

Affects: U+062F, U+0630, U+0688, U+0689, U+068A, U+068B, U+068C, U+068D, U+068E, U+068F, U+0690, U+06EE, U+0759, U+075A, U+08AE

Feature Sample Rendering* Feature setting
Standard د ذ ڈ ډ ڊ ڋ ڌ ڍ ڎ ڏ ڐ ۮ ݙ ݚ ࢮ G,O,T cv12=0
Alternate د ذ ڈ ډ ڊ ڋ ڌ ڍ ڎ ڏ ڐ ۮ ݙ ݚ ࢮ G,O,T cv12=1

Sad/Dad

Affects: U+0635, U+0636, U+069D, U+069E, U+06FB, U+08AF

Feature Sample Rendering* Feature setting
Standard ص صصص ض ضضض ڝ ڝڝڝ ڞ ڞڞڞ ࢯࢯࢯ ࢯ ۻ ۻۻۻ G,O,T cv20=0
Half ص صصص ض ضضض ڝ ڝڝڝ ڞ ڞڞڞ ࢯࢯࢯ ࢯ ۻ ۻۻۻ G,O,T cv20=1

Meem

Affects: U+0645, U+0765, U+0766, U+08A7

Feature Sample Rendering* Feature setting
Standard م ممم ݥ ݥݥݥ ݦ ݦݦݦ ࢧ ࢧࢧࢧ G,O,T cv44=0
Sindhi-style م ممم ݥ ݥݥݥ ݦ ݦݦݦ ࢧ ࢧࢧࢧ G,O,T cv44=1

Heh

Affects: U+0647

Feature Sample Rendering* Feature setting
Standard ه ههه G,O,T cv48=0
Kurdish-style ه ههه G,O,T cv48=3
Sindhi-style ه ههه G,O,T cv48=1
Urdu-style ه ههه G,O,T cv48=2

Arabic U

Affects: U+0677, U+06C7

Feature Sample Rendering* Feature setting
Standard ٷ ۇ G,O,T cv50=0
Filled ٷ ۇ G,O,T cv50=1

Maddah

Affects: U+0622, U+0627, U+0653, U+0653

Feature Sample Rendering* Feature setting
Small آ آ ◌ٓ G,O,T cv60=0
Large آ آ ◌ٓ G,O,T cv60=1

Shadda+kasra placement

Affects: U+064D, U+0650 with U+0651

Feature Sample Rendering* Feature setting
Default بِّ ◌ِّ بٍّ ◌ٍّ G,O,T cv62=0
Lowered بِّ ◌ِّ بٍّ ◌ٍّ G,O,T cv62=1
Raised بِّ ◌ِّ بٍّ ◌ٍّ G,),T cv62=2

Damma

Affects: U+064F

Feature Sample Rendering* Feature setting
Standard بُ ◌ُ G,O,T cv70=0
Filled بُ ◌ُ G,O,T cv70=1
Short بُ ◌ُ G,O,T cv70=2

Dammatan

Affects: U+064C

Feature Sample Rendering* Feature setting
Standard بٌ ◌ٌ G,O,T cv72=0
Six-nine بٌ ◌ٌ G,O,T cv72=1

Inverted Damma

Affects: U+0657

Feature Sample Rendering* Feature setting
Standard بٗ ◌ٗ G,O,T cv74=0
Filled بٗ ◌ٗ G,O,T cv74=2

Superscript Alef

Affects: U+0670 on all yeh, sad and seen-like characters
U+0649, U+064A, U+06D0, U+06D1, U+06CC, U+0635, U+0636, U+069D, U+069E, U+06FB, U+08AF, U+0633, U+0634, U+069A, U+069B, U+069C, U+06FA, U+076D, U+077E

Feature Sample Rendering* Feature setting
Small ىٰ ىٰىٰىٰ يٰ يٰيٰيٰ ېٰ ېٰېٰېٰ ۑٰ ۑٰۑٰۑٰ یٰ یٰیٰیٰ صٰ صٰصٰصٰ ضٰ ضٰضٰضٰ ڝٰ ڝٰڝٰڝٰ ڞٰ ڞٰڞٰڞٰ ۻٰ ۻٰۻٰۻٰ سٰ سٰسٰسٰ شٰ شٰشٰشٰ ښٰ ښٰښٰښٰ ࢯٰࢯٰࢯٰ ࢯٰ ݭٰݭٰݭٰ ݭٰ ڛٰ ڛٰڛٰڛٰ ڜٰ ڜٰڜٰڜٰ ۺٰ ۺٰۺٰۺٰ ݾٰݾٰݾٰ ݾٰ G,O,T cv76=0
Large ىٰ ىٰىٰىٰ يٰ يٰيٰيٰ ېٰ ېٰېٰېٰ ۑٰ ۑٰۑٰۑٰ یٰ یٰیٰیٰ صٰ صٰصٰصٰ ضٰ ضٰضٰضٰ ڝٰ ڝٰڝٰڝٰ ڞٰ ڞٰڞٰڞٰ ۻٰ ۻٰۻٰۻٰ سٰ سٰسٰسٰ شٰ شٰشٰشٰ ښٰ ښٰښٰښٰ ࢯٰࢯٰࢯٰ ࢯٰ ݭٰݭٰݭٰ ݭٰ ڛٰ ڛٰڛٰڛٰ ڜٰ ڜٰڜٰڜٰ ۺٰ ۺٰۺٰۺٰ ݾٰݾٰݾٰ ݾٰ G,O,T cv76=1

Sukun

Affects: U+0652

Feature Sample Rendering* Feature setting
Closed بْ ◌ْ G,O,T cv78=0
Open down بْ ◌ْ G,O,T cv78=1
Open left بْ ◌ْ G,O,T cv78=2

End of ayah

Affects: U+06DD

Firefox allows you to use U+06DD followed by the digits and proper rendering occurs. Some applications require the following:

  • precede the entire sequence (subtending mark plus following digits) with
    202D LEFT-TO-RIGHT OVERRIDE
  • follow the entire sequence with U+202C POP DIRECTIONAL FORMATTING.

Surrounding the sequence with U+202D and U+202C seems to give the most reliable results in different browsers. However, we have not found a solution that works in Internet Explorer/Edge.

Feature Sample Rendering* Feature setting
Standard
(U+202D U+06DD U+0031 U+0032 U+0033 U+202C)
‭۝123‬ G,O,T cv80=0
Simplified A ‭۝123‬ G,O,T cv80=1
Simplified B ‭۝123‬ G,O,T cv80=2

Eastern digits

Affects: U+06F4, U+06F6, U+06F7

Feature Sample Rendering* Feature setting
Standard ۴۵۶۷ G,O,T cv82=0
Sindhi-style ۴۵۶۷ G,O,T cv82=1
Urdu-style ۴۵۶۷ G,O,T cv82=2
Rohingya-style ۴۵۶۷ G,O,T cv82=4

Comma

Affects: U+060C, U+061B

Feature Sample Rendering* Feature setting
Upward ، ؛ G,O,T cv84=0
Downward ، ؛ G,O,T cv84=1

*Legend: G=Implemented in Graphite; O=Implemented in OpenType; T=Implemented in TypeTuner (command line version: http://scripts.sil.org/TypeTuner and web-based version: http://scripts.sil.org/ttw).