Webfont Features Demo
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).