Typesetting Urdu poetry on the web

(WORK ON THIS!!!)There is a lot of Urdu poetry on the web. Last year, I released Kulliyat-e-Ghalib, a web book of Ghalib’s Urdu poetry. One of the goals of the web book was to present the poetry in the best possible manner on the web (without resorting to hacks). As it turned out, modern CSS is totally up for the job, but somehow we still see most Urdu poetry on the web set in a single column. Kulliyat and this post attempt to change that.

Most of Ghalib’s work is comprised of ghazals (see below for an introduction), and ghazals are what I shall be focusing on in this post. The same ideas can be easily extrapolated to apply on other genres too. I had hoped to write this blog post much sooner, but better than late than never, right?

A (very) short introduction to Urdu ghazal

A ghazal (غزل) is “[a]n amatory poem, an ode”¹ that originated in Arabic poetry, and later spread to Persian and Urdu. In terms of structure:

• The atomic item of a ghazal is the مصرع (misra), or the line. (I shall use the transliterated term misra for the rest of the post, in order to avoid confusion with the generic line of a block.)
• Two misras combine to form a couplet or a verse (شعر). (I shall use the term verse in the rest of the post.)
• A ghazal is a combination of three or more verses, with each verse representing a single thought or an idea.²

[figure illustrating misras and verses]

Traditional layouts of a ghazal

Before diving into the HTML and CSS, let’s first have a look at the various ways in which Urdu poetry has been traditionally laid out. First, three ghazals from Diwan-e-Ghalib, published by Punjab University Press, and set by the famous calligrapher, Mirza Nafees.

Currently on the web, most Urdu poetry is set in a single column. But if we look at the older manuscripts or books, we notice three layouts that the calligraphers and scribes have been using, illustrated in the figure below:

Layout 1: single column Layout 2: two columns, with a third “pesudocolumn” in between. Layout 3: two columns.

[figure illustrating these 3 layouts. Annotations in the figures describe where misras and verses are.]

The first example shows a ghazal where all misras are vertically stacked in a single column, and verses are separated with whitespace.

The second example is where things start to get interesting. Here, misras of a verse are still stacked, but the first misra is right-aligned, and the second misra is left-aligned. They still have a bit of a horizontal overlap in the middle. There is no whitespace between the verses. Also, misras of the last verse are center-aligned.

The third example is the most traditional: the whole verse is in

Notice that in Layouts 2 and 3, the last verse is set in the center, with its misras stacked in a single and seemingly independent column. A couple other things to note in all of these layouts:

There are two things to note in all of these layouts:

1. All the misras (or their containing columns) are approximately equal in width.
2. In order to fill out the available space in a column, the calligrapher has employed a variety of justification techniques (such as the kashida, or elongation of letterforms; swash variants; the cascading arrangement of words; etc.)

Before moving forward, a note about justification: A lot of work is being done in order to achieve authentic Arabic justification in digital typography,³ but much of it is still in its early stages, and therefore, not implemented on the web. In web browsers, when we justify Arabic text using the text-align: justify CSS property, all it does is the addition of white space between words, and which is what we shall be using for poetry, too. The requirements of poetry justification are much more rigorous than normal text, anyway: the calligrapher will often ensure that the qafiyahs (rhyming words at the end of a misra) or radeefs (identically repeated word(s) at the end of a misra) are written in the same manner (i.e., same kashidas or swash forms) to achieve a visual rhythm in the layout. [PAGE 154 OF DIWAN-E-GHALIB HAS AN EXAMPLE] Implementing such deliberate justification in an automated manner will also be an interesting challenge, but let’s leave it for the smart folks of various text and layout technology working groups.