Khatt.Seen (خط.س): Arabic Mathematical Notation Typesetting System

Ghasan Al-Sakkaf
4 min readApr 2, 2020

--

In the name of Allah, the Most Gracious, the Most Merciful

Introduction

I have recently launched Khatt.Seen (خط.س; meaning Script.x), a typesetter system for Arabic mathematical notation here: https://khatt.org/.

For those who might not know, in many Arab countries, students study mathematics in Arabic mathematical notation, which is written from right to left, and uses Arabic characters for notation. You can read this article on Wikipedia to know more. Look at the comparison below for a quick glance.

Comparison of Arabic and Latin mathematical notation (Wikipedia)

The Challenge

Seeing the lack of proper typesetting systems that support Arabic mathematical notation, I was motivated to take on this journey to start developing a typesetter six months ago, and the scope was to support pre-university mathematical notation as a start.

I think by now I have supported most of the scope goals, and it is ready for use. Following is an example of Khatt.Seen output in Amiri font. A full list of supported features can be accessed here (in Arabic).

A sample of Khatt.Seen rendered output in Amiri font

Khatt.Seen Commands

Khatt.Seen receives its input as series of textual commands, inspired by LaTex / TeX commands. The commands are written in Arabic from right to left. Examples (equivalent in English):

  • x = \frac {1}{2} + \sqrt {3}{9}
  • #fnSize {40} #mode1 x = \intgral {x + 1}{x \.arrow.right 10}
  • \matrix { {1}, {2}, {3} } { {4}, {5}, {\frac {1}{2}} }

The Inspiration

The typesetter in inspired by the awesome TeX typesetting system. Indeed, my journey started by ordering a copy of The TeXbook, and it has really shaped my understanding of the problem, and how to tackle it.

However, TeX was designed in a time were fonts were not standardized, and it is so complex, where it should not be, in my humble opinion. I have looked at similar systems like MathJax, and they also only support limited fonts in v2, and on v3, they are currently only supporting one font.

The Goal

So I set a goal; to create a Arabic mathematical typesetter that is font-independent, does not need any kind of configuration, and works just like any other word processing software. You install a font, it is there for you.

Of course, this has to come at certain price of output refinement, but I believe, it is worth it. And the result is awesome (alhamdulillah). Following is the output for the same example above, but in Arial and Segoe UI (Windows 10 system font) fonts respectively.

A sample of Khatt.Seen rendered output in Arial font
A sample of Khatt.Seen rendered output in Segoe UI (Windows 10) font

Tools & Technologies

This adventure was an eye opening to me, and I have learned so much (alhamdullilah), and the following are the technologies used in the system and the website:

  • SkiaSharp is used to draw, position, and render the result. Gonna give credit to Microsoft’s documentation team on their awesome work. Really grateful.
  • HarfBuzzSharp is used to shape the text, since Arabic is complex text and needs shaping.
  • I have developed the binding library FriBidiSharp to the FriBidi library using the binding tool CppSharp.
  • FriBidiSharp is used to calculate the direction of mixed-direction text. Even though Arabic is written from right to left, numbers has to be drawn from left to right. FriBidi is here to help :)
  • I have used ANTLR4 to develop Khatt.Seen Commands parser. It is a lovely piece of software.
  • The system now renders using Amiri font for Arabic characters, and XITS for mathematical operator characters.
  • ASP.NET Core is used for the web application.
  • The system is running inside a Docker container inside a Linux box, served by nginx.

The Next Steps

For now I am gonna oversee the system for bugs and fixes, and later on, I will start (inshallah) developing plugins for word processors like Word and Google Docs.

I will be happy to answer your questions if you have any.

Thank you for reading :)

--

--

Ghasan Al-Sakkaf

A software developer interested in Web, Mobile, 2D Graphics, and C#.