Communications in Applied Sciences

ISSN 2201-7372

Volume 3, Number 2, 2015, 42-59

From Arabic Alphabets to Two Dimension Shapes in Kufic Calligraphy Style

Using Grid Board Catalog

Dhamyaa A. AL-Nasrawi, Ahmed F. Almukhtar and Wafaa S. AL-Baldawi

Computer Science Department, College of Science, University of Kerbala, Karbala 56001, Iraq

Corresponding author: Dhamyaa A. AL-Nasrawi, Computer Science Department, College of Science,

University of Kerbala, Karbala 56001, Iraq

Abstract: The Kufic font takes its name from the location in which the font was created around the end of

the seventh century, Kufa, Iraq. Kufic was the principal script used to replicate the Qur’ans until

approximately the eleventh century. Depending upon where a character is located in a word, the

character may be represented differently. Given this location-specific representation, the Arabic

characters uses in script are expanded to 116 shapes. A character can have an isolated shape, a joined

shape, a left joined shape and a right joined shape.

The goal of this study is to convert Arabic script to a two-dimensional shape in Kufic calligraphy style

that has regular geometric components (lines, circles, curves, arcs, etc.) by using a grid board catalog. The

converting process represents a method of learning electronically as well as production for all Arabic

alphabets in aesthetic shapes. The proposed grid board produces all possible shapes of any letter in

Arabic alphabets. Some alphabets are shared by sub shapes and are overlapped in the grid board in

order to visualize them as groups of similar characters. The position of a letter in the grid board, the letter

dimension itself (width and height) and the position of letters in Arabic words were required to convert

the characters. The results showed that the proposed grid is a powerful and influential tool that can be

used to learn the Kufic font style with a simple, easy and effective method when contrasted to the

classical method.

Keywords: Arabic Scripts, Grid board catalog, Kufic font, Shapes of characters.

© Copyright 2015 the authors. 42

43 Communications in Applied Sciences

1. Introduction

Art in Islam follows the tradition of being non-representational, especially in important

circumstances such as in the mosque, writing and illumination. The strict style gives it

special appeal, being non-individualistic and not influenced by scale. In writing, Square

Kufic is the essence of the sparse nomadic tradition in its abstract stylized form such as

that of the traditional archaic Kufic script.

Calligraphy, from the Greek word kalligraphía (καλλος kallos "beauty" + γραφος

graphos "writing"), is significant. Indeed, delightful written work assumes an essential

part in Islam. Calligraphy has been perhaps the main expression of representational art

in Islam, as the Islamic convention has regularly scowled upon any allegorical

symbolism [2].

One of the earliest scripts is the Kufic or Kufi script, which is thought to have started in

the city of Hira. This rakish script utilizes strong, short strokes for every letter. There is a

squarish part to every letter as well. In original copies, the letters regularly appeared as

strong dark characters while the diacritical markings, often red, were a differentiating

character. Because of its thickness, it was frequently used as a part of stone carvings and

in structural engineering and on different coins. For 300 years, it was the essential script

utilized as a part of replication of the Qur'an and is still being used today. There are

different types of Kufic script, named for the city it originated in. Types of Kufic script

include foliated, plaited, and Qarmatian Kufic [3][4]. The fundamental for this script is

that it is precise and squarish. Besides the three primary types of Kufic script, there are

two further variants, Maghribi and Andalusi. These two variations in the script still

hold the precise attributes; but is more flexible and includes more curves [2].

In this paper, an efficient method is proposed to produce Arabic alphabets in Kufic font

using a grid board catalog, which is regarded as a good tool for learning "How to write

in Kufic font", especially that the Kufic calligraphy style has regular geometric

components (lines, circles, curves, arcs, etc.) which can be overlapped and generated
 Communications in Applied Sciences 44

easily by a grid board catalog. The production process involves converting Arabic script

to two-dimension shapes, depending upon their location within the word.

The organization of this paper is: Section 2 introduces related works; Arabic script

features are explained in the Section 3 materials and methods are presented in Section 4;

experimental results can be found in Section 5. Finally, conclusions are provided in

Section 6.

2. Related Works

Ilham Chaker (Ilham Chaker, et al., 2011) proposed a procedure for creating Moroccan

fonts from manuscripts that are characterized and known by their artistic values. It is

initially a question of choosing the manuscript that has a good artistic representation of

the characters. Once identified the manuscript is scanned to determine the segmentation

and extract the characters. A factorization of the extracted characters can then be used to

generate the actual font [5].

Sherif Mansour and Hossam Fahmy (Sherif Mansour and Hossam Fahmy, 2012) attempt

to use a new font, AlQalam, for the Arabic script within TEX, and introduced new

features to achieve a complete functional font package. They describe how to use a new

right to left font within TEX, as well as the approaches to debug the font [6].

3. Arab Script

3.1 Features

Each spoken language has its own elements that are connected in perusing, composition,

listening and talking. Arabic language is a root-based dialect comprised of 28 letters

with each letter having vowels that vary according to the diacritics utilized. Portions of

the 28 letters are composed with various shapes depending on their position in the

word [7].

Arabic segment in the Hex reference of the Unicode institutionalization that incorporate
45 Communications in Applied Sciences

characters, for example, letters, images and diacritics ranges from 0600 to 06FF. The

Arabic letters in Unicode range from 0621 to 063A and from 0641 to 064A [9]. The

features of Arabic scripts are explained in table 1 [8].

3.2 Glyphs

The Arabic letters regularly take different structures, depending on where the letter falls

in the word and the text style that is utilized. The state of letters in Kufic text style is not

the same as letters in the Nasikh textual style. Most letters have a starting structure

(beginning of a word), center structure (center of a word), completion structure

(finishing a word), and stand-alone shape. The arrangement of glyphs totals 116: 22

letters have four option shapes, and 6 letters have two option shapes (See Table 2).

Large portions of the structures associate with the past letter (if there is one) and also

interact with the accompanying letter (once more, if there is one). Nonetheless, there are

six letters which are non-connectors, implying that they don't unite with the letter that

follows. These six letters are ALEF, DAL, THAL, RAH, ZAIN, and WAW [10].

This paper will explain the glyphs of letters in Kufic font, to facilitate the learning

process of writing in this font. In this paper, three Arabic calligraphers (Abdel-Kareem

AL-Shammari, Jamal AL-Kabbasi, and Mohammad Abdel-Qader) were considered in

generating and learning Kufic fonts. For example, the letter FEH has four glyphs

explained in Figure 1.
 Communications in Applied Sciences 46

Table 1. Features of Arabic scripts

Features Notes
Script name Abjad
Case distinction (sensitive) No
Multiple combining Characters Yes, diacritics for vowel sounds are typically not used.
The Shadda (like diacritic, that doubles the consonant
value) is often not used either. But if they are used
together, they have to be displayed together above the
same base consonant.

Context-based Positioning Yes, for example the diacritic being placed at different
heights, depending on the height of the base character
that it appears above.
Contextual shaping Yes, This example is font dependent. In more classical
fonts, you will often see the join between certain
characters above the baseline, rather than at the baseline.
Certain letters in the highlighted sequence may join above
the line, or on the baseline,
Cursive script Yes, Arabic script joins letters together.
Many more glyphs than Since Arabic is a cursive script, there are many more
characters? glyphs in a font set than there are characters, since you
need glyphs that join in various ways. Not only that, but
Arabic also has ligatures, which themselves join to
characters or other ligatures alongside them. One ligature
(lam-alif) is mandatory.

Text direction Arabic script is written right-to-left

Baseline Mid
Space is word separator Yes
Wraps at Word
Justification The Arabic justifies text by stretching the baseline and the
glyphs of the text, rather than expanding inter-word
spaces. Justification can also introduce ligatures in order
to squeeze more text onto a line.

Native digits? Yes

Other glyph height; glyph width variation
47 Communications in Applied Sciences

Isolated Final Medial Initial

Figure1. Shapes of FEH Arabic letter

4. Methodology

In this paper, a new method is presented to generate Arabic scripts using a grid board

for drawing the glyph of character in Kufic font. The process begins by inputting any

Arabic word and then producing it in Kufic calligraphy style with the following

components (See Figure 2).

 Communications in Applied Sciences 48

Table2. Arabic alphabets

Name Unicode Shapes
Isolated Final Medial Initial
HAMZA 0621 ‫ء‬
ALEF WITH MADDA ABOVE 0622 ‫آ‬ ‫ـآ‬
ALEF WITH HAMZA ABOVE 0623 ‫أ‬ ‫ـأ‬
WAW WITH HAMZA 0624 ‫ؤ‬ ‫ـؤ‬
ABOVE
ALEF WITH HAMZA 0625 ‫إ‬
BELOW
YEH WITH HAMZA ABOVE 0626 ‫ئ‬ ‫ـئ‬ ‫ـئـ‬ ‫ئـ‬
ALEF 0627 ‫ا‬ ‫ـا‬
BEH 0628 ‫ب‬ ‫ـب‬ ‫ـبـ‬ ‫بـ‬
TEH MERBUTA 0629 ‫ة‬ ‫ـة‬
THE 062A ‫ت‬ ‫ـت‬ ‫ـتـ‬ ‫تـ‬
THEH 062B ‫ث‬ ‫ـث‬ ‫ـثـ‬ ‫ثـ‬
JEEM 062C ‫ج‬ ‫ـج‬ ‫ـجـ‬ ‫جـ‬
HAH 062D ‫ح‬ ‫ـح‬ ‫ـحـ‬ ‫حـ‬
KHAH 062E ‫خ‬ ‫ـخ‬ ‫ـخـ‬ ‫خـ‬
DAL 062F ‫د‬ ‫ـد‬
THAL 0630 ‫ذ‬ ‫ـذ‬
RAH 0631 ‫ر‬ ‫ـر‬
ZAIN 0632 ‫ز‬ ‫ـز‬
SEEN 0633 ‫س‬ ‫ـس‬ ‫ـسـ‬ ‫سـ‬
SHEEN 0634 ‫ش‬ ‫ـش‬ ‫ـشـ‬ ‫شـ‬
SAD 0635 ‫ص‬ ‫ـص‬ ‫ـصـ‬ ‫صـ‬
DHAD 0636 ‫ض‬ ‫ـض‬ ‫ـضـ‬ ‫ضـ‬
TAH 0637 ‫ط‬ ‫ـط‬ ‫ـطـ‬ ‫طـ‬
ZAH 0638 ‫ظ‬ ‫ـظ‬ ‫ـظـ‬ ‫ظـ‬
AIN 0639 ‫ع‬ ‫ـع‬ ‫ـعـ‬ ‫عـ‬
GHAIN 063A ‫غ‬ ‫ـغ‬ ‫ـغـ‬ ‫غـ‬
FEH 0641 ‫ف‬ ‫ـف‬ ‫ـفـ‬ ‫فـ‬
QAF 0642 ‫ق‬ ‫ـق‬ ‫ـقـ‬ ‫قـ‬
KAF 0643 ‫ك‬ ‫ـك‬ ‫ـكـ‬ ‫كـ‬
LAM 0644 ‫ل‬ ‫ـل‬ ‫ـلـ‬ ‫لـ‬
MEEM 0645 ‫م‬ ‫ـم‬ ‫ـمـ‬ ‫مـ‬
NOON 0646 ‫ن‬ ‫ـن‬ ‫ـنـ‬ ‫نـ‬
HEH 0647 ‫ه‬ ‫ـه‬ ‫ـهـ‬ ‫هـ‬
WAW 0648 ‫و‬ ‫ـو‬
ALEF MAKSOUR 0649 ‫ى‬ ‫ـى‬
YEH 064A ‫ي‬ ‫ـي‬ ‫ـيـ‬ ‫يـ‬
49 Communications in Applied Sciences

Input Arabic Word in

Arabic Word Kufic Style

Figure 2. Aim of proposed method

The grid board has a fixed size involving all Arabic alphabets in overlapping form as a

method to trace the shape of each letter. In the following subsection, the proposed

method is explained in details (See Figure 3).

Initialize Grid Grouping Arabic Checking and Localization and

Board Catalog alphabets matching in grid drawing letter

Figure3. Proposed method steps

4.1. Initialize Grid Board Catalog

A grid is a large a progression of straight vertical and level lines. A lattice subdivides a

structure vertically and evenly into columns and sections. These subdivisions shape the

premise of a secluded and efficient way to approach the formatting of characters. A

graphic-design grid help the planner choose where to put things [11]. At its most basic,

units (or points) determine the sizes of a grid’s component parts. In this paper, the size

of the grid board is 18×14 cells, with each cell being measured in 25 points.

All Arabic alphabets in Kufic font are described in this grid in a simple and easy

method so that similar letters can be grouped together. Each letter is represented by a

set of points on x-axis and y-axis, depending on the glyph of letters in Kufic font (See

Figure 4).
 Communications in Applied Sciences 50

Figure 4. Grid board catalog

4.2. Grouping Arabic alphabets

Many characters in Arabic are similar in sub shapes, such as DAL and THAL, RAH and

ZAIN, WAW and QAF, etc. For example, the letters WAW, MEM, FEH, and QAF are

grouped together to reduce the complexity of each shape by overlapping (See Figure 5).

Figure 5. Four Arabic letters grouped together with overlapping

51 Communications in Applied Sciences

The four letters without overlapping was explained in figure 6; all of these shared in

sub shape.

Figure 6. Four Arabic letters without overlapping

There are six groups arranged in this paper. These groups contain the letters similar in

sub part of letter’s shape (in initial, medial, or final) part. In other words, these letters

shared in sub points of their shapes (See Table 3).

Table 3. Grouping Arabic alphabets

Groups Unicode Glyphs

Group1 Isolated Form ‫ل‬،‫ا‬

Not Isolated Form ‫ـلـ‬،،‫ـلـ‬،‫ـا‬، ‫لـ‬

Group2 Isolated Form ‫ه‬،‫ة‬،‫م‬،‫ن‬،‫ف‬،‫ق‬،‫ز‬،‫ر‬،‫ؤ‬،‫و‬،‫ء‬

Not Isolated Form ‫ـقـ‬،‫ـفـ‬،‫ مـ‬،‫ ـمـ‬،‫ـز‬،‫ـر‬،‫ـؤ‬،‫ـو‬،‫ ـن‬،‫ ـم‬،‫ـق‬،‫ـف‬،‫ ـه‬،‫ـة‬

Group3 Isolated Form ‫ث‬،‫ت‬،‫ب‬

Not Isolated Form ‫ ـنـ‬،‫ـيـ‬، ‫ ـثـ‬،‫ ـتـ‬،‫ ـبـ‬،‫ ـئـ‬،‫ـث‬،‫ـت‬،‫ـب‬،‫ يـ‬،‫ ئـ‬،‫ نـ‬،‫ ثـ‬،‫تــ‬، ‫بـ‬

Group4 Isolated Form ‫ك‬،‫ظ‬،‫ط‬،‫ض‬،‫ص‬،‫ذ‬،‫د‬

Not Isolated Form ‫ـك‬،‫ـظ‬،‫ـط‬،‫ـض‬،‫ـص‬،،‫ـكـ‬،‫ـظـ‬،‫ ـطـ‬،‫ـضـ‬،‫ـصـ‬،‫ـذ‬،‫ـد‬, ‫ظـ‬،‫طـ‬،‫ضـ‬،‫صـ‬

Group5 Isolated Form ‫ي‬،‫ى‬،‫غ‬،‫ع‬،‫ش‬،‫س‬

Not Isolated Form ‫ـى‬،‫ـي‬،‫ ـئ‬،‫ـغ‬،‫ـع‬،‫ـش‬،‫ـس‬،‫ـهـ‬،‫ـغـ‬،‫ـعـ‬،‫ـشـ‬،‫ـسـ‬،‫هـ‬،‫غـ‬،‫عـ‬،‫شـ‬،‫سـ‬
Group 6 Isolated Form ‫خ‬،‫ح‬،‫ج‬
Not Isolated Form ‫ـخ‬،‫ـح‬،‫ ـج‬,‫ـخـ‬,‫ ـحـ‬،‫ـجـ‬,‫خـ‬،‫حـ‬،‫جـ‬
 Communications in Applied Sciences 52

4.3. Checking and matching in grid

In this stage check the status of letter, the steps of checking illustrated in Figure 7.

0 1 to Last-1 Last

Step1 Step2 Step3

Figure 7. Checking steps

In Step 1, check the letter in index=0 to decide whether it is an isolated or connected

letter. The isolated letters are these six: ALEF, DAL, THAL, RAH, ZAIN, and WAW.

When the letter in index=0 is connected, that means it is in its initial form.

Then the rest of the word is checked sequentially in Step 2 until reaching the end of

word. The main purpose of this step is to check the status of letters in second location

until the end of the word. In short, this step requires checking the previous and next

letters.

Finally, in Step 3, check the last character in the Arabic word. The flowchart in Figure 8

explains the details of this stage.

53 Communications in Applied Sciences

Start

Get Arabic Word

Y If N
word[0]
is
Match the Isolated Match the Initial
Isolated
pattern of word[0] connected pattern of
from grid word[0] from grid

While not N N While not

word[last] word[last]

Y
Y
Y Y
If word[i] If word[i] If word[i+1]
is Isolated is Isolated is Isolated

Y N
N N

Match the Match the Initial Match the Final Match the medial
Isolated pattern of connected pattern of connected pattern of connected pattern of
word[i] from grid word[i] from grid word[i] from grid
word[i] from grid

If word[last-
Y
1] is Isolated N
Match the Isolated Match the final
pattern of word[last] connected pattern of
from grid word[last] from grid

End

Figure 8. Proposed method steps

 Communications in Applied Sciences 54

4.4. Localization and drawing letter in Kufic font

Localization process can be implemented by using the two-dimension transformation

matrix to get the desired letter in writing board. This step depends on:

 The position of letter in Arabic words: initial, medial, or final position.

 The position of letter in grid board: the x-axis and y-axis point values.

 The letter dimension itself: width and height, which is implemented by using the

procedure to get max (point in x-axis) and max (point in y-axis).

A letter was displayed by sets of coordinate points. The aim of geometric

transformations is to calculate new coordinate positions for these points. In this paper, a

translation transformation was needed, which is a straight-line movement of a letter

from one position to another. We translate a point from coordinate position (x, y) in

board catalog to a new position (x', y') in the writing board by adding translation

distances, Tx and Ty, to the original coordinates: x' =x+Tx, y' =y+Ty. See Figure 9 [12,13].

Figure 9. Translation in two-dimension

5. GUI of proposed method and results

Graphical user interface (GUI) is a collection of techniques and mechanisms that allow

the user to interact with the computer. GUI consists of objects (what people see on the

screen) and actions (what can be done). The corresponding GUI for the generated Kufic
55 Communications in Applied Sciences

font was shown in Figure 10, which reflects the capabilities of teaching, writing, and

generating Kufic font in Arabic scripts.

Figure 10. GUI of generating Kufic font

The objects represent graphical elements that are fire and react to events. The proposed

software has more advanced features listed in the following:

1. Learning process:

 Display the glyphs (shapes) of all Arabic letters by object ("show

Catalog") , these glyphs are considered based on Arabic calligraphers in

Kufic font, as shown in figure 3.

 Learn the method of writing any letters by choosing it and show the steps

of drawing it. For example choosing letter "TAH" , see figure 11.

2. Generating process:

 Any word can be generating in Kufic font depending on flow chart in

figure 8, the desired glyph of any letter explained in catalog board, more

examples shown in figure 12.

 Communications in Applied Sciences 56

Figure 11. Learn letter "TAH" in Kufic font

Figure 12. Generating word "‫ "كرار‬in Kufic font

57 Communications in Applied Sciences

The glyphs of Arabic letter "SAD" with all possible position (in initial, medal, final and

isolate) are explained in figure 13.

Figure 13. Generating word "‫ "صصص‬in Kufic font

6. Conclusions

Islamic calligraphy is an integral part of the Islamic cultural tradition, relying on the

aesthetics of calligraphy for spiritual expression. Making calligraphy is a highly

respected art form. Therefore, this paper focuses on learning and generating all Arabic

alphabets in Kufic style. As we have shown from this paper, the Kufic calligraphy style

has regular geometric components (lines, circles, curves, arcs, etc.) which can be learned

and generated easily by a grid board catalog. The proposed method explains all Arabic

alphabets in the unique grid which share some parts of letters shaped by overlapping.

The principles of coherence and aesthetics are involved in the friendly GUI of proposed

software, as well as the facilitating learning for all ages of people. This software

surpasses the difficulties in classical methods of Kufic calligraphy style learning by

providing an electronic method that provides all shapes of letters with generating any

Arabic word as an example of learning.

 Communications in Applied Sciences 58

Acknowledgement

We thank our colleagues from Society of Iraqi Calligraphers in Karbala City; especially

the head of society Mr. Abdel-Kareem AL-Shammari who provided insight and

expertise as well as comments that greatly assisted and improved this research.
59 Communications in Applied Sciences

References
[1] George P. 2010. Square Kufic. Available from: http://www.kufic.info/

[2] Guity N. 2014. History of Ggraphic Design. Available from:

http://guity-novin.blogspot.com/2010/02/history-of-graphic-design.html

[3] Gabriel M. 2006. Arabic Script: Styles, Variants, and Calligraphic Adaptations. Abbeville Press

Publisher, New York, 180 p.

[4] Abdelkebir K., Mohammed S. 2001. The Splendor of Islamic Calligraphy. Thames and Hudson,

London. 239 p.

[5] Ilham C., Rachid B., Lhajj M., Mustapha H. 2011. Automatic Creation Of Moroccan Alphabetic.

International Journal of Engineering Science and Technology, 3(4): 3535-3540.

[6] Sherif S., Hossam A. 2012. Experiences with Arabic font development. TUGboat, 33(3): 295-298.

[7] Khalid S. 2011. Diacritic Oriented Arabic Information Retrieval System. International Journal of

Computer Science and Security, 5(1):143-155.

[8] Richard I., 2014. Script features by language. Available from: http://rishida.net/scripts/featurelist/

[9] The Unicode Consortium, The Unicode Standard. Available from: http://www.unicode.org.

[10] Megan W. 2009. Introduction to Arabic Calligraphy. Available from:

http://www.academia.edu/5502543/Arabic_Calligraphy

[11] Lucienne R.2008. A Brief History of Grids. Available from:

http://www.graphics.com/article-old/brief-history-grids

[12] John V. (2005). Geometry for Computer Graphics. Springer – Verlag London Limited ,342 p.

[13] Amarendra N., Arun D., Computer Graphics, Tata McGraw-Hill Publishing company limited, New

Delhi, 2007, 496 p.