DEV Community

Cover image for Converting any Arabic font to TechArabic
Ashraf Ras
Ashraf Ras

Posted on

Converting any Arabic font to TechArabic

As discussed in our previous article titled Technical Arabic, this form of Arabic relies on a non-cursive script, where each letter retains a consistent shape regardless of its position in a sentence. In this article, I will guide you through the process of converting any Arabic font into a technical Arabic font. It is important to note that technical Arabic is primarily focused on writing code, mathematical equations, and scientific expressions; however, it remains robust and reliable for certain descriptive segments as well.

In this article, we have selected the Kawkab Mono font, and we will guide you through the process of converting it into a non-cursive format.

Why mono?

Mono fonts, or monospaced fonts, differ from regular fonts in that each character occupies the same fixed width, whereas regular fonts feature varying widths for different characters. This uniformity in mono fonts enhances readability and alignment, making it easier to scan and comprehend code and mathematical equations. The consistent spacing allows for clear visual organization, which is essential when dealing with complex syntax and structures. As a result, mono fonts are preferred in programming and mathematical writing, as they minimize confusion, facilitate line-by-line debugging, and ensure that symbols and numbers align correctly, thereby enhancing overall clarity and precision in technical documents.

Getting the font

Visit the font's website to download the files. After extracting them, you will find a structure similar to the following:

Kawkab font files

You can select any format that suits your needs. However, for my purposes, as I require a compressed format for modern web browsers, I will choose KawkabMono-Regular.woff2. The same guidelines will apply regardless of the format you select.

The font editor

You can use any font editor you prefer; I personally use FontForge, which you can download from the link provided.

Upon opening the font file in FontForge, you will see a screen similar to the following:

Kawkab font in FontForge

This article aims to be concise, so I will not cover the fundamentals of font design. For more detailed information, please refer to this guide.

Find the substitution form

Next, we need to identify the initial substitution form for all our Arabic glyphs. Our objective is to modify the font file to include only the initial form of each letter, regardless of its position within a word, thereby removing all other forms.

To begin, select any Arabic glyph (for instance, the letter "beh") and navigate to Element > Glyph Info > Substitutions.

Substitutions of beh

Take note of the glyph name for the 'init' substitution form, which is uniFE91 in this example.

Next, go to View > Goto and enter "uniFE91" to select the corresponding glyph. Double-click on it to open the glyph editor.

Beh init form

Replace Default Glyph with 'Init' Form

  1. Select the entire 'init' form:
    You can use Edit > Select All or press Ctrl + A.

  2. Copy the 'init' form:
    Go to Edit > Copy or press Ctrl + C.

  3. Close the editing window for the 'init' glyph.

  4. Now, go back to the default glyph (uni0628 in our example).

  5. Double-click to open the glyph editing window.

  6. Select all content in this glyph:
    Again, use Edit > Select All or press Ctrl + A.

  7. Delete the existing content:
    Press the Delete key.

  8. Paste the 'init' form:
    Go to Edit > Paste or press Ctrl + V.

Repeat for All Glyphs

Repeat the above steps for each glyph from uni0621 to uni064A (Alef to Yeh).

Save Your Changes

Once all glyphs have been replaced:

  • Go to File > Generate Fonts.
  • Choose your desired format (e.g., TrueType, OpenType).
  • Click Save and confirm any prompts.

Following these steps will allow you to replace each glyph's default form with its 'init' form in FontForge effectively.

The result

Using the generated font, your code will appear as follows:

Example code in TechArabic

Observe that each letter adopts a single shape, and the letters are separated while still remaining readable. Additionally, we have addressed several complexities associated with the Hamza.

Top comments (0)